3.1 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Declarative Rendering | التقديم التعريفي |
التركيب
قبل أن نبدأ ، هناك طريقتان لاستخدام Vue.js ، أي عبر CDN وعبر التركيب. لتجربة أولى ، من الأسهل استخدام CDN.
من أجل التطوير ، استخدم هذا:
`
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`
عند القفز إلى الإنتاج ، هذا:
`
<script src="https://cdn.jsdelivr.net/npm/vue"></script>`
كما ذكر من قبل ، يمكنك أيضا تثبيت vue-cli ، ولكن هذا ليس كذلك أوصت للمبتدئين.
التقديم التعريفي
يعد Vue.js أداة رائعة لإنشاء صفحات ديناميكية ، والطريقة الأولى للوصول تلمس مع هذا هو ما يسمى التقديم التعريفي.
ويهدف استخدام المصطلح "الإعلاني" إلى تقويم هذا المفهوم اللغات التصريحية ، مثل SQL: يمكنك طلب شيء ما ، لا يتم تضمينه أي تنفيذ. يتيح لك Vue.js الإعلان عن البيانات التي تريدها المقدمة ، ببساطة مثل:
`
let app = new Vue({ el: '#app', data: { message: 'Hello, world!' } });
باستخدام تلك القناصة ، فأنت تخبر Vue أن تقوم بشكل ديناميكي بعرض كل ما يتم تخزينه داخل متغير message . والمتعة: كلما تم تغيير message ، يدير Vue.js إعادة تحميل ذلك الجزء المحدد من DOM وسترى يتغيرون.
إذا كنت ترغب في تجربة هذا التفاعل ، افتح وحدة التحكم وقم بتغيير القيمة من app.message إلى ، قل ، "Hello from console" . هل لاحظت التغيير في الصفحة؟
إن {{ ... }} هي صيغة هذا السلوك: إخراج القيمة من متغير أو تعبير. على سبيل المثال ، يعد هذا أيضًا استخدامًا صالحًا و سوف يؤدي إلى hello :
`
هناك حالات ما نريده هو تعيين سمة باستخدام تطبيق Vue الخاص بنا متغير. قد تعتقد أن الصيغة نفسها تنطبق ، ولكن Vue لديها شيء ما محددة لذلك ، ما نسميه "ملزم".
`
let app = new Vue({ el: '#app', data: { dynamicLink: 'medium.freecodecamp.org' } }
بناء الجملة v-bind هو ما يستدعي Vue.js "توجيه". إنها طريقة لتعيين جديد السمة إلى العلامة التي سيتم التعامل معها عن طريق Vue - هناك المزيد التوجيهات ، كل شيء يبدأ مع v- .