في الدرس السابق
بدأنا بكتابة الداتا داخل الـVue methods وتعلمنا استدعاءها في صفحة index.html
والآن سنتعرف أكثر على ربط البيانات بالـattributes لدى صفحة HTML
عن طريق ما يعرف بالـdata binding داخل نموذج الـVue
قبل البداية:
- الدروس ستكون مكتوبة بالخطوات
- يوجد شرح فيديو بالأسفل مع كل درس
- يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة
فهرس الدروس
يلا نبدأ 
لو حبينا نعمل link مثلا:
// index.html
<div id="my-app">
<a href=""></a>
</div>
ونود ربط href بقيمة متغيرة، كيف سيتم ذلك؟؟؟
دعونا نضيف القليل من البيانات في app.js
// app.js
data: {
name: 'coretabs',
age: 15,
address: 'https://www.coretabs.net',
htmlContent: '<a href="https://www.coretabs.net">Coretabs Site</a>',
imageSrc: 'http://via.placeholder.com/300'
},
الآن نريد ربط قيمة href بالـ address
يوفر لنا Vue إضافة v-bind: والذي يكتب قبل الattribute:
// index.html
<a v-bind:href="x"></a>
ولها طريقة مختصرة، فقط نستخدم علامة : بالشكل التالي:
<a :href="x"></a>
الشكل النهائي:
// index.html
<div id="my-app">
<a v-bind:href="address">option 1</a>
<a :href="address">option 2</a>
</div>
النتيجة:
يمكنك عمل نفس الطريقة لربط مصادر الصور بشكل ديناميكي:
<img :src="imageSrc" alt="image">
الشكل الأخير:
// index.html
<div id="my-app">
<!-- links -->
<div>
<!-- link 1 -->
<a v-bind:href="address">option 1</a>
<!-- link 2 -->
<a :href="address">option 2</a>
</div>
<!-- image -->
<img :src="imageSrc" alt="image">
</div>
النتيجة:
رائع! هناك شيء أجمل أيضا وهو طباعة كود html في الصفحة،
سابقا ، قمنا بتعريفparameter اسمه htmlContent و به محتوى html
data: {
// ….,
htmlContent: '<a href="https://www.coretabs.net">Coretabs Site</a>',
// ...
},
نستخدم v-html لهذا الغرض:
<p v-html="htmlContent"></p>
الـvue ذكي لدرجة أنه لا يحتاج الى توجيهات أخرى، هو سيقوم بالمهمة، والنتيجة تظهر لنا:
يمكنكم التفاعل مع الكود هنا:
يلا مع الفيديو 
نلتقي ان شاء الله في الدرس#5