تعد Vue.js مكتبة قوية جدًا وسهلة التعلم ويمكن الوصول إليها ويمكننا ، بمعرفة HTML و CSS و Javascript ، البدء في إنشاء تطبيقات الويب فيها. تم إنشاء Vue.js من خلال الجمع بين أفضل الميزات من أطر العمل الزاويّة والتفاعلية الموجودة بالفعل. إنه إطار عمل جافا سكريبت تقدمي وتفاعلي يستخدم لبناء واجهات مستخدم (UIs) و SPA (تطبيقات من صفحة واحدة) ، ولهذا السبب يحب المطورون البرمجة ويشعرون بالحرية والراحة أثناء تطوير التطبيقات في Vue.js. ألقِ نظرة على Event Listening and Handling في Vue.js. ، سنعلم أنه يوفر توجيهًا v-on للاستماع إلى الأحداث والتعامل معها. يمكننا استخدام التوجيه v-on للاستماع إلى DOM وتنفيذ المهام المطلوبة. كما يوفر العديد من معالجات الأحداث. ومع ذلك ، في هذه المقالة ، سنتعلم فقط ونواصل تركيزنا على أحداث النقر. لذلك دعونا نبدأ!
تمامًا مثل حدث onClick لجافا سكريبت ، يوفر Vue.js v-on: click للاستماع إلى الأحداث.
سيكون بناء الجملة لحدث v-on: click كما يلي:
< زر v-on: انقر فوق='اسم وظيفة'>انقر</ زر >
يوفر Vue.js اختصارًا @ بدلاً من استخدام v-on أيضًا.
< زر @انقر='اسم وظيفة'> انقر</ زر >
لا يتوقف Vue.js عند الاستماع فقط إلى حدث النقر واستدعاء الوظيفة. سيسمح لنا أيضًا بكتابة أي عملية حسابية مباشرة أو أي شيء متعلق بجافا سكريبت داخل علامات الاقتباس. تماما مثل هذا:
< زر @انقر='عدد + = 1'> إضافة</ زر >
يوفر لنا Vue.js استدعاء الطريقة أو الوظيفة في عبارة Javascript مضمنة ، كما هو موضح أدناه:
< زر @انقر='message (' مرحبًا ')'> عرض</ زر >باستخدام معالجات الأحداث في Vue.js ، يمكننا الوصول إلى حدث DOM أيضًا ، باستخدام العبارة المضمنة ، عن طريق تمرير متغير الحدث $ المقدم من Vue.js بشكل خاص إلى وسيطة الطريقة ، تمامًا مثل المثال أدناه:
< زر @انقر='message (' Hi '، $ event)'> إرسال</ زر >
يوفر لنا Vue.js أيضًا استدعاء وظائف أو طرق متعددة. يمكننا استدعاء أكثر من دالة وفصلها بفاصلات ، مثل هذا المثال:
< زر @انقر='الأول (' مرحبًا ') ، والثاني (' مرحبًا ، حدث $) '> إرسال</ زر >يوفر Vue.js مُعدِّلات الأحداث أيضًا.
معدِّلات الأحداث
نحتاج غالبًا إلى استدعاء المُعدِّلات جنبًا إلى جنب مع الأحداث. لذلك ، يوفر Vue.js بعض المُعدِّلات التالية:
.قف
سيوقف انتقال حدث النقر.
< إلى @ click.stop='افعل هذا'></ إلى >.يحول دون
سيمنع إعادة تحميل الصفحة أو إعادة توجيهها.
< شكل @ submit.prevent='عند تقديم'></ شكل >.بمجرد
سيؤدي إلى تشغيل حدث النقر مرة واحدة فقط.
< إلى @ click.once='افعل هذا'></ إلى >.إلتقاط
يستخدم في الغالب لإضافة مستمع الحدث.
< شعبة @ click.capture='افعل هذا'> ...</ شعبة >يمكننا أيضًا ربط المُعدِلات. ومع ذلك ، ضع في اعتبارك أن ترتيب المُعدِّلات مهم وسيؤثر على النتائج.
< إلى @ click.stop.prevent='إفعل ذلك'></ إلى >استنتاج
في هذه المقالة ، قمنا بتغطية مفاهيم معالجة حدث Click بالكامل من مستوى noob إلى مستوى النينجا. لقد تعلمنا عن التركيبات المختلفة لكتابة أحداث النقر والطرق المختلفة لاستخدام v-on:click التوجيه المقدم من Vue.js لسهولة المطورين ومعدلات الأحداث المختلفة. لمزيد من المحتوى المفيد مثل هذا ، المرتبط بـ Vue.js ، استمر في زيارة linuxhint.com.