Event Handling ใน Vue

Event Handling คือการจัดการเหตุการณ์ (event) จากผู้ใช้ เช่น click, input, change, submit ฯลฯ เพื่อให้ Vue สามารถโต้ตอบกับผู้ใช้ได้

ตัวอย่าง Event Handling (สมัยใหม่)

<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">เพิ่มค่า ({{ count }})</button>
  <input
    @input="e => count.value = +(e.target as HTMLInputElement).value"
    type="number"
  />
</template>

จุดเด่น

• ตอบสนองต่อการกระทำของผู้ใช้ได้ทันที
• ใช้ร่วมกับ data binding และ attribute binding ได้
• รองรับ TypeScript เต็มรูปแบบ

ข้อควรระวัง

• ฟังก์ชัน event handler ควรแยก logic ออกจาก template เพื่อความอ่านง่าย
• ระวังการ mutate state โดยตรงจาก event (ควร validate ก่อน)

---

เปรียบเทียบกับ Data Binding และ Attribute Binding

• Event Handling: จัดการเหตุการณ์ เช่น click, input, change
• Data Binding: ผูกค่ากับ value ของ input หรือแสดงผลใน template
• Attribute Binding: ผูกค่ากับ attribute ของ element (class, style, src ฯลฯ)

สรุป: Event Handling ทำให้ Vue โต้ตอบกับผู้ใช้และควบคุม flow ของแอปพลิเคชันได้อย่างยืดหยุ่น