1妆毕、stop
功能：阻止事件冒泡
使用方法:
<button v-on:click.stop="show">B</button>
舉例：
<div id="app">
<div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show">
<button v-on:click="show">A</button>
<button v-on:click.stop="show">B</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
show(){
console.log("1")
}
}
})
</script>
A按鈕沒添加stop，B按鈕添加了stop贮尖。
點擊A按鈕笛粘，控制臺里會出現(xiàn)兩個1。點擊b按鈕湿硝，控制臺只出現(xiàn)一個1薪前。
2、prevent
功能：阻止默認事件
使用方法：
<a v-on:click.prevent>A</a>
<!-- 沒有表達式-->
<a v-on:click.prevent="show">B</a>
<!-- 有表達式 -->
舉例：
<div id="app">
<a v-on:click.prevent>A</a>
<br />
<a v-on:click.prevent="show">B</a>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
show(){
console.log("1")
}
}
})
</script>
A鏈接的默認事件是跳轉(zhuǎn)到baidu.com关斜，添加了prevent后示括，點擊A，默認事件無效痢畜。
B鏈接的默認事件也是跳轉(zhuǎn)到baidu.com垛膝，添加了帶有表達式的prevent后，點擊B裁着，跳轉(zhuǎn)事件無效繁涂，但手動添加的show方法有效拱她，控制臺中顯示1二驰，因為show不是默認事件。
3秉沼、capture
功能：添加事件偵聽器時使用 capture 模式(把默認的冒泡變?yōu)椴东@)
使用方法：
<!-- 父節(jié)點使用 -->
<div style="width: 100px;height: 100px;background-color: #008000;" v-on:click.capture="show1">
<button v-on:click="show2">A</button>
</div>
舉例：
<div id="app">
<div style="width: 100px;height: 100px;background-color: #008000;" v-on:click.capture="show1">
<button v-on:click="show2">A</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
methods: {
show1() {
console.log("1")
},
show2() {
console.log("2")
}
}
})
</script>
在button的父節(jié)點添加了capture桶雀，此時，再點擊A唬复，控制臺將顯示1 2矗积，這證明現(xiàn)在是捕獲。
如果不加captrue,則是冒泡敞咧，那么控制臺將顯示2 1棘捣。
要注意，捕獲的capture的修飾符必須在父節(jié)點使用休建。
4乍恐、self
功能：只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)评疗。
使用方法：
<div v-on:click.self="show2">
舉例：
<div id="app">
<div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show1">
第一層
<div v-on:click.self="show2">
第二層
<div v-on:click="show3">
第三層
<div v-on:click="show4">
第四層
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
methods: {
show1() {console.log("1")},
show2() {console.log("2")},
show3() {console.log("3")},
show4() {console.log("4")}
}
})
</script>
假設(shè)我們沒有在第二層的div上添加self，那么我們點擊第四層的時候茵烈，控制臺將會出現(xiàn)結(jié)果4 3 2 1（冒泡）百匆，添加了之后，點擊第四層呜投，控制臺顯示4 3 1加匈，因為第二層的self把第二層的事件設(shè)置成了僅自己調(diào)用時才有效，所以冒泡把第二層跳過了仑荐。
5雕拼、.{keyCode | keyAlias}
功能：用特定按鍵觸發(fā)事件
使用方法：
<input type="text" v-on:keydown.13="show1" /><br/>
<!-- 使用KeyCode 13代表enter鍵 -->
<input type="text" v-on:keydown.right="show2" />
<!-- 使用別名，right代表方向鍵右 -->
舉例:
<div id="app">
<input type="text" v-on:keydown.13="show1" /><br/>
<input type="text" v-on:keydown.right="show2" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
methods: {
show1(){
console.log(1)
},
show2(){
console.log(2)
}
}
})
</script>
在第一個input中粘招，按回車鍵悲没，控制臺輸出1.
在第二個input中，按right鍵男图，控制臺輸出2.
6示姿、native
功能：監(jiān)聽組件根元素的原生事件。
用法和舉例：
<div id="app">
<mycomponent v-on:click.native="myfn"></mycomponent>
</div>
<script type="text/javascript">
Vue.component('mycomponent',{
template:`<a href="#">點我</a>`
})
var vm = new Vue({
el: '#app',
methods:{
myfn(){
console.log(1);
}
}
});
</script>
使用native修飾符需要先創(chuàng)建一個自定義組件逊笆，然后在html中調(diào)用組件時栈戳，再使用。
如果v-on:click不加.native,那么點擊是無效的难裆，控制臺不會出現(xiàn)任何內(nèi)容子檀。
7、once
功能：只觸發(fā)一次回調(diào)乃戈。
用法：
<mycomponent v-on:click.native.once="myfn"></mycomponent>
舉例：
<div id="app">
<mycomponent v-on:click.native.once="myfn"></mycomponent>
</div>
<script type="text/javascript">
Vue.component('mycomponent',{
template:`<a href="#">點我</a>`
})
var vm = new Vue({
el: '#app',
methods:{
myfn(){
console.log(1);
}
}
});
</script>
多次點擊褂痰，控制臺只出現(xiàn)一次結(jié)果。
8症虑、left | middle | right
功能：鼠標的左鍵 中鍵 右鍵觸發(fā)的事件缩歪。
用法:
<div v-on:mousedown.left="myfn">AAA</div>
<div v-on:mousedown.middle="myfn">BBB</div>
<div v-on:mousedown.right="myfn">CCC</div>
舉例：
<div id="app">
<div v-on:mousedown.left="myfn1">AAA</div>
<div v-on:mousedown.middle="myfn2">BBB</div>
<div v-on:mousedown.right="myfn3">CCC</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
methods:{
myfn1(){console.log(1);},
myfn2(){console.log(2);},
myfn3(){console.log(3);}
}
});
</script>
鼠標左鍵點擊AAA，控制臺輸出1
鼠標中鍵點擊BBB谍憔，控制臺輸出2
鼠標右鍵點擊CCC匪蝙，控制臺輸出3
9、passive
passive 是什么习贫？
https://blog.csdn.net/tengxy_cloud/article/details/52858742
https://www.cnblogs.com/ziyunfei/p/5545439.html
功能：以 { passive: true } 模式添加偵聽器
用法：
<div v-on:scroll.passive="onScroll">...</div>
passive用于優(yōu)化移動端的前端性能逛球，我沒做測試。
作者：ChasenKaos
鏈接：http://www.reibang.com/p/2131124b3742
來源：簡書
簡書著作權(quán)歸作者所有苫昌，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處颤绕。
