.capture and .self are distinguished
capture and self are mainly issues of function execution order
.capture first executes the parent function, and then executes the child trigger function (general usage).
That is, add a listener to the element. When the element bubbles, the element with the modifier will be triggered first. If there are multiple modifiers, they will be triggered from the outside to the inside.
<div v-on:='alert("1")' style="width: 100%;height: 45px;background-color: black;">
<div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
123
</div>
</div>When clicking the child's div, alert('1') will be executed first, and then alert('2')
Self is a function that only executes the child itself
<div v-on:='alert("1")' style="width: 100%;height: 45px;background-color: black;">
<div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
123
</div>
</div>At this time, clicking the child's div will execute alert('2'), and alert('1') will not be executed
Modifier capture and self
capture
.capture event modifier function uses event capture mode when adding event listeners
That is, add a listener to the element. When the element bubbles, the element with the modifier will be triggered first. If there are multiple modifiers, they will be triggered from the outside to the inside.
It means whoever has the event modifier will trigger it first. (Capture phase triggered, from outside to inside, without the capture modifier, bubbled from inside to outside)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>.captureEvent modifier</title>
<style type="text/css">
* {
margin: 0 auto;
text-align: center;
line-height: 40px;
}
div {
width: 100px;
}
#obj1 {
background: deeppink;
}
#obj2 {
background: pink;
}
#obj3 {
background: hotpink;
}
#obj4 {
background: #ff4225;
}
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<div v-on:="doc(event)">
obj1
<div v-on:="doc(event)">
obj2
<div v-on:click="doc(event)">
obj3
<div v-on:click="doc(event)">
obj4
<!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。Clickobj4When，The order of popup is：obj1、obj2、obj4、obj3；
because1，2Have modifiers，Therefore, the event is triggered first，Then it's4Trigger itself，The last bubbling event。
-->
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc(event) {
= ;
alert()
}
}
})
</script>
</body>
</html>self
The callback is triggered only if the event is triggered from the element bound to the listener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>.captureEvent modifier</title>
<style type="text/css">
* {
margin: 0 auto;
text-align: center;
line-height: 40px;
}
div{
width:200px;
}
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<div class="box1" style="background: red;" @="test1">
box1
<div class="box2" style="background: yellow;">
box2
<!--box3Click to triggertest3Will not triggertest1，If removedselfModifier will trigger,That means addingselfElemental events，Callbacks will be executed only if they trigger it，Bubble events are not executed-->
<div class="box3" style="background: pink;" @="test3">box3</div>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
},
methods:{
test1(){
('box1');
} ,
test3(){
('box3');
}
}
})
</script>
</body>
</html>The above is my temporary understanding. I hope it can help everyone. If you have different opinions, you can discuss and learn together! !