Vue--事件处理（逐个学习事件修饰符）
.capture.self.once
主要学习这三个事件修饰符的用法先来看看capture
capture即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。 例子如下:
1 <html> 2 <head> 3 <title>Vue事件修饰符 capture</title> 4 <script src="vue.js"></script> 5 <style type="text/css"> 6 *{ 7 text-align:center; 8 line-height:40px; 9 margin:0 auto; 10 } 11 div { 12 width:100px; 13 } 14 #obj1 { 15 background:deeppink; 16 } 17 #obj2 { 18 background:pink; 19 } 20 #obj3 { 21 background:hotpink; 22 } 23 #obj4 { 24 background:#ff4225 25 } 26 27 </style> 28 </head> 29 <body> 30 <div id="example"> 31 <div id="obj1" @click.capture="doSomething"> 32 obj1 33 <div id="obj2" @click.capture="doSomething"> 34 obj2 35 <div id="obj3" @click="doSomething"> 36 obj3 37 <div id="obj4" @click="doSomething"> 38 obj4 39 </div> 40 </div> 41 </div> 42 </div> 43 </div> 44 <script> 45 new Vue({ 46 el:"#example", 47 data:{ 48 id:"" 49 }, 50 methods:{ 51 doSomething:function(event){ 52 this.id = event.currentTarget.id; 53 alert(this.id); 54 } 55 } 56 }) 57 </script> 58 </body> 59 </html>
浏览器打开如下：
当点击obj4的时候 触发顺序是 obj1,obj2,obj4,obj3
由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
self
self可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行。
1 <html> 2 <head> 3 <title>Vue事件修饰符 self</title> 4 <script src="vue.js"></script> 5 <style type="text/css"> 6 *{ 7 text-align:center; 8 line-height:40px; 9 margin:0 auto; 10 } 11 div { 12 width:100px; 13 } 14 #obj1 { 15 background:deeppink; 16 } 17 #obj2 { 18 background:pink; 19 } 20 #obj3 { 21 background:hotpink; 22 } 23 #obj4 { 24 background:#ff4225 25 } 26 27 </style> 28 </head> 29 <body> 30 <div id="example"> 31 <div id="obj1" @click="doSomething"> 32 obj1 33 <div id="obj2" @click="doSomething"> 34 obj2 35 <div id="obj3" @click.self="doSomething"> 36 obj3 37 <div id="obj4" @click="doSomething"> 38 obj4 39 </div> 40 </div> 41 </div> 42 </div> 43 </div> 44 <script> 45 new Vue({ 46 el:"#example", 47 data:{ 48 id:"" 49 }, 50 methods:{ 51 doSomething:function(event){ 52 this.id = event.currentTarget.id; 53 alert(this.id); 54 } 55 } 56 }) 57 </script> 58 </body> 59 </html>
上面的例子当点击obj4的时候会依次弹出 obj4,obj2,obj1 ,只有使用了事件修饰符的obj3没有弹出。只有当我们点击obj3才会触发它
once
这个事件修饰符让点击事件只能触发一次
1 <html> 2 <head> 3 <title>Vue事件修饰符 once</title> 4 <script src="vue.js"></script> 5 <style type="text/css"> 6 </style> 7 </head> 8 <body> 9 <div id="example"> 10 <button @click.once="clickme">点击我</button> 11 </div> 12 <script> 13 new Vue({ 14 el:"#example", 15 methods:{ 16 clickme(){ 17 alert("我被触发了"); 18 } 19 } 20 }) 21 </script> 22 </body> 23 </html>
当点击第一次弹出 “我被触发了”第二次则不会触发点击事件也就不会弹出了
