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>
