Vue--事件处理（逐个学习事件修饰符）

时间 2020-04-27

标签 vue 事件处理逐个学习修饰繁體版

原文原文链接

.capture
.self
.once

主要学习这三个事件修饰符的用法先来看看capturecss

capture便是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。如有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。例子以下:html

 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>

浏览器打开以下：vue

当点击obj4的时候触发顺序是 obj1,obj2,obj4,obj3浏览器

因为1，2有修饰符，故而先触发事件，而后就是4自己触发，最后冒泡事件。学习

selfthis

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才会触发它spa

oncecode

这个事件修饰符让点击事件只能触发一次htm

 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>

当点击第一次弹出 “我被触发了”第二次则不会触发点击事件也就不会弹出了blog