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>