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>
