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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。