在前幾篇文章中，我們學習了指令與過濾器。本篇將介紹 事件處理，重點包括 v-on、事件修飾符以及鍵盤事件。

---

目錄

1. 事件綁定 v-on
2. 事件修飾符
3. 鍵盤事件
4. 小結

---

事件綁定 v-on

Vue 使用 v-on（縮寫 @）來監聽事件。

<div id="app"><button v-on:click="sayHello">點我</button><button @click="count++">計數：{{ count }}</button>
</div><script>
new Vue({el: '#app',data: {count: 0},methods: {sayHello: function () {alert('Hello Vue!')}}
})
</script>

---

事件修飾符

Vue 提供了許多修飾符，簡化事件處理邏輯。

<div id="app"><!-- 阻止冒泡 --><button @click.stop="doThis">點我不會冒泡</button><!-- 阻止默認行為 --><form @submit.prevent="onSubmit"><button type="submit">提交</button></form><!-- 只觸發一次 --><button @click.once="sayHello">只觸發一次</button>
</div><script>
new Vue({el: '#app',methods: {doThis() {console.log('點擊了按鈕')},onSubmit() {console.log('表單提交')},sayHello() {console.log('你好')}}
})
</script>

常見修飾符：

• .stop：阻止冒泡
• .prevent：阻止默認事件
• .once：只觸發一次
• .capture：使用捕獲模式

---

鍵盤事件

可以在事件綁定中監聽特定按鍵。

<div id="app"><input @keyup.enter="submit" placeholder="按回車提交"><input @keyup.esc="clear" placeholder="按 ESC 清空">
</div><script>
new Vue({el: '#app',methods: {submit() {alert('提交成功！')},clear(event) {event.target.value = ''}}
})
</script>

支持的按鍵修飾符有：.enter、.esc、.tab、.delete、.space、.up、.down、.left、.right 等。

---

小結

1. v-on 用于事件監聽，縮寫為 @。
2. 事件修飾符簡化事件處理：.stop、.prevent、.once 等。
3. 鍵盤事件可用 .enter、.esc 等修飾符來監聽特定按鍵。

---

📚下一篇文章，我們將學習 過渡與動畫，讓 Vue 頁面更生動。