3.1 KiB
title | localeTitle |
---|---|
Declarative Rendering | التقديم التعريفي |
التركيب
قبل أن نبدأ ، هناك طريقتان لاستخدام Vue.js ، أي عبر CDN وعبر التركيب. لتجربة أولى ، من الأسهل استخدام CDN.
من أجل التطوير ، استخدم هذا:
`
`
عند القفز إلى الإنتاج ، هذا:
`
`
كما ذكر من قبل ، يمكنك أيضا تثبيت 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-
.