1、事件處理器

我們可以使用v-on 指令(簡寫為@)來監聽DOM事件，并在事件觸發時執行對應的JavaScript。
用法: v-on:click="methodName" 或 @click="handler"

• 內聯事件處理器：事件被觸發時執行的內聯JavaScript語句(與onclick類似)；
• 方法事件處理器：一個指向組件上定義的方法的屬性名或是路徑。

（1）內聯事件處理器

通常用于簡單場景，舉例：

<template><h3>內聯事件處理器</h3><button v-on:click = "count++">Add</button><!-- <button @click = "count++">Add</button> --><p>{{ count }}</p>
</template><script>export default{data(){return{count:0}}}
</script>

（2）方法事件處理器

<template><h3>內聯事件處理器</h3><button @click="addCount()">Add</button><p>{{ count }}</p>
</template><script>export default{data(){return{count:0}},// 所有方法或者函數都放在這里,跟data同級methods:{addCount(){// 讀取data里面數據的方法：this.countthis.count++}}}
</script>

2、事件參數

事件參數可以獲取event對象和通過事件傳遞數據

3、事件修飾符

在處理事件時調用event.preventDefault() 或event.stopPropagation() 是很常見的。盡管我們可以直接在方法內調用，但如果方法能更專注于數據邏輯而不用去處理DOM事件的細節會更好。

為解決這一問題，Vue 為v-on提供了事件修飾符，常用有以下幾個:

• .stop：阻止事件冒泡
• .prevent：阻止默認事件
• .once：事件只會被觸發一次
• .enter：回車按鍵觸發
• …

更多詳情可查看官方文檔：
https://cn.vuejs.org/guide/essentials/event-handling.html