1、stop
Function: to prevent the event from bubbling
to use:
<button v-on:click.stop="show">B</button>
For example:
<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 button did not add stop, B button to add a stop.
A click on the button, the console will appear in two 1. B Click the button, the console appears only a 1.
2、prevent
Function: to prevent the default event
to use:
<a href="http://www.baidu.com/" v-on:click.prevent>A</a>
<!-- 没有表达式-->
<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
<!-- 有表达式 -->
For example:
<div id="app">
<a href="http://www.baidu.com/" v-on:click.prevent>A</a>
<br />
<a href="http://www.baidu.com/" 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 link to the default event is to jump to baidu.com, adds prevent, click A, the default event is invalid.
B is also a default event links to jump to baidu.com, after adding with prevent the expression, click B, jump event is invalid, but show an effective method to manually add the console display 1, because the show is not a default event.
3、capture
Function: Use capture mode when adding an event listener (the default bubble becomes capture)
to use:
<!-- 父节点使用 -->
<div style="width: 100px;height: 100px;background-color: #008000;" v-on:click.capture="show1">
<button v-on:click="show2">A</button>
</div>
For example:
<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>
In the parent node button to add a capture, at this time, and then click A, the console will display 12, is now proving to capture.
If not captrue, is bubbling, then the console will display 21.
Note that capture modifiers capture must be used in the parent node.
4、self
Function: When the event is triggered only when a callback from the listener element binding itself trigger.
Instructions:
<div v-on:click.self="show2">
For example:
<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>
Suppose we did not add self div on the second floor, then we click on the fourth floor when the console will be a result of 4321 (bubbling), then added, click on the fourth floor, the console display 4 31, the second layer because self event setting the second layer become effective only their own when to call, so the second layer of bubble skipped.
5、.{keyCode | keyAlias}
Function: a specific button presses
to use:
<input type="text" v-on:keydown.13="show1" /><br/>
<!-- 使用KeyCode 13代表enter键 -->
<input type="text" v-on:keydown.right="show2" />
<!-- 使用别名，right代表方向键右 -->
For example:
<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>
In the first input, and press Enter key, the output of the console 1.
In the second input, press the right button console output 2.
6、native
Function: native event listener components of the root element.
Usage and examples:
<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>
Use the native modifier need to create a custom component, and then when you call the component in html, re-use.
If the v-on: click without .native, then click is invalid, the console without any content.
7、once
Function: only trigger a callback.
usage:
<mycomponent v-on:click.native.once="myfn"></mycomponent>
For example:
<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>
Multiple clicks, the console appears only once the results.
8、left | middle | right
Function: The event left mouse button, right trigger.
usage:
<div v-on:mousedown.left="myfn">AAA</div>
<div v-on:mousedown.middle="myfn">BBB</div>
<div v-on:mousedown.right="myfn">CCC</div>
For example:
<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>
Left click AAA, console output 1
middle mouse button click on the BBB, the console output 2
Right-click on CCC, console output 3
9、passive
What passive yes?
https://blog.csdn.net/tengxy_cloud/article/details/52858742
https://www.cnblogs.com/ziyunfei/p/5545439.html
Function: Add a listener model: {true passive}
Usage:
<div v-on:scroll.passive="onScroll">...</div>
passive used to optimize front-end performance of the mobile end, I did not do the test.
Author: kangaroo_v
link: https://www.jianshu.com/p/0e10fe47bff6
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.
