การจัดการเหตุการณ์ใน 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 และดำเนินการต่างๆ เช่น การร้องขอ API หรือการบันทึกข้อมูล

<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 เหตุการณ์

เหตุการณ์นี้เกิดขึ้นเมื่อองค์ประกอบถูกเลื่อน โดยทั่วไปจะใช้เพื่อใช้งานคุณลักษณะต่างๆ เช่น การเลื่อนไม่สิ้นสุด การโหลดเนื้อหาแบบสันหลังยาว หรือการอัปเดตองค์ประกอบ UI ตาม 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 คุณสามารถปรับแต่งฟังก์ชันการจัดการเหตุการณ์ให้เหมาะกับความต้องการเฉพาะของโครงการของคุณได้