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

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

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

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

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

اجعل فيديو اليوم قم بالتمرير للمتابعة مع المحتوى

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

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

 <html> 
<head> 
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 
</head> 
<body> 
  <div id="app"> 
    <button v-on:click="counter++">Click me</button> 
    <p>{{ counter}}</p> 
  </div> 
  <script> 
  const app = Vue.createApp({ 
    data() { 
      return { 
        text: 'Vue is awesome!', 
        counter: 0 
      } 
    } 
  }) 
 
  app.mount('#app') 
  </script> 
</body> 
</html>

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

أفضل صانع أفلام مجاني لنظام التشغيل mac

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

 <button @click="counter++">Click me</button>

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

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

 <button @keydown.enter="counter++">Click me</button>

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

ربط الأحداث بالطرق الموجودة في Vue

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

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

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

 <html> 
<head> 
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 
</head> 
<body> 
  <div id="app"> 
    <button @click="increment">Add 1</button> 
     
 
    <button @click="reduce">reduce 1</button> 
    <p>{{ counter }}</p> 
  </div> 
  <script> 
    const app = Vue.createApp({ 
      data() { 
        return { 
          text: 'Vue is awesome!', 
          counter: 0 
        } 
      }, 
      methods: { 
        increment(){ 
          this.counter = this.counter + 1 
        }, 
        reduce() { 
          this.counter = this.counter - 1 
        } 
      } 
    }) 
    app.mount('#app') 
  </script> 
</body> 
</html>

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

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

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

تثبيت جوجل بلاي على أقراص فاير

مثل ذلك:

 <body> 
  <div id="app"> 
    <button @click="increment(5)">Add 5</button> 
     
 
    <button @click="reduce(3)">reduce 3</button> 
    <p>{{ counter }}</p> 
  </div> 
 
  <script> 
    const app = Vue.createApp({ 
      data() { 
        return { 
          text: 'Vue is awesome!', 
          counter: 0 
        } 
      }, 
      methods: { 
        increment(num){ 
          this.counter = this.counter + num 
        }, 
        reduce(num) { 
          this.counter = this.counter - num 
        } 
      } 
    }) 
 
    app.mount('#app') 
  </script> 
</body>

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

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

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

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

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

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

 <form @submit.prevent="handleSubmit"> 
  <input type="text" v-model="text"> 
  <button type="submit">Submit</button> 
</form>

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

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

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

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

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

كيفية عمل شاشة كاملة لسطح المكتب البعيد

 <body> 
    <div id="app"> 
        <div @click="outerClick" class="outer"> 
            <div @click.stop="innerClick" class="inner"> 
              <button @click="buttonClick" class="button">Click me</button> 
            </div> 
        </div> 
    </div> 
    <script> 
    const app = Vue.createApp({ 
        methods: { 
            outerClick() { 
                console.log('Outer click') 
            }, 
            innerClick() { 
                console.log('Inner click') 
            }, 
            buttonClick() { 
                console.log('Button click') 
            } 
        } 
    }); 
 
    app.mount("#app"); 
    </script> 
 </body>

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

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

 <head> 
    <style> 
    .outer { 
      padding: 20px; 
      background-color: black; 
    } 
    .inner { 
      padding: 20px; 
      background-color: gray; 
    } 
    button { 
      padding: 10px; 
      background-color: white; 
      border: 2px solid black; 
      font-size: 16px; 
      font-weight: bold; 
      cursor: pointer; 
    } 
    </style> 
</head>

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

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

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

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

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

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

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