أحداث 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.js

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

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

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

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

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