Listening to Events

การฟังเหตุการณ์ใน Vue ใช้ v-on หรือ @

Inline Handlers

การเขียน event handler แบบ inline

<button @click="alert('Hello')">Click</button>

Method Handlers

การเรียกใช้ methods เมื่อเกิดเหตุการณ์

<script setup>
const handleClick = () => {
  // ทำงานเมื่อคลิก
};
</script>

<template>
  <button @click="handleClick">Click</button>
</template>

Event Handling Patterns

รูปแบบต่างๆ ในการจัดการเหตุการณ์

Calling Methods with Arguments

การส่ง arguments ให้ method จาก inline handler

<script setup>
const say = (message) => {
  alert(message);
};
</script>

<template>
  <button @click="say('hello')">Say Hello</button>
</template>

Accessing Event Object

การเข้าถึง event object

<script setup>
const warn = (message, event) => {
  if (event) {
    event.preventDefault();
  }
  alert(message);
};
</script>

<template>
  <button @click="warn('Form cannot be submitted.', $event)">
    Submit
  </button>
</template>

Event Modifiers

ตัวปรับแต่งเหตุการณ์ช่วยจัดการพฤติกรรมมาตรฐานของ DOM events

<form @submit.prevent="onSubmit">...</form>

Common Modifiers

Modifier	ตัวอย่าง	การใช้งาน
.prevent	@submit.prevent	ยกเลิกการทำงานเริ่มต้นของ event
.stop	@click.stop	หยุดการแพร่กระจาย event
.once	@click.once	ทำงานเพียงครั้งเดียว
.self	@click.self	ทำงานเฉพาะเมื่อเกิดบน element นั้นจริงๆ

Key Modifiers

สำหรับ keyboard events สามารถระบุปุ่มเฉพาะได้

<input @keyup.enter="submit" />

Mouse Button Modifiers

ระบุการทำงานสำหรับปุ่มเมาส์เฉพาะ

<button @click.middle="zoomIn">Zoom</button>

<div @click.right="showContextMenu">
  Right-click me
</div>

System Modifiers

ตัวปรับแต่งสำหรับปุ่มพิเศษ

<button @click.ctrl="doSomething">Click</button>

<input @keyup.shift.enter="submit" />