قوالب Vue.js والاستيفاءات

يستخدم 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.js والاستيفاءات

يستخدم Vue.js لغة نماذج تمثل مجموعة شاملة من HTML. أي HTML هو قالب Vue.js صالح ، بالإضافة إلى ذلك ، يوفر Vue.js شيئين قويين: الاستيفاء والتوجيهات.

المزيد من دروس vue: