第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<!-- <script src="./lib/vue-2.6.10.js"></script> -->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.inner{
height: 150px;
background-color: darkcyan;
} .outer{
padding: 40px;
background-color: red;
}
</style> </head> <body> <div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> --> <!-- 使用 .prevent阻止默认行为 -->
<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
--> <!-- 使用 .capture实现捕获触发事件的机制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> --> <!-- 使用.self 实现只要点击当前元素时候，才会触发事件处理函数 -->
<!-- <div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> --> <!-- 使用 .once 只触发一次事件处理函数 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> --> <!-- 演示： .stop 和 .self的区别 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div> --> <!-- .self只会阻止自己身上冒泡行文的触发，并不会真正阻止冒泡的行为 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div> --> </div>
<script>
//创建Vue实例，得到ViewModel
var vm = new Vue({
el:"#app",
data:{},
methods:{
div1Handler(){
console.log('这是触发了 inner div 的点击事件')
},
btnHandler(){
console.log('这是触发了 btn 按钮 的点击事件')
},
linkClick(){
console.log('触发了链接的点击事件')
},
div2Handler(){
console.log('触发了 outer div 的点击事件')
}
}
}); </script>
</body>
</html>
第二章 Vue快速入门--12 事件修饰符的介绍的更多相关文章
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 第二章 Vue快速入门-- 27 字符串的padStart方法使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- Spring IoC的形象化理解
1.IoC(控制反转) 首先想说说IoC(Inversion of Control,控制反转).这是spring的核心,贯穿始终.所谓IoC,对于spring框架来说,就是由spring来负责控制对象 ...
- 制作VB项目打包工具与安装程序
该原因起于错误429. 当然比起自制我更推荐使用其他的功能完整的打包软件. 犹豫各种原因,导致三分钟热情被浇灭...本来想划四个部分详细讲教程的,大家看成品源码就好了,心好累. http://www. ...
- day25 多继承、接口、抽象类、鸭子类型
今日内容: 如何查看对象的名称空间及对象名 继承的另一种使用 单继承与多继承 经典类与新式类 mro列表 菱形继承 接口 抽象类 鸭子类型 1.查看名称空间包含的变量: 使用类或对象名.__dict_ ...
- 生成器的send方法、递推函数、匿名函数及常用内置函数
生成器的send方法 在使用yield方法创建生成器时,不仅可以使用next方法进行取值,还可以通过send方法向生成器的内部传值 什么是send方法? send方法相当于高级的next方法,send ...
- SpringBoot配置文件可存放位置和加载顺序
使用IDEA创建一个spring初始化项目后.默认的配置文件在resources文件夹下. SpringBoot启动时,会扫描application.properties或application.ym ...
- xtrabackup备份失败（error writing file 'UNOPENED'）
xtrabackup备份失败 解决了,是因为limit open files值设置太小了 (3)修改资源限制参数 vi /etc/security/limits.conf nproc:用户创建进程数限 ...
- 老贾的幸福生活day 04
变量 变量名的规则: 变量名由字母,数字,下划线组成 变量名不能以数字开头 变量名要具有可描述性 变量名要区分大小写 变量名禁止使用python关键字 变量名不能使用中文和拼音 变量名推荐写法: 驼峰 ...
- 【动态规划】subsequence 1
题目链接:https://ac.nowcoder.com/acm/contest/885/G 题意: 两个串,s t,求s的所有子串中大于 t 的数目 题解: dp[i][j] 表示 s的前i个, ...
- IDEA将项目打包为指定class文件的jar
转自:https://blog.csdn.net/makang456/article/details/86699375 [背景] 公司最近要和某大公司合作,将本公司的产品提供给其它公司单独部署 ...
- java——HashSet中add（）方法不能加重复值得原因理解（我们一起来看底层代码吧）
Set<String> names = new HashSet<>(); names.add("张三"); names.add(new String(&qu ...