أحداث Vue.js

يسمح لنا Vue.js باعتراض أي حدث DOM باستخدام التوجيه v-on على عنصر. هذا الموضوع هو المفتاح لجعل عنصر تفاعلي


ما هي أحداث Vue.js

يسمح لنا Vue.js باعتراض أي حدث DOM باستخدامv-onتوجيه على عنصر.

إذا أردنا القيام بشيء ما عند حدوث نقرة في هذا العنصر:

<template>
  <a>Click me!</a>
</template>

نضيف أv-onالتوجيه:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

تقدم Vue أيضًا بنية بديلة ملائمة جدًا لهذا:

<template>
  <a @click="handleClick">Click me!</a>
</template>

يمكنك اختيار استخدام الأقواس أم لا.@click="handleClick"يعادل@click="handleClick()".

handleClickهي طريقة مرتبطة بالمكون:

<script>
export default {
  methods: {
    handleClick: function(event) {
      console.log(event)
    }
  }
}
</script>

يتم شرح الطرق بمزيد من التفصيل في بلديبرنامج Vue Methods التعليمي.

ما تحتاج إلى معرفته هنا هو أنه يمكنك تمرير المعلمات من الأحداث:@click="handleClick(param)"وسيتم استقبالهم داخل الطريقة.

الوصول إلى كائن الحدث الأصلي

في كثير من الحالات ، سترغب في تنفيذ إجراء على كائن الحدث أو البحث عن بعض الخصائص فيه. كيف يمكنك الوصول إليه؟

استخدم الخاص$eventالتوجيه:

<template>
  <a @click="handleClick($event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script>

وإذا قمت بالفعل بتمرير متغير:

<template>
  <a @click="handleClick('something', $event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(text, event) { console.log(text) console.log(event) } } } </script>

من هناك يمكنك الاتصالevent.preventDefault()، ولكن هناك طريقة أفضل: معدِّلات الأحداث

معدِّلات الأحداث

بدلاً من العبث بـ "أشياء" DOM في أساليبك ، أخبر Vue بالتعامل مع الأشياء نيابةً عنك:

  • @click.preventمكالمةevent.preventDefault()
  • @click.stopمكالمةevent.stopPropagation()
  • @click.passiveيستفيد منالخيار السلبي لـ addEventListener
  • @click.captureيستخدم التقاط الحدث بدلاً من فقاعات الحدث
  • @click.selfتأكد من عدم ظهور فقاعات فقاعية لحدث النقر من حدث فرعي ، ولكنه حدث مباشرةً على هذا العنصر
  • @click.onceسيتم تشغيل الحدث مرة واحدة بالضبط

يمكن دمج كل هذه الخيارات من خلال إلحاقها بالمعدِّل تلو الآخر.

لمزيد من المعلومات حول التكاثر ، فقاعات / التقاط انظر بلديدليل أحداث JavaScript.

تحميل مجانيكتيب Vue


المزيد من دروس vue: