昨天有帶各位了解了 v-bind 的樣式綁定，那今天就與大家進入新的單元吧
前幾天的文章有跟各位介紹許多個 v 開頭的模板指令
而在 Vue 中只有一個是與事件有關的指令，也就是我們今日要介紹的：v-on
v-on 在 Vue 中被稱之為事件綁定，用法很簡單
最常見的方式是：v-on:事件名稱="運算式"，那我們來舉個例子看看吧：
<template>
<p>click:{{ click_iThome }}</p>
<button v-on:click="click_iThome++">ClickButton</button>
</template>
<script>
export default {
data() {
return {
click_iThome: 0,
};
},
};
</script>
就像這樣，我們先在網頁中放上一個可以記錄我們點擊次數的 v-model，接著在放在一個可供我們點擊的 button，並在 Button 的標籤中加上 v-on，而事件名稱設定為 click，接者再等號後面的運算式則為我們設定的 v-model 去連加：v-on:click="click_iThome++" ( ++ 的意思為連加)，最後到 data 中把初始的點擊次數定義為 0 即可。
讓我們來看看網頁的表現：
除此之外，也可以用 methods 去改寫，也能達到相同效果：
<template>
<p>click:{{ click_iThome }}</p>
<button v-on:click="ClickButton">ClickButton</button>
</template>
<script>
export default {
data() {
return {
click_iThome: 0,
};
},
methods: {
ClickButton() {
this.click_iThome++;
},
},
};
</script>
在 methods 中，我們可以設定一個函式：每點擊一次就 +1，最後再將值透過 v-model 傳至模板
來看看網頁表現：
除了以上的寫法外，與 v-bind 一樣，事件綁定 v-on 也有簡寫：
以 Click 的事件為例，一般寫法為：
<button v-on:click="Clickbtn">Click</button>
簡寫為：
<button @click="Clickbtn">Click</button>
將 v-on:事件名稱="運算式" 改寫為 @事件名稱="運算式"
接下來要與各位來了解很重要的 event 物件了，注意聽囉！
當我們的監聽事件發生時，EventListener 也會同時建立一個「事件物件」，包含了與此事件相關的屬性、方法與觸發事件等等。像是我們常用的 preventDefault()、stopPropagation() 皆是由 event所提供的。而當 v-on 在觸發事件時，如果沒有指定參數的話，預設會將 event 當成參數傳入：
<template>
<button @click="clickBtn">click Button</button>
</template>
<script>
export default {
methods: {
clickBtn(event) {
console.log(event.target.tagName)
},
},
};
</script>
我們讓 button 在觸發點擊事件的時後傳到 methods 中，同時取得預設所傳入的 event 物件。
target：表示觸發事件的元素tagName：讀取屬性並調用元素的標籤名稱解釋完以上名詞後，在來看看此句程式碼：
console.log(event.target.tagName)
讓我們能在觸發點擊事件時記錄下來，並計算這個此事件的發生次數。
來看看網頁及 console 的表現：
與 v-model 一樣，v-on 也有提供給開發者修飾子的功能：
以下就讓我們來逐一介紹吧：
stop 的作用就如同 event.stopPropagation()，用來阻止事件冒泡。
<body>
<div>
<p><button @click="clickBtn">Click</button></p>
</div>
</body>
而觸發事件的順序應該是：
p -> div -> body -> html -> document
冒泡事件從目標元素開始向上冒泡，通常會一直上升到 <html>，再到 document 對象，甚至更可能會到達 window，冒泡事件會調用路徑上所有的處理程序。
<body>
<button @click.stop="clickBtn()">Click</button>
</body>
prevent 的作用就如同 event.preventDefault()，用來阻擋元素的預設行為。
capture 的作用是可以讓我們將指定事件用捕獲的形式觸發。
self 可觸發元素本身的事件行為，但如是由子層元素傳遞來的事件則不會觸發。
once 的作用是讓指定的事件只觸發一次。
passive 的作用就如同 addEventListener 的 passive 屬性，讓瀏覽器知道此事件處理器並不會呼叫 event.preventDefault 去停止瀏覽器的預設行為。
iThome鐵人賽
看影片追技術