設(shè)置Vue練習(xí)代碼如下：
<div id="app">
<div id="outer" @click="Couter">
<div id="inner" @click="Cinner">
<input type="button" value="點(diǎn)我" @click="Cbtn">
</div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
Couter(){
console.log('觸發(fā)outer的點(diǎn)擊事件')
},
Cinner(){
console.log('觸發(fā)inner的點(diǎn)擊事件')
},
Cbtn(){
console.log('觸發(fā)按鈕的點(diǎn)擊事件')
}
}
})
</script>
未添加任何修飾符.png
stop
作用：針對綁定事件踊餐，阻止當(dāng)前元素以上元素的冒泡行為，本元素的冒泡行為并不阻止臀稚。
在按鈕處添加stop修飾符.png
在inner處添加stop修飾符.png
?上例中吝岭，如在按鈕處添加stop，將阻止按鈕外inner和outer的冒泡行為吧寺；如在inner處添加stop窜管，將阻止outer的冒泡行為
capture
作用:優(yōu)先觸發(fā)帶有關(guān)鍵字的元素，再將剩余的元素按照正常的冒泡順序觸發(fā)撮执；如果存在多個(gè)帶有關(guān)鍵字的元素微峰，則按照由外向里的順序，依次觸發(fā)帶關(guān)鍵字的元素抒钱，再將剩余元素按照正常冒泡順序觸發(fā)
只在inner中添加capture.png
?當(dāng)只有inner中有關(guān)鍵字時(shí)蜓肆，先觸發(fā)inner，再將剩余的btn和outer按照從里向外的正常冒泡順序觸發(fā)
在outer和inner中均添加captre.png
?當(dāng)outer和inner中均含有關(guān)鍵字時(shí)谋币，按照從外向里的原則仗扬，先觸發(fā)outer，inner蕾额，再觸發(fā)剩余的btn
self
作用:阻止本元素的冒泡行為早芭，即元素的事件不可以由冒泡機(jī)制觸發(fā)，必須由親自作用在本元素上的行為觸發(fā)
在outer中添加self.png
當(dāng)點(diǎn)擊outer時(shí)才能觸發(fā)outer自身的事件.png
注意：self和stop都有阻止冒泡機(jī)制的作用诅蝶，但是self只能阻止帶有關(guān)鍵字的元素的冒泡行為退个，其他不帶關(guān)鍵字的元素將繼續(xù)冒泡；而stop將阻止帶關(guān)鍵字元素以上的其他元素的冒泡行為调炬，帶關(guān)鍵字的元素將不受到stop的影響语盈，仍會(huì)被冒泡影響
prevent
作用：阻止元素的其他默認(rèn)操作，只觸發(fā)綁定事件
<a href="www.baidu.com" @click.prevent="alink">點(diǎn)擊進(jìn)入百度</a>
超鏈接至百度并添加prevent阻止跳轉(zhuǎn).png
once
作用：表示該觸發(fā)只執(zhí)行一次缰泡。如與其他事件修飾符串聯(lián)使用刀荒，表示疊加效果的觸發(fā)事件將只執(zhí)行一次，之后該元素的觸發(fā)事件將不再執(zhí)行
第一次阻止鏈接跳轉(zhuǎn).png
再點(diǎn)擊一次鏈接將跳轉(zhuǎn)至www.baidu.com，且觸發(fā)事件console.log將不再受到觸發(fā)
事件修飾符可以串聯(lián)缠借，最終效果為多個(gè)事件修飾符共同作用的結(jié)果干毅，修飾符的順序并不影響疊加效果
