1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>事件修饰符介绍</title> 8 </head> 9 <style> 10 .inner { 11 width: 200px; 12 height: 200px; 13 background-color: aqua; 14 } 15 </style> 16 17 <body> 18 <div id="app"> 19 <!-- stop----阻止冒泡事件 --> 20 <!-- self 当事件应该在元素本身(比如不是子元素)触发时回调 --> 21 <!-- once事件只触发一次 --> 22 <div class="inner" @click.self="divinner"> 23 24 <!-- <input type="button" value="点我啊" @click.stop="nobady"> --> 25 <button @click="diandi">点点滴滴</button> 26 <button @click.once="Clickonce">只触发一次</button> 27 </div> 28 <!-- 阻止默认事件 --> 29 <a href="https://www.baidu.com" @click.prevent="preventclick">点击我</a> 30 </div> 31 <script src="../js/vue.js"></script> 32 <script> 33 var vm = new Vue({ 34 el: '#app', 35 data: { 36 37 }, 38 methods: { 39 divinner() { 40 console.log("我是最外层盒子...喵喵...") 41 }, 42 nobady() { 43 console.log('我是一只猫--呜呜....') 44 }, 45 preventclick(){ 46 console.log('我是一只猫---呜呜...') 47 }, 48 diandi(){ 49 console.log('点点滴滴') 50 }, 51 Clickonce(){ 52 console.log("只触发一次...") 53 } 54 } 55 }) 56 </script> 57 </body> 58 59 </html>