學習要點：
1.事件處理
2.事件修飾符
本節課我們來開始學習 Vue3.x 的事件處理方法以及事件的修飾符能力。
一．事件處理
1. 先復習一下前面用過的事件能力，直接使用和使用方法，如下：
<button v-on:click="counter++">counter+button>
<button v-on:click="addCounter">counter+button>
methods : {
addCounter() {
this.counter++
}
},
2. 我們可以通過點擊執行方法，并且處理事件對象，具體如下：
methods : {
// event 對象，名稱自定義，e 也行
addCounter(event) {
console.log(event.target.innerText)
}
},
PS：如果不傳遞參數，默認接受的事件對象名是 event；
PS：如果不是 event 名稱，比如 e，則需要顯式的傳遞事件對象參數；
3. 如果執行方法時，有普通參數傳遞，默認情況下 event 也會隱式傳遞的；
<button v-on:click="addCounter(5)">counter+5button>
addCounter(num) {
this.counter += num
console.log(event)
// 隱式傳參事件對象名必須是 event
}
PS：如果要強行接受，是無法接收到事件對象參數的，比如：
addCounter(e, num) 或 addCounter(num, e)
PS：只有顯式進行事件對象參數傳遞，才能有效接收；
<button v-on:click="addCounter(5, $event)">counter+5button>
addCounter(num, e)
PS：事件對象用途屬于 JS 基礎知識，比如：阻止冒泡、取消默認行為，獲取觸發元素內容等；
二．事件修飾符
1. 系統提供了常用的事件對象修飾符，讓你直接定義視圖中事件的執行方式；
<div v-on:click="counter++">
<button v-on:click.stop="addCounter(5, $event)">counter+5button>
div>
// 只執行一次
<button v-on:click.once="counter++">counter+button>
PS：這里使用了.stop 修飾符，表示阻止冒泡；如果不阻止，每次會+6；全部修飾符如下：
.stop / .prevent / .capture / .self / .once / .passive
https://vue3js.cn/docs/zh/guide/events.html#事件修飾符
3. 系統還提供了按鍵事件修飾符，比如回車鍵按下觸發；
<button v-on:keyup.enter="counter++">counter+button>
.enter / .tab /.delete / .esc / .space / .up / .down / .left / .right
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
