Vue（6）v-on指令的使用
v-on
監聽事件
可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。事件代碼可以直接放到v-on後面，也可以寫成一個函數。示例代碼如下：
<div id="app">
<p>{{counter}}</p>
<button @click="counter += 1">+1</button>
<button @click="subtract(10)">-10</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
subtract(value){
this.counter-=value
}
}
})
</script>
傳入event參數：
如果在事件處理函數中，想要獲取原生的DOM事件，那麼在html代碼中，調用的時候，可以傳遞一個$event參數。示例代碼如下：
<button v-on:click="subtract(10,$event)">減10</button>
...
<script>
...
methods: {
subtract: function(value,event){
this.count -= value;
console.log(event);
}
}
...
</script>
事件修飾符：
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。儘管我們可以在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令後綴來表示的。
- .stop：
event.stopPropagation，阻止事件冒泡。 - .prevent：
event.preventDefault，阻止默認行為 - .capture：事件捕獲。
- .self：代表當前這個被點擊的元素自身。
- .once：這個事件只執行一次。
- .passive：在頁面滾動的時候告訴瀏覽器不會阻止默認的行為，從而讓滾動更加順暢。
案例1：阻止單擊事件繼續傳播
<div id="app">
<div @click="divClick">
1111
<button @click.stop="btnClick">按鈕</button>
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
count: 0
},
methods: {
divClick(){
console.log("divClick")
},
btnClick(){
console.log("btnClick")
}
}
});
</script>
案例2：提交事件不再重載頁面
<div id="app">
<form action="">
<label>
<input type="text">
</label>
<label>
<input type="submit" value="提交">
</label>
</form>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
}
})
</script>
以上是最標準的提交數據的代碼，提交完後會自動跳轉到百度，但是現在有個需求，我們希望輸入完數據後，不會自動跳轉到百度，而是通過自己的方法，先處理數據，處理完後，自己指定頁面跳轉，代碼如下
<div id="app">
<form action="//www.baidu.com">
<label>
<input type="text">
</label>
<label>
<input type="submit" value="提交" @click.prevent="testClick">
</label>
</form>
</div>
<script>
const app = new Vue({
el: "#app",
methods: {
testClick(){
}
}
})
</script>
這裡我們給submit綁定了一個點擊事件，並使用.prevent阻止了他的默認行為
