تستطيع استخدام v-on للاستماع للأحداث القادمة من الـ DOM لتنفيذ بعض الأوامر على سبيل المثال لنأخذ الحدث الخاص بالضغط على button :
<div id="example">
<button v-on:click="counter += 1">اضافة 1</button>
<p>تم الضغط على الزر أعلاه {{counter}} مرة.</p>
</div>
وهنا نضيف المتغير
var app = new Vue({
el: '#example',
data: {
counter: 0
}
})
هنالك الكثير من الاحداث التي يمكن ان نستمع اليها مثل:
- dblclick
- change
- submit
- select
… وغيرها
يمكن ان نكتب v-on بطريقة مختصرة على الشكل التالي : @click
فقط نضع @ قبل الحدث
ايضا يمكن ان نستدعي function لتنفيذه في حال وقع الحدث وذلك من خلال تعريف method داخل الـ methods ضمن تطبيق الـ vue لمعرف التفاصيل يمكنكم متابعة الدرس على الرابط :