.stop阻止冒泡
<body>
<div id="app">
<div class="inner" @click="div1handler">
<input type="button" value="戳他" @click="btnHandler">
<!--阻止冒泡是@click.stop="btnHandler-->
</div>
</div>
<script>
//創建Vue實例，得到ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler(){
console.log('這是觸發了inner div的點擊事件')
},
btnHandler(){
console.log('這是觸發了btn按鈕的點擊事件')
}
}
});
</script>
</body>
.prevent阻止默認事件
<div id="app">
<a href="www.baidu.com" @click="linkClick">有病治病</a>
<!--阻止鏈接跳轉是@click.prevent="linkClick"-->
</div>
<script>
//創建Vue實例，得到ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
linkClick(){
console.log('觸發鏈接的點擊事件')
}
}
});
</script>
.capture添加事件偵聽器時使用事件捕獲模式
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<script>
//創建Vue實例，得到ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler(){
console.log('這是觸發了inner div的點擊事件')
},
btnHandler(){
console.log('這是觸發了btn按鈕的點擊事件')
}
}
});
</script>
.self只當事件在該元素本身（比如不是子元素）觸發時觸發回調
<!--使用.self實現只有點擊當前元素，纔會觸發事件處理函數-->
<!--.self只會阻止自己身上冒泡行爲的觸發，並不會真正阻止冒泡行爲-->
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
.once事件只觸發一次
<!--使用.once只觸發一次事件處理函數-->
<a href="www.baidu.com" @click.prevent.once="linkClick">有病治病</a>
