Vue学习之路8-v-on指令学习简单事件绑定之属性

上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法，本文介绍一下v-on绑定事件的一些属性的使用方法。

v-on绑定指令属性

      .stop属性

阻止单击事件继续向上传播（简单点说就是不让父节点及父节点以上的节点事件触发），本示例如果没有stop属性，父节点和爷爷节点事件将会触发，并在控制台输出内容，示例代码和示例结果如下：

 1  1 <template>
 2  2   <div>
 3  3     <p class="title1">{{title}}</p>
 4  4     <div class="div1">
 5  5       <div v-on:click="clickme0">
 6  6         {{ msg1}}
 7  7         <div v-on:click="clickme">
 8  8           {{msg2}}<br/>
 9  9           <span v-on:click="clickthis">{{msg3}}</span>
10 10         </div>
11 11       </div>
12 12     </div>
13 13   </div>
14 14 
15 15 </template>
16 16 
17 17 <script>
18 18   export default {
19 19     name: 'v-on',
20 20     data() {
21 21       return {
22 22         msg1: '我是爷爷节点',
23 23         msg2: '我是父节点',
24 24         msg3: '测试click属性',
25 25         title: 'v-on指令学习'
26 26       }
27 27     },
28 28     methods:{
29 29       clickme0(){
30 30         console.log("我是爷爷节点");
31 31       },
32 32       clickme(){
33 33         console.log("我是父节点");
34 34       },
35 35       clickthis(){
36 36         console.log("不打印父节点事件内容！")
37 37       }
38 38     }
39 39   }
40 40 </script>
41 41 
42 42 <style scoped>
43 43   .title1 {
44 44     text-align: left;
45 45   }
46 46   .div1{
47 47     float: left;
48 48   }
49 49 </style>

View Code