Skip to main content

แนะนำ Event

Document ต้นฉบับ: https://vuejs.org/guide/essentials/event-handling.html

วิธีการเทียบ Event ใน Javascript ปกติกับ Vue Event

  • onclick="functionName()" ใน javascript
  • มีค่าเทียบเท่ากับ v-on:click="functionName()"
  • หรือเทียบเท่ากับ @click="functionName()"

ซึงวิธีการ binding event มีทั้งหมด 2 ประเภทคือ

  1. Inline handler = การใส่ inline javascript เพื่อเพิ่ม function ให้ trigger event
  2. Method handler = เป็นการระบุ property หรือ path ที่ชี้สู่ method ใน Component ของ Event

ตัวอย่าง binding Event

1. Inline handler

<script setup>
const count = ref(0)
</script>

<template>
<div>
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
</div>
</template>

2. Method handler

<script setup>
const name = ref('Vue.js')

const greet = (event) => {
alert(`Hello ${name.value}!`)
// `event` is the native DOM event
if (event) {
alert(event.target.tagName)
}
}
</script>

<template>
<button @click="greet">Greet</button>
</template>

มาลองดู Event อื่นๆกัน

เราจะลองทำจากการ change ผ่าน input บ้าง

  • ใช้ event oninput สำหรับดักจับ input change
  • ใน vue event ก็จะเปลี่ยนเป็น @input และเราก็จะทำการผูก name เข้ากับ input
<script setup>
import { ref } from 'vue'
const name = ref('')

const onInput = (event) => {
name.value = event.target.value
}
</script>
<template>
<div>
<input type="text" :value="name" @input="onInput">
<p>Hello, {{ name }}!</p>
</div>
</template>