في المقالة/المدونة السابقة، تعلمنا كيفية إنشاء المكونات واستيرادها واستخدامها. هذه المرة، سوف نستكشف ربط البيانات في المكونات.

استخدام البيانات داخل المكونات

تعريف البيانات في المكون
يتم تعريف البيانات في الدالة data() ويتم إرجاعها ككائن.
إليك مثال:

data() {
  return {
    message: 'Hello World!'
  };
}

ملزمة بالتوجيهات

v-bind: ربط سمات HTML بالبيانات.

v-model: يتم استخدام توجيه v-model لربط البيانات ثنائي الاتجاه على مدخلات النموذج. إنه يحافظ على مزامنة قيمة الإدخال مع بيانات مثيل Vue. بشكل أساسي، يجمع v-model بين @input (الذي يستمع للتغييرات) و:value (الذي يحدد قيمة الإدخال). على سبيل المثال:

هذا يعادل:

إليك كيفية استخدام :value و @input بشكل منفصل:

يعرض التوجيه v-if العناصر بشكل مشروط بناءً على قيمة منطقية. إذا كان الشرط صحيحا، فسيتم تقديم العنصر؛ إذا كاذبة، فلن يحدث ذلك. على سبيل المثال:

This is visible!

يتم استخدام التوجيه v-for للتكرار عبر مصفوفة أو كائن لعرض العناصر. يمكن إعطاء كل عنصر مفتاحًا فريدًا لتحسين الأداء. على سبيل المثال:

• {{ item.name }}

v-on
يتم استخدام التوجيه v-on للاستماع إلى الأحداث على العناصر. يمكنك استخدام الاختصار @ للراحة. على سبيل المثال:

Click me!

يمكن اختصار هذا إلى:

Click me!