第二章 Vue快速入门--12 事件修饰符的介绍
Posted songsongblue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第二章 Vue快速入门--12 事件修饰符的介绍相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <!-- <script src="./lib/vue-2.6.10.js"></script> --> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 <style> 12 .inner 13 height: 150px; 14 background-color: darkcyan; 15 16 17 .outer 18 padding: 40px; 19 background-color: red; 20 21 </style> 22 23 </head> 24 25 <body> 26 27 <div id="app"> 28 <!-- 使用 .stop 阻止冒泡 --> 29 <!-- <div class="inner" @click="div1Handler"> 30 <input type="button" value="戳他" @click.stop="btnHandler"> 31 </div> --> 32 33 <!-- 使用 .prevent阻止默认行为 --> 34 <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> 35 --> 36 37 <!-- 使用 .capture实现捕获触发事件的机制 --> 38 <!-- <div class="inner" @click.capture="div1Handler"> 39 <input type="button" value="戳他" @click.stop="btnHandler"> 40 </div> --> 41 42 <!-- 使用.self 实现职业点击当前元素时候，才会触发事件处理函数 --> 43 <!-- <div class="inner" @click.self="div1Handler"> 44 <input type="button" value="戳他" @click.stop="btnHandler"> 45 </div> --> 46 47 <!-- 使用 .once 只触发一次事件处理函数 --> 48 <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> --> 49 50 51 <!-- 演示： .stop 和 .self的区别 --> 52 <!-- <div class="outer" @click="div2Handler"> 53 <div class="inner" @click="div1Handler"> 54 <input type="button" value="戳他" @click.stop="btnHandler"> 55 </div> 56 </div> --> 57 58 <!-- .self只会阻止自己身上冒泡行文的触发，并不会真正阻止冒泡的行为 --> 59 <!-- <div class="outer" @click="div2Handler"> 60 <div class="inner" @click.self="div1Handler"> 61 <input type="button" value="戳他" @click="btnHandler"> 62 </div> 63 </div> --> 64 65 66 </div> 67 <script> 68 //创建Vue实例，得到ViewModel 69 var vm = new Vue( 70 el:"#app", 71 data:, 72 methods: 73 div1Handler() 74 console.log(‘这是触发了 inner div 的点击事件‘) 75 , 76 btnHandler() 77 console.log(‘这是触发了 btn 按钮 的点击事件‘) 78 , 79 linkClick() 80 console.log(‘触发了链接的点击事件‘) 81 , 82 div2Handler() 83 console.log(‘触发了 outer div 的点击事件‘) 84 85 86 ); 87 88 </script> 89 </body> 90 </html>
以上是关于第二章 Vue快速入门--12 事件修饰符的介绍的主要内容，如果未能解决你的问题，请参考以下文章