في الدرس السابق
تعرفنا على ديناميكية عمل keyboard modifiers (اختصارات لوحة المفاتيح) ومدى سهولتها…
قبل البداية:
- الدروس ستكون مكتوبة بالخطوات
- يوجد شرح فيديو بالأسفل مع كل درس
- يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة
فهرس الدروس
يلا نبدأ 
سنطبق اليوم خاصية خارقة وهي ازدواجية ربط البيانات two-way data binding وهي حقا توفر الكثير من المجهود!
في صفحة index.html لدينا text-input لإدخال الإسم مثلا ونريد حفظ الاسم وعرضه في الصفحة بهذا الشكل:
<div id="my-app">
<input type="text">
<p>
{{ name }}
</p>
</div>
طبعا سنحتاج تعريف متغير name داخل data في ملف app.js
data: {
name: ''
},
لو أردنا عرض البيانات التي سنكتبها داخل الـinput بالطريقة العادية، سنعطي id للـ input ثم نكتب دالة تقوم بأخذ الـid ذاته وتنسب قيمة الـinput إلى name 
طريقة طويلة وتجيب صداع حتى بمجرد تخيلها!
الأستاذ vue 
يقدم لنا directive بسيط هو v-model
هنربط الـinput بالمتغير اللي اسمه name واللي بيتم تعريفه في قسم الـdata داخل vue instance
3 خطوات في 3 ثواني بالضبط ويظهر الشكل النهائي:
يمكن استخدام تقنية v-model مع كل من: input [text/password/radio/checkbox] - textarea - select
استعدوا للدرس القادم! سنقوم بعمل login-form أو صفحة تسجيل دخول للتطبيق على ما سبق 