معالجة الأحداث في Vue.js: التركيب والأمثلة

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

فيما يلي بعض الأحداث الشائعة في Vue.js

1. click الحدث

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

<button v-on:click="handleClick">Click me</button>

methods: {  
  handleClick() {  
    console.log('Button clicked!');  
  }  
}

 

2. input الحدث

يتم تشغيل هذا الحدث عندما تتغير قيمة العنصر input. يتم استخدامه بشكل شائع مع v-model التوجيه لربط input القيمة بخاصية بيانات في مكون Vue. هذا يسمح لك بتحديث وتتبع التغييرات على input القيمة بشكل تفاعلي.

<input v-model="message" v-on:input="handleInput" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleInput() {  
    console.log('Input value:', this.message);  
  }  
}

 

3. change الحدث

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

<select v-model="selectedOption" v-on:change="handleSelectChange">  
  <option value="option1">Option 1</option>  
  <option value="option2">Option 2</option>  
</select>

data() {  
  return {  
    selectedOption: ''  
  };  
},  
methods: {  
  handleSelectChange() {  
    console.log('Selected option:', this.selectedOption);  
  }  
}

 

4. submit الحدث

يتم تشغيل هذا الحدث عند إرسال نموذج ، إما عن طريق النقر فوق submit زر أو الضغط على Enter داخل input حقل. يتم استخدامه بشكل شائع للتعامل مع عمليات إرسال النماذج والتحقق من صحة المستخدم input وتنفيذ إجراءات مثل تقديم طلبات واجهة برمجة التطبيقات أو حفظ البيانات.

<form v-on:submit="handleSubmit">  
  <input type="text" v-model="name" />  
  <button type="submit">Submit</button>  
</form>

data() {  
  return {  
    name: ''  
  };  
},  
methods: {  
  handleSubmit(event) {  
    event.preventDefault();  
    console.log('Form submitted! Name:', this.name);  
  }  
}

 

5. keyup الحدث

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

<input v-model="message" v-on:keyup="handleKeyUp" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyUp() {  
    console.log('Key up event triggered!');  
  }  
}

 

6. keydown الحدث

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

<input v-model="message" v-on:keydown="handleKeyDown" />

data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyDown() {  
    console.log('Key down event triggered!');  
  }  
}

 

7. mouseover حدث

يتم تشغيل هذا الحدث عند تحريك مؤشر الماوس فوق عنصر. يتم استخدامه بشكل شائع لإظهار معلومات إضافية أو تقديم ملاحظات مرئية عند التمرير فوق عنصر.

<div v-on:mouseover="handleMouseOver">Hover over me</div>

methods: {  
  handleMouseOver() {  
    console.log('Mouse over event triggered!');  
  }  
}

 

8. mouseout حدث

يتم تشغيل هذا الحدث عند تحريك مؤشر الماوس خارج العنصر. يتم استخدامه بشكل شائع لإخفاء العناصر أو تعديلها عندما لا يحوم الماوس فوقها.

<div v-on:mouseout="handleMouseOut">Move mouse out</div>

methods: {  
  handleMouseOut() {  
    console.log('Mouse out event triggered!');  
  }  
}

 

9. scroll الحدث

يتم تشغيل هذا الحدث عند تمرير عنصر. يتم استخدامه بشكل شائع لتنفيذ ميزات مثل التمرير اللانهائي أو التحميل البطيء للمحتوى أو تحديث عناصر واجهة المستخدم بناءً على الموضع scroll.

<div v-on:scroll="handleScroll">Scroll me</div>

methods: {  
  handleScroll() {  
    console.log('Scroll event triggered!');  
  }  
}

 

10. focus الحدث

يتم تشغيل هذا الحدث عند تلقي عنصر focus ، عادةً عند النقر فوقه أو عندما ينتقل المستخدم إليه باستخدام لوحة المفاتيح. يتم استخدامه بشكل شائع لأداء الإجراءات أو تقديم ملاحظات مرئية عندما input يكتسب عنصر أو عنصر focus.

<input v-on:focus="handleFocus" />

methods: {  
  handleFocus() {  
    console.log('Input focused!');  
  }  
}

 

هذه ليست سوى بعض الأمثلة الأساسية للأحداث في Vue.js. يمكنك تخصيص وظائف معالجة الأحداث لتلائم الاحتياجات المحددة لمشروعك.