微信扫一扫打赏支持

VUE课程---12、事件修饰符

VUE课程---12、事件修饰符

一、总结

一句话总结：

vue中可以可以用事件修饰符来做我们事件操作中常用的阻止默认事件（event.preventDefault()）或者阻止事件冒泡（event.stopPropagation()）等事件操作
vue中常用的事件修饰符有.stop（阻止冒泡）、.prevent（阻止默认事件）、.capture（使用事件捕获模式）、.self（事件只在本元素上触发）、.once（事件只触发一次）等
.stop 阻止事件冒泡
.prevent 阻止元素的默认事件
.capture 将js事件机制从默认的冒泡机制转换成捕获机制
.self 只有自身才能触发事件（不能够被子元素触发）
.once 事件只触发一次

<!--.stop 阻止事件冒泡-->
<div class="parent" @click="parentClick">
  <button @click.stop="btnClick">有问题，先看文档先百度</button>
</div>

 

 

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

vue中常用的事件修饰符有.stop（阻止冒泡）、.prevent（阻止默认事件）、.capture（使用事件捕获模式）、.self（事件只在本元素上触发）、.once（事件只触发一次）等
.stop 阻止事件冒泡
.prevent 阻止元素的默认事件
.capture 将js事件机制从默认的冒泡机制转换成捕获机制
.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>

 

 

 

 

 

二、事件修饰符

博客对应课程的视频位置：12、事件修饰符
https://www.fanrenyi.com/video/26/229

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件修饰符</title>
 6     <style>
 7         .parent {
 8             width: 250px;
 9             height: 100px;
10             background-color: lightseagreen;
11         }
12         .grandParent{
13             width: 350px;
14             height: 200px;
15             background-color: lightcoral;
16         }
17     </style>
18 </head>
19 <body>
20 <!--
21 
22 .stop 阻止事件冒泡
23 .prevent 阻止元素的默认事件
24 .capture 将js事件机制从默认的冒泡机制转换成捕获机制
25 .self 只有自身才能触发事件（不能够被子元素触发）
26 .once 事件只触发一次
27 
28 -->
29 <div id="app">
30     <!--js默认的冒泡机制-->
31     <!--    <div class="parent" @click="parentClick">-->
32     <!--        <button @click="btnClick">有问题，先看文档先百度</button>-->
33     <!--    </div>-->
34 
35     <!--.stop 阻止事件冒泡-->
36     <!--    <div class="parent" @click="parentClick">-->
37     <!--        <button @click.stop="btnClick">有问题，先看文档先百度</button>-->
38     <!--    </div>-->
39 
40     <!--.prevent 阻止元素的默认事件-->
41     <!--    <a href="https://fanrenyi.com" @click.prevent="aClick">让学过的东西不再忘记</a>-->
42 
43     <!--.capture 将js事件机制从默认的冒泡机制转换成捕获机制-->
44     <!--    <div class="parent" @click.capture="parentClick">-->
45     <!--        <button @click="btnClick">有问题，先看文档先百度</button>-->
46     <!--    </div>-->
47 
48     <!--.self 就是只有自身才能触发事件（不能够被子元素触发）-->
49 <!--    <div class="grandParent" @click.self="grandParentClick">-->
50 <!--        <div class="parent" @click.self="parentClick">-->
51 <!--            <button @click="btnClick">有问题，先看文档先百度</button>-->
52 <!--        </div>-->
53 <!--    </div>-->
54 
55     <!--.once 事件只被触发一次-->
56     <div class="grandParent" @click.self="grandParentClick">
57         <div class="parent" @click.self="parentClick">
58             <button @click.once="btnClick">有问题，先看文档先百度</button>
59         </div>
60     </div>
61 
62 </div>
63 <script src="../js/vue.js"></script>
64 <script>
65     new Vue({
66         el: '#app', //element
67         data: {},
68         methods: {
69             btnClick: function () {
70                 console.log('按钮被点击了');
71             },
72             parentClick() {
73                 console.log('parent被点击了');
74             },
75             aClick: function () {
76                 console.log('a标签被点击了');
77             },
78             grandParentClick(){
79                 console.log('grandParent被点击了');
80             }
81         }
82     });
83 </script>
84 </body>
85 </html>

 

 

 

 

 

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