事件修飾符：
.stop 阻止冒泡
.prevent 阻止默認(rèn)事件
.capture 添加事件偵聽器時(shí)使用事件捕獲模式
.self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)
.once 事件只觸發(fā)一次
.stop 阻止冒泡
<!-- 使用 .stop 阻止冒泡 -->
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
這樣子的話，點(diǎn)擊button按鈕拍屑，只會(huì)觸發(fā)它的點(diǎn)擊事件麻车，因?yàn)榧由狭?stop事件修飾符，所以這時(shí)候div不會(huì)觸發(fā)事件力图，也就是成功阻止了冒泡爽篷。
.prevent 阻止默認(rèn)事件
<!-- 使用 .prevent 阻止默認(rèn)行為 -->
<a @click.prevent="linkClick">有問題周蹭，先去百度</a>
因?yàn)閍標(biāo)簽的默認(rèn)行為是跳轉(zhuǎn)到對應(yīng)的URL，如果沒有使用 .prevent 阻止默認(rèn)行為娇澎，則點(diǎn)擊以上那個(gè)a標(biāo)簽膳殷，會(huì)自動(dòng)跳轉(zhuǎn)到百度，效果如下：
加上了 .prevent 阻止默認(rèn)行為九火，則不會(huì)進(jìn)行跳轉(zhuǎn)赚窃，效果如下：
.capture 添加事件偵聽器時(shí)使用事件捕獲模式
<!-- 使用 .capture 實(shí)現(xiàn)捕獲觸發(fā)事件的機(jī)制 -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
如果不使用capture，正確的觸發(fā)順序應(yīng)該是先input后div
加上capture之后岔激，因?yàn)槊芭荼簧蠈酉炔东@了勒极，所以觸發(fā)順序變?yōu)橄萪iv后input
驗(yàn)證如下：
.self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)
<!-- 使用 .self 實(shí)現(xiàn)只有點(diǎn)擊當(dāng)前元素時(shí)候，才會(huì)觸發(fā)事件處理函數(shù) -->
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
點(diǎn)擊input時(shí)候虑鼎，因?yàn)榧由狭藄elf修飾符辱匿，div不接受其冒泡
只有當(dāng)用戶鼠標(biāo)點(diǎn)擊div時(shí)候，才會(huì)觸發(fā)div的事件
.once 事件只觸發(fā)一次
<!-- 使用 .once 只觸發(fā)一次事件處理函數(shù) -->
<a @click.prevent.once="linkClick">有問題炫彩，先去百度</a>
加上了once事件修飾符匾七，prevent只能觸發(fā)一次，因此當(dāng)?shù)谝淮吸c(diǎn)擊鏈接江兢，不會(huì)進(jìn)行默認(rèn)的跳轉(zhuǎn)到百度昨忆，但是當(dāng)再次點(diǎn)擊，則會(huì)進(jìn)行跳轉(zhuǎn)
注意：這里prevent和once順序沒有聯(lián)系杉允，即先prevent后once和 先once后prevent 效果都是一樣的
.stop 和 .self 的區(qū)別
<!-- 演示： .stop 和 .self 的區(qū)別 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
<!-- .self 只會(huì)阻止自己身上冒泡行為的觸發(fā)邑贴，并不會(huì)真正阻止 冒泡的行為 -->
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div>
.self 只會(huì)阻止自己身上冒泡行為的觸發(fā)席里，并不會(huì)真正阻止冒泡的行為，如果傳到該層時(shí)又.self修飾拢驾，那么該層繼續(xù)將冒泡上傳的上一層奖磁，繼續(xù)觸發(fā)
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: darkcyan;
}
.outer {
padding: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->
<!-- 使用 .prevent 阻止默認(rèn)行為 -->
<!-- <a @click.prevent="linkClick">有問題，先去百度</a> -->
<!-- 使用 .capture 實(shí)現(xiàn)捕獲觸發(fā)事件的機(jī)制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .self 實(shí)現(xiàn)只有點(diǎn)擊當(dāng)前元素時(shí)候繁疤，才會(huì)觸發(fā)事件處理函數(shù) -->
<!-- <div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .once 只觸發(fā)一次事件處理函數(shù) -->
<!-- <a @click.prevent.once="linkClick">有問題咖为，先去百度</a> -->
<!-- 演示： .stop 和 .self 的區(qū)別 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div> -->
<!-- .self 只會(huì)阻止自己身上冒泡行為的觸發(fā)，并不會(huì)真正阻止 冒泡的行為 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div> -->
</div>
<script>
// 創(chuàng)建 Vue 實(shí)例稠腊，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('這是觸發(fā)了 inner div 的點(diǎn)擊事件')
},
btnHandler() {
console.log('這是觸發(fā)了 btn 按鈕 的點(diǎn)擊事件')
},
linkClick() {
console.log('觸發(fā)了連接的點(diǎn)擊事件')
},
div2Handler() {
console.log('這是觸發(fā)了 outer div 的點(diǎn)擊事件')
}
}
});
</script>
</body>
</html>
