v-on
vue中提供了v-on事件綁定
v-on：click='函數';
v-on可以使用@代替
vue 五個觸發事件關鍵字
.stop 用於阻止冒泡
例如 div1中嵌套div2，且兩個div都有點擊事件，那么在點擊div2時會觸發div1的
點擊事件.click.stop可以阻止所有冒泡
.prevent 用於阻止默認事件，點擊a標簽href可以打開相應的鏈接，那么給事件加
上此關鍵字，click.prevent
.capture 冒泡順序
例如 div1中嵌套div2中嵌套div3
<div id="app" v-on:click="show">
1
<div id="app2" v-on:click.capture="show2">
2
<div id="app3" v-on:click="show3">
3
</div>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
},
methods:{
show:function(){
console.log("這是app的方法")
},
show2:function(){
console.log("這是app2的方法")
},
show3:function(){
console.log("這是app3的方法")
}
}
})
</script>
此處的代碼因為div2有capture關鍵字，所以此時冒泡的順序發生了改變
正常情況下：
點擊div3一層一層冒泡，先div3=》div2=》div1
使用了關鍵字：
點擊div3時，先div2=》div3=》div1
1.先冒泡外層帶有關鍵字的事件
2.外層執行結束之后，往里層執行事件
3.最后按照從里向外的事件開始執行
就是說只要存在一個capture關鍵字，就會影響整個嵌套的執行
例子
div1中嵌套div2中嵌套div3.capture中嵌套div4
此時點擊div1
先執行帶有capture的div3
然后執行div4
最后按照從里向外的順序執行
順序就是 div3=》div4=》div2=》div1
其他疑惑
此時嵌套為
div1中嵌套div2.capture中嵌套div3中嵌套div4
那么可以想一下點擊最里層的div4會怎么觸發呢
1.觸發帶有關鍵字的 div2
2.觸發點擊的div4
3.最后從里向外執行
那么順序為 div2=》div4=》div3=》div1
.self關鍵字阻止冒泡或者當點擊自身才觸發
stop阻止除了自己以外所有的事件觸發
self加給想要阻止冒泡的或想要去單獨點擊它才觸發的對象上
.onec 只觸發一次，再點擊無效果