第二章 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>

原文地址:https://www.cnblogs.com/songsongblue/p/10987230.html

时间: 2024-11-01 15:08:05

第二章 Vue快速入门--12 事件修饰符的介绍的相关文章

第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

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

第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

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

第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

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

第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

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

第二章 Vue快速入门--7 讲解v-cloak、v-text、v-html的基本使用

7 讲解v-cloak.v-text.v-html的基本使用 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 <tit

第二章 Vue快速入门--8 v-bind指令的学习

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

第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

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

Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter

1.绑定监听@click: (以监听click为例,其他如keyup,用法类似)  v-on:click="fun"  @click="fun"  @click="fun(参数)" <button @click="test1">test1</button> <button @click="test2('abc')">test2</button> <but

懂一点前端—Vue快速入门

01. 什么是 Vue Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架,是当下很火的一个 JavaScript MVVM 库,是以 数据驱动和组件化 的思想构建的. MVVM 模式简述 下图不仅概括了 MVVM 模式 (Model-View-ViewModel),还描述了在 Vue.js 中 ViewModel 是如何和 View 以及 Model 进行交互的. ViewModel 是 Vue.js 的核心,它是一个 Vue 实例.Vue 实例是作用于某一个