Event Listeners 事件監聽器
在 Vue 中，我們可以使用 v-on 指令監聽 DOM 事件：
<template>
<button v-on:click="increment">{{ count }}</button>
</template>
|
由於 v-on 的使用頻率很高，Vue 提供了一個簡寫語法：
<template>
<button @click="increment">{{ count }}</button>
</template>
|
在這裡，increment 是在 <script setup> 中定義的一個函式：
<script setup>
import { ref } from 'vue'
// 定義響應式狀態
const count = ref(0)
// 定義函式來更新狀態
function increment() {
// 更新組件的狀態
count.value++
}
</script>
|
在函式內，我們可以透過修改 ref 的值來更新組件的狀態。
事件處理器也可以使用內聯表達式，並透過修飾符簡化常見任務。這些細節在指南 - 事件處理中有詳細說明。
現在，我們可以試著自己實作 increment 函式，並使用 v-on 將它綁定到按鈕。
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>
|
Comments