تعلم vue js ببساطة - الدرس الخامس - الأحداث v-on

تستطيع استخدام 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 لمعرف التفاصيل يمكنكم متابعة الدرس على الرابط :


فهرس دروس ورشة تعلم vue js ببساطة

5 Likes

رائع اكمل :heart_eyes:

2 Likes

الله يا صهيب!
اعمل فهرس

2 Likes

اهلا صديقي نصر
نعم سأقوم بعمل فهرس الأن
شكرأ

1 Like

app_5 https://codepen.io/Abdallah-Mohame/pen/BajpwOM?editors=1100

حولت احط class :upside_down_face: مضفش

  <button v-on:click="counter += 1" v-bind:class="{'style_one': true, 'style_tow': false}">اضافة 1</button>
1 Like

فقط اضف نقطة قبل style_one في ملف الcss
:slight_smile:

1 Like

:joy: بجد انا مش هنا

1 Like

:sweat_smile::sweat_smile: بتحصل كثيراً

1 Like