في الدرس السابق
تعلمنا ربط البيانات بالـattributes باستخدام ما يعرف بالـVue directives مثل(v-bind || v-html)
الآن سنتعرف على ديناميكية عمل الـevents داخل الـvue-instance ومدى سهولتها عن الـjQuery
قبل البداية:
- الدروس ستكون مكتوبة بالخطوات
- يوجد شرح فيديو بالأسفل مع كل درس
- يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة
فهرس الدروس
يلا نبدأ 
هذا هو الكود الذي سنبدأ به:
// index.html
<div id="my-app">
<p>{{ age }}</p>
</div>
// app.js
new Vue({
el: '#my-app',
data: {
age: 15
}
})
يمكننا التحكم بالرقم age (جمع - طرح) عن طريق إضافة زر للإضافة وزر اخر للطرح
<p>{{ age }}</p>
<button>add 1</button>
<button>subtract 1</button>
عند الضغط على زر add (هذا يسمى Event أو حدث)
Vue directives قدمت لنا حل ممتاز v-on لترقّب الأحداث بشكل عام:
<button v-on:eventName="function or operation">add 1</button>
نطبق الآن:
<button v-on:click="age += 1">add 1</button>
<button v-on:click="age -= 1">subtract 1</button>
الآن الأزرار تعمل ويمكنكم التجربة هنا:
يمكننا تنظيم شكل الكود بوضع المعادلة age += 1 داخل دالة يمكن استدعاؤها
// app.js
methods: {
addOne () {
this.age += 1
},
subtractOne () {
this.age -= 1
}
}
// index.html
<button v-on:click="addOne">add 1</button>
<button v-on:click="subtractOne">subtract 1</button>
وستعمل الدوال بشكل طبيعي 
لنكتشف الآن شئ ممتع مع الرسم بـ Vue
نضيف div جديد ونعطيه id="canvas" ونضيف الـstyles:
// index.html
<div id="canvas"></div>
// styles.css
#canvas {
width: 600px;
padding: 200px 20px;
text-align: center;
border: 1px solid #333;
border-radius: 10px;
margin-top: 10px;
}
الشكل:
نريد عرض قيمة احداثيات الماوس عند عمل hover على هذا الشكل:
// index.html
<div id="canvas">
{{ x }} : {{ y }}
</div>
نقوم بتعريف قيم x و y:
// app.js
data: {
age: 15,
x: 0,
y: 0
}
بالنسبة للـevent الذي سنستخدمه عن حركة الماوس داخل canvas هو mousemove
يمكنكم تفقد قائمة events في الجافاسكريبت هنا:
https://www.w3schools.com/jsref/dom_obj_event.asp
<div id="canvas" v-on:mousemove="What to do?">
{{ x }} : {{ y }}
</div>
الآن what to do؟
نريد عمل تحديث لإحداثيات الماوس والتي قيمتها تساوي صفر حتى الآن
سأخلق function جديدة اسمها updateXY
<div id="canvas" v-on:mouseMove="updateXY">
{{ x }} : {{ y }}
</div>
يوجد object في جافاسكريبت اسمه event يمكننا تمريره كـargument لنقوم بعرضه في الconsole لنرى ما بداخله
// app.js
updateXY (event) {
console.log(event)
}
النتيجة في الconsole:
ما نبحث عنه في الـ object هو قيم كل من offsetX و offsetY
الآن نحدث قيم x و y
updateXY (event) {
this.x = event.offsetX
this.y = event.offsetY
}
جرب تحرك الماوس داخل الشكل وادعيلي
https://repl.it/@Nasr_GalalGalal/workshop5
لنجرب استعمال event modifiers
كلنا نعلم أن modifier كهذا event.preventDefault() نستخدمه في الجافا سكريبت لإيقاف الوضع الافتراضي لعنصر معين
يسهل علينا vue الأمر في المثال التالي:
<p><a v-on:click.prevent="testFunction" href="http://www.coretabs.net">Coretabs</a></p>
بمجرد إضافة .prevent يتوقف الوضع الافتراضي للرابط، بمعنى أنه لن يذهب الى موقع كورتابز
مع تطبيق محتوى test function أيا كان
يمكنك تفقد الـdocumentation لمزيد من المعلومات حول الevent modifiers