73 lines
3.1 KiB
Markdown
73 lines
3.1 KiB
Markdown
---
|
|
title: Declarative Rendering
|
|
localeTitle: التقديم التعريفي
|
|
---
|
|
## التركيب
|
|
|
|
قبل أن نبدأ ، هناك طريقتان لاستخدام Vue.js ، أي عبر CDN وعبر التركيب. لتجربة أولى ، من الأسهل استخدام CDN.
|
|
|
|
من أجل التطوير ، استخدم هذا:
|
|
|
|
`
|
|
<!-- development version, includes helpful console warnings -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
`
|
|
|
|
عند القفز إلى الإنتاج ، هذا:
|
|
|
|
`
|
|
<!-- production version, optimized for size and speed -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|
`
|
|
|
|
كما ذكر من قبل ، يمكنك أيضا تثبيت `vue-cli` ، ولكن هذا ليس كذلك أوصت للمبتدئين.
|
|
|
|
## التقديم التعريفي
|
|
|
|
يعد Vue.js أداة رائعة لإنشاء صفحات ديناميكية ، والطريقة الأولى للوصول تلمس مع هذا هو ما يسمى التقديم التعريفي.
|
|
|
|
ويهدف استخدام المصطلح "الإعلاني" إلى تقويم هذا المفهوم اللغات التصريحية ، مثل SQL: يمكنك طلب شيء ما ، لا يتم تضمينه أي تنفيذ. يتيح لك Vue.js الإعلان عن البيانات التي تريدها المقدمة ، ببساطة مثل:
|
|
|
|
`
|
|
<div id="app">
|
|
{{ message }}
|
|
</div>
|
|
`
|
|
|
|
`let app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
message: 'Hello, world!'
|
|
}
|
|
});
|
|
`
|
|
|
|
باستخدام تلك القناصة ، فأنت تخبر Vue أن تقوم بشكل ديناميكي بعرض كل ما يتم تخزينه داخل متغير `message` . والمتعة: كلما تم تغيير `message` ، يدير Vue.js إعادة تحميل ذلك الجزء المحدد من DOM وسترى يتغيرون.
|
|
|
|
إذا كنت ترغب في تجربة هذا التفاعل ، افتح وحدة التحكم وقم بتغيير القيمة من `app.message` إلى ، قل ، `"Hello from console"` . هل لاحظت التغيير في الصفحة؟
|
|
|
|
إن `{{ ... }}` هي صيغة هذا السلوك: إخراج القيمة من متغير أو تعبير. على سبيل المثال ، يعد هذا أيضًا استخدامًا صالحًا و سوف يؤدي إلى `hello` :
|
|
|
|
`
|
|
<div id="app">
|
|
{{ 1 < 2 ? "hello" : "goodbye" }}
|
|
</div>
|
|
`
|
|
|
|
هناك حالات ما نريده هو تعيين سمة باستخدام تطبيق Vue الخاص بنا متغير. قد تعتقد أن الصيغة نفسها تنطبق ، ولكن Vue لديها شيء ما محددة لذلك ، ما نسميه "ملزم".
|
|
|
|
`
|
|
<div id="app">
|
|
<a v-bind:href="dynamicLink">This link</a>
|
|
</div>
|
|
`
|
|
|
|
`let app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
dynamicLink: 'medium.freecodecamp.org'
|
|
}
|
|
}
|
|
`
|
|
|
|
بناء الجملة `v-bind` هو ما يستدعي Vue.js "توجيه". إنها طريقة لتعيين جديد السمة إلى العلامة التي سيتم التعامل معها عن طريق Vue - هناك المزيد التوجيهات ، كل شيء يبدأ مع `v-` . |