كيفية التعامل مع الأحداث في Vue

يعد الاستماع إلى أحداث المستخدم جزءًا لا يتجزأ من أي تطبيق ويب سريع الاستجابة ، وتطبيقات Vue ليست استثناءً. يأتي Vue بطريقة بسيطة وفعالة للتعامل مع الأحداث من خلال توجيه v-on الخاص به.

ما هو ملزمة الحدث في Vue؟

ربط الحدث هو إحدى ميزات Vue.js التي تسمح لك بإرفاق مستمع الحدث بملف نموذج كائن المستند (DOM) عنصر. عند وقوع حدث ما ، يقوم مستمع الحدث بتشغيل إجراء أو استجابة في تطبيق Vue.

يمكنك تحقيق ربط الحدث في Vue باستخدام ملف v-on التوجيه. يسمح هذا التوجيه لتطبيقك بالاستماع إلى أحداث المستخدم مثل النقر أو الدخول أو أحداث المفاتيح.

لإرفاق مستمع الحدث إلى عنصر باستخدام v-on، أضف اسم الحدث كمعامل إلى التوجيه:

<لغة البرمجة>
<رأس>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<شعبةبطاقة تعريف="برنامج">
<زرv-on: انقر فوق="عداد ++">انقر فوق ليزر>
<ص>{{ عداد}}ص>
شعبة>
<النصي>
مقدار ثابت التطبيق = Vue.createApp ({
 بيانات() {
يعود {
 نص: "Vue رائع!",
 العداد: 0
 }
 }
 })
 app.mount ('#برنامج')
النصي>
جسم>
لغة البرمجة>

يُظهر مقطع التعليمات البرمجية أعلاه مثالاً لتطبيق Vue الذي يستمع إلى ملف

انقر حدث. تستخدم كتلة التعليمات البرمجية ملف زر لزيادة عداد القيمة في خاصية البيانات لمثيل Vue بواحد.

تربط كتلة التعليمات البرمجية أعلاه تعبير JavaScript عداد ++ على الزر انقر حدث مع v-on التوجيه. يستخدم Vue ملف @ الحرف كاختصار بدلاً من v-on التوجيه بسبب v-onالاستخدام المتكرر لـ:

<زر @انقر="عداد ++">انقر فوق ليزر>

لا يقتصر ربط الحدث في Vue على النقر فوق الأحداث. يتعامل Vue مع الأحداث الأخرى ، مثل أحداث الضغط على المفاتيح وأحداث تمرير الماوس والمزيد.

لربط أي من هذه الأحداث بـ v-on التوجيه ، استبدل انقر حدث باسم الحدث المطلوب:

<زر @keydown.enter="عداد ++">انقر فوق ليزر>

يقوم الكود أعلاه بإعداد مستمع الحدث على زر الذي يستمع إلى زر أسفل حدث. عند الضغط على أي مفتاح أثناء التركيز البؤري على الزر ، يقوم Vue بتقييم عداد ++ تعبير.

في معظم تطبيقات Vue ، يمكنك التعامل مع منطق أكثر تعقيدًا استنادًا إلى أحداث معينة تحدث. تعمل الأحداث والأساليب جنبًا إلى جنب لتنفيذ إجراءات التطبيق بناءً على حدث ما.

خاصية الطرق في كائن خيارات Vue يحتوي على وظائف مهمة يحتاجها تطبيق Vue لتحسين التفاعل. باستخدام خاصية التوابع في Vue ، يمكنك التعامل مع المنطق المعقد بناءً على الأحداث.

في ما يلي مثال على تطبيق Vue يعرض الأحداث التي تمت معالجتها بواسطة خاصية التوابع:

<لغة البرمجة>
<رأس>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<شعبةبطاقة تعريف="برنامج">
<زر @انقر="زيادة راتب">أضف 1زر>
<زر @انقر="يقلل">تقليل 1زر>
<ص>{{ عداد }}ص>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات() {
 يعود {
 النص: "Vue رائع!"،
 العداد: 0
 }
 },
 طُرق: {
 زيادة راتب(){
 this.counter = this.counter + 1
 },
 يقلل() {
 this.counter = this.counter - 1
 }
 }
 })
 app.mount ("# تطبيق")
النصي>
جسم>
لغة البرمجة>

يوضح تطبيق Vue أعلاه كيفية ربط الأحداث بالطرق. يحتوي التطبيق على زرين يمكن للمستخدمين النقر عليهما لزيادة قيمة العداد أو تقليلها في خاصية البيانات.

يحقق التطبيق ذلك باستخدام ملف @انقر التوجيه. ال @انقر يشير التوجيه إلى الوظائف الموجودة في خاصية التوابع للتعامل مع قيمة العداد.

عند ربط وسيطة بحدث النقر ، يمكنك تخصيص أساليب الزيادة والتقليل لإضافة قيمة العداد أو تقليلها بناءً على الوسيطة التي تمررها إلى الطريقة.

مثل ذلك:

<جسم>
<شعبةبطاقة تعريف="برنامج">
<زر @انقر="زيادة (5)">أضف 5زر>
<زر @انقر="تقليل (3)">تقليل 3زر>
<ص>{{ عداد }}ص>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات() {
 يعود {
 النص: "Vue رائع!"،
 العداد: 0
 }
 },
 طُرق: {
 زيادة (عدد) {
 this.counter = this.counter + num
 },
 تقليل (عدد) {
 this.counter = this.counter - num
 }
 }
 })
 app.mount ("# تطبيق")
النصي>
جسم>

يمتد مقطع التعليمات البرمجية هذا على تطبيق Vue السابق للسماح بتمرير الوسائط إلى الطرق المرتبطة بمستمع حدث النقر على الزر.

تأخذ عمليات الزيادة والحد في مثيل Vue عدد وسيطة لزيادة أو تقليل خاصية العداد.

يوضح هذا المثال كيف يمكنك التعامل مع الوسيطات عند ربط الطرق بالأحداث في Vue. يمكن أن تساعد طرق ربط الأحداث في جعل تطبيقات Vue أكثر تفاعلية.

استكشاف معدّلات المنع والإيقاف في Vue

تتيح لك معدّلات الأحداث في Vue إنشاء مستمعين للأحداث أفضل يلبي الاحتياجات المحددة لتطبيقك. للاستفادة من معدِّلات الأحداث هذه ، يمكنك ربط المعدِّلات بالأحداث في Vue.

على سبيل المثال:

<استمارة @يقدم. منع="معالجة إرسال">
<مدخليكتب="نص"نموذج v="نص">
<زريكتب="يُقدِّم">يُقدِّمزر>
استمارة>

كتلة التعليمات البرمجية أعلاه سلاسل يمنع المعدِّل لإرسال الحدث. ال يمنع المعدل شائع الاستخدام عند العمل مع النماذج في Vue.

ال يمنع الغرض من التعديل هو منع السلوك الافتراضي لإرسال النموذج ، وهو إعادة تحميل الصفحة. استخدام يمنع، يمكن لـ Vue متابعة عملياتها أثناء تشغيل مقبض الطريقة التي تهتم بتقديم النموذج.

مثال آخر على معدل مفيد للغاية هو قف معدل الحدث. ال قف يعمل معدِّل الأحداث على إيقاف الحدث من الانتشار بشكل أكبر في شجرة DOM.

عادة ، يتدفق حدث عنصر HTML التابع عبر شجرة DOM ، مما يؤدي إلى تنشيط أي مستمعين للحدث مرتبط بالعناصر الرئيسية. يمكنك منع هذا انتشار الحدث مع ال قف المعدل ومنع الحدث من إثارة المزيد من مستمعي الحدث.

لفهم كيف قف يوقف المُعدِّل نشر الأحداث في شجرة DOM بشكل أكبر ، ضع في اعتبارك كتلة التعليمات البرمجية أدناه:

<جسم>
<شعبةبطاقة تعريف="برنامج">
<شعبة @انقر="OuterClick"فصل="خارجي">
<شعبة @click.stop="innerClick"فصل="داخلي">
<زر @انقر="buttonClick"فصل="زر">انقر فوق ليزر>
شعبة>
شعبة>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 طُرق: {
 OuterClick () {
 console.log ("النقر الخارجي")
 },
 innerClick () {
 console.log ("النقر الداخلي")
 },
 buttonClick () {
 console.log ("النقر على زر")
 }
 }
 });
 app.mount ("# تطبيق")؛
النصي>
جسم>

تحتوي كتلة الشفرة أعلاه على ثلاثة مستمعين للأحداث مرتبطون بثلاثة عناصر مختلفة. ال زر العنصر داخل div مع داخلي class ، بينما div مع داخلي الطبقة داخل div مع خارجي فصل.

يستمع كل عنصر من العناصر الثلاثة إلى ملف انقر حدث وسجلات وحدة التحكم ، تم النقر فوق اسم عنصر HTML. يوجد أدناه نمط CSS لفئة إضافية لتسهيل فهم كتلة التعليمات البرمجية أعلاه:

<رأس>
<أسلوب>
 .outer {
 الحشو: 20 بكسل ؛
 لون الخلفية: أسود ؛
 }
 .داخلي {
 الحشو: 20 بكسل ؛
 لون الخلفية: رمادي ؛
 }
 زر {
 الحشو: 10 بكسل ؛
 لون الخلفية: أبيض؛
 الحدود: 2 بكسل أسود صلب ؛
 حجم الخط: 16 بكسل ؛
 وزن الخط: عريض ؛
 المؤشر: المؤشر.
 }
أسلوب>
رأس>

عند تشغيل البرنامج ، سيبدو تطبيق Vue الذي تم إنشاؤه كما يلي:

لاحظ أنه عند النقر فوق الزر ، يقوم البرنامج باستدعاء ملف زر انقر طريقة ويسجل رسالة إلى وحدة التحكم. يستدعي البرنامج أيضًا ملف الداخلية طريقة.

ومع ذلك ، فإن البرنامج لا يستدعي OuterClick طريقة لأن كتلة التعليمات البرمجية أضافت ملف قف المعدل إلى الداخلية مستمع الحدث. هذا يمنع الحدث من التكاثر بشكل أكبر في شجرة DOM.

بدون ال قف المعدل ، سيقوم البرنامج باستدعاء زر انقر عند النقر فوق الزر ، وسيستمر الحدث في التكاثر لأعلى الشجرة ، ليصل إلى الداخلية طريقة ثم OuterClick طريقة.

التعامل مع الأحداث في تطبيقات الويب

لقد تعلمت كيفية استخدام ربط الأحداث في Vue لإرفاق مستمعي الأحداث بالعناصر وكيفية استدعاء الطرق عند وقوع الأحداث. لقد فهمت أيضًا كيفية استخدام معدِّلات الأحداث لتخصيص سلوك الحدث.

تعتمد تطبيقات الويب على بعض أشكال أحداث المستخدم لتنفيذ الوظائف. يأتي JavaScript يحمل في ثناياه عوامل العديد من الأساليب لالتقاط مجموعة متنوعة من هذه الأحداث والتعامل معها. تساعد هذه الأحداث في بناء تطبيقات تفاعلية.