微信扫一扫打赏支持

VUE课程参考---8、事件修饰符

VUE课程参考---8、事件修饰符

一、总结

一句话总结：

vue中可以可以用事件修饰符来做我们事件操作中常用的阻止默认事件（event.preventDefault()）或者阻止事件冒泡（event.stopPropagation()）等事件操作
vue中常用的事件修饰符有.stop（阻止冒泡）、.prevent（阻止默认事件）、.capture（使用事件捕获模式）、.self（事件只在本元素上触发）、.once（事件只触发一次）等
.stop       阻止冒泡
.prevent    阻止默认事件
.capture    添加事件侦听器时使用事件捕获模式
.self       只当事件在该元素本身（比如不是子元素）触发时触发回调
.once       事件只触发一次

<!--.stop阻止事件冒泡-->
<div class="grandfather" @click="grandfatherClick">
  grandfatherClick
  <div class="father" @click="fatherClick">
      fatherClick
      <button @click.stop="btnClick">按钮</button>
  </div>
</div>

 

 

1、vue中常见的事件修饰符？

vue中常用的事件修饰符有.stop（阻止冒泡）、.prevent（阻止默认事件）、.capture（使用事件捕获模式）、.self（事件只在本元素上触发）、.once（事件只触发一次）等
.stop       阻止冒泡
.prevent    阻止默认事件
.capture    添加事件侦听器时使用事件捕获模式
.self       只当事件在该元素本身（比如不是子元素）触发时触发回调
.once       事件只触发一次

 

 

2、vue事件修饰符注意？

1、修饰符可以串联，比如：<a href="https://fanrenyi.com" @click.prevent.once="preventLink">读书编程笔记</a>
2、可以只有修饰符，比如：<a href="https://fanrenyi.com" @click.prevent >读书编程笔记</a>

 

 

3、vue中事件修饰符如何使用？

直接在事件后面接事件修饰符，比如.prevent阻止默认事件：@click.prevent="preventLink"：<a href="https://fanrenyi.com" @click.prevent="preventLink">读书编程笔记</a>
<!--.prevent阻止默认事件-->
<!--也可以只有修饰符-->
<a href="https://fanrenyi.com" @click.prevent="preventLink">读书编程笔记</a>

 

 

 

二、事件修饰符

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>8、事件修饰符</title>
 6     <style>
 7         .father{
 8             width: 100px;
 9             height: 100px;
10             background-color: lightseagreen;
11         }
12         .grandfather{
13             width: 200px;
14             height: 200px;
15             background-color: yellowgreen;
16         }
17     </style>
18 </head>
19 <body>
20 <!--
21 
22 .stop       阻止冒泡
23 .prevent    阻止默认事件
24 .capture    添加事件侦听器时使用事件捕获模式
25 .self       只当事件在该元素本身（比如不是子元素）触发时触发回调
26 .once       事件只触发一次
27 
28 -->
29 <div id="app">
30 <!--    <div class="grandfather" @click="grandfatherClick">-->
31 <!--        grandfatherClick-->
32 <!--        <div class="father" @click="fatherClick">-->
33 <!--            fatherClick-->
34 <!--            <button @click="btnClick">按钮</button>-->
35 <!--        </div>-->
36 <!--    </div>-->
37 
38     <!--.stop阻止事件冒泡-->
39 <!--    <div class="grandfather" @click="grandfatherClick">-->
40 <!--        grandfatherClick-->
41 <!--        <div class="father" @click="fatherClick">-->
42 <!--            fatherClick-->
43 <!--            <button @click.stop="btnClick">按钮</button>-->
44 <!--        </div>-->
45 <!--    </div>-->
46 
47     <!--.prevent阻止默认事件-->
48     <!--也可以只有修饰符-->
49 <!--    <a href="https://fanrenyi.com" @click.prevent="preventLink">读书编程笔记</a>-->
50 
51     <!--.capture，添加事件侦听器时使用事件捕获模式-->
52 <!--    <div class="grandfather" @click.capture="grandfatherClick">-->
53 <!--        grandfatherClick-->
54 <!--        <div class="father" @click.capture="fatherClick">-->
55 <!--            fatherClick-->
56 <!--            <button @click="btnClick">按钮</button>-->
57 <!--        </div>-->
58 <!--    </div>-->
59 
60     <!--.self，只当事件在该元素本身（比如不是子元素）触发时触发回调-->
61 <!--    <div class="grandfather" @click.self="grandfatherClick">-->
62 <!--        grandfatherClick-->
63 <!--        <div class="father" @click.self="fatherClick">-->
64 <!--            fatherClick-->
65 <!--            <button @click="btnClick">按钮</button>-->
66 <!--        </div>-->
67 <!--    </div>-->
68 
69     <!--.once，事件只触发一次-->
70     <!-- 修饰符可以串联 -->
71 <!--    <a href="https://fanrenyi.com" @click.prevent.once="preventLink">读书编程笔记</a>-->
72 
73 
74 </div>
75 <script src="../js/vue.js"></script>
76 <script>
77     let vm = new Vue({
78         el: '#app',
79         data: {
80 
81         },
82         methods:{
83             btnClick(){
84                 console.log('btnClick');
85             },
86             fatherClick(){
87                 console.log('fatherClick');
88             },
89             grandfatherClick(){
90                 console.log('grandfatherClick');
91             },
92             preventLink(){
93                 console.log('preventLink');
94             }
95         }
96     });
97 </script>
98 </body>
99 </html>

 

 

 

 

 

 
posted @ 2020-05-09 05:03  范仁义  阅读(249)  评论(0)  编辑  收藏  举报