يستخدم Vue.js لغة نماذج تمثل مجموعة شاملة من HTML. أي HTML هو قالب Vue.js صالح ، بالإضافة إلى ذلك ، يوفر Vue.js شيئين قويين: الاستيفاء والتوجيهات.
يستخدم Vue.js لغة نماذج تمثل مجموعة شاملة من HTML.
أي HTML هو قالب Vue.js صالح ، بالإضافة إلى ذلك ، يوفر Vue.js شيئين قويين:إقحاموالتوجيهات.
هذا نموذج Vue.js صالح:
<span>Hello!</span>
يمكن وضع هذا القالب داخل مكون Vue معلن صراحة:
new Vue({
template: '<span>Hello!</span>'
})
أو يمكن وضعها في ملفمكون ملف واحد:
<template>
<span>Hello!</span>
</template>
هذا المثال الأول أساسي للغاية. والخطوة التالية هي إخراج جزء من حالة المكون ، على سبيل المثال ، اسم.
يمكن القيام بذلك باستخدام الاستيفاء. أولاً ، نضيف بعض البيانات إلى المكون الخاص بنا:
new Vue({
data: {
name: 'Flavio'
},
template: '<span>Hello!</span>'
})
ومن ثم يمكننا إضافته إلى نموذجنا باستخدام الأقواس المزدوجة:
new Vue({
data: {
name: 'Flavio'
},
template: '<span>Hello {{name}}!</span>'
})
شيء واحد مثير للاهتمام هنا. انظر كيف استخدمنا للتوname
بدلا منthis.data.name
؟
هذا لأن Vue.js يقوم ببعض الربط الداخلي ويسمح للقالب باستخدام الخاصية كما لو كانت محلية. سهل جدا.
في مكون ملف واحد ، سيكون ذلك:
<template>
<span>Hello {{name}}!</span>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
}
}
</script>
لقد استخدمت وظيفة عادية في تصديري. لماذا لا تعمل وظيفة السهم؟
هذا لأنه فيdata
قد نحتاج إلى الوصول إلى طريقة في مثيل المكون الخاص بنا ، ولا يمكننا فعل ذلك إذاthis
غير مرتبط بالمكون ، لذا فإن استخدام وظائف الأسهم غير ممكن.
يمكننا استخدام وظيفة السهم ، ولكن بعد ذلك سأحتاج إلى تذكر التبديل إلى وظيفة عادية في حالة استخدامهاthis
. أعتقد أنه من الأفضل تشغيلها بأمان.
الآن ، عد إلى الاستيفاء.
{{ name }}
تذكير باستيفاء نموذج Mustache / Handlebars ، لكنه مجرد تذكير مرئي.
بينما في محركات القوالب هذه "غبية" ، في Vue ، يمكنك فعل المزيد ، إنها أكثر مرونة.
يمكنك استخدامأي تعبير جافا سكريبتداخل الاستيفاءات الخاصة بك ، لكنك مقيد بتعبير واحد فقط:
{{ name.reverse() }}
{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}
يوفر Vue إمكانية الوصول إلى بعض الكائنات العامة داخل القوالب ، بما في ذلك الرياضيات والتاريخ ، بحيث يمكنك استخدامها:
{{ Math.sqrt(16) * Math.random() }}
من الأفضل تجنب إضافة منطق معقد إلى القوالب ، لكن حقيقة Vue تتيح لنا مزيدًا من المرونة ، خاصة عند تجربة الأشياء.
يمكننا أولاً محاولة وضع تعبير في القالب ، ثم نقله إلى خاصية أو طريقة محسوبة لاحقًا.
سيتم تحديث القيمة المضمنة في أي استيفاء عند تغيير أي من خصائص البيانات التي يعتمد عليها.
يمكنك تجنب هذا التفاعل باستخدام ملفv-once
التوجيه.
يتم دائمًا تخطي النتيجة ، لذا لا يمكنك تضمين HTML في الإخراج.
إذا كنت بحاجة إلى مقتطف HTML ، فأنت بحاجة إلى استخدام ملحقv-html
التوجيه بدلا من ذلك.
تحميل مجانيكتيب Vue
المزيد من دروس vue:
- نظرة عامة على Vue.js
- واجهة سطر الأوامر Vue.js: تعرف على كيفية استخدامها
- أداة Vue.js DevTools
- تكوين VS Code لتطوير Vue
- أنشئ تطبيقك الأول باستخدام Vue.js
- مكونات الملف الفردي Vue.js
- قوالب Vue.js والاستيفاءات
- توجيهات Vue.js
- طرق Vue.js
- خصائص Vue.js المحسوبة
- تصميم مكونات Vue.js باستخدام CSS
- مراقبو Vue.js
- طرق Vue مقابل المراقبون مقابل الخصائص المحسوبة
- مرشحات Vue.js
- مكونات Vue.js
- فتحات Vue.js
- الدعائم المكون Vue.js
- أحداث Vue.js
- اتصالات مكونات Vue.js
- Vuex ، مدير ولاية Vue.js
- Vue ، استخدم مكونًا داخل مكون آخر
- Vue ، كيفية استخدام الخاصية كاسم للفئة
- كيفية استخدام SCSS مع Vue.js Single File Components
- استخدام Tailwind مع Vue.js
- جهاز التوجيه Vue
- إظهار مكون Vue ديناميكيًا
- ورقة الغش Vue.js
- قم بتخزين بيانات Vue على التخزين المحلي باستخدام Vuex
- كيفية تطبيق فئة ديناميكيًا باستخدام Vue
- كيفية استخدام Vue
- Vue ، لماذا يجب أن تكون البيانات دالة
- Roadmap to become a Vue.js developer in 2020