第二章 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 ...
随机推荐
- BiGAN的复现
数据集是10000个样本,前8000个训练集,后面的用来测试.每个样本是1*144(重构成12*12的矩阵),将原始BiGAN有编码器.判别器和生成器,将里面的全连接层全部替换成了卷积. from _ ...
- nginx多线程高并发
直接上图 Master-Worker模式 1.Nginx 在启动后,会有一个 master 进程和多个相互独立的 worker 进程. 2.接收来自外界的信号,向各worker进程发送信号,每个进程都 ...
- python------模块基础【第二部分-time】------
一.time UTC/GMT:世界时间 本地时间:本地时区时间 python中时间日期格式化符号: %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01- ...
- MHA原理及搭建
MYSQL5.7下搭建MHA 环境说明 在主机1,主机2,主机3上安装MySQL服务端和客户端. 主机1 主机2 主机3 操作系统 CentOS7.4 CentOS7.4 CentOS7.4 主机名 ...
- PyQt5创建多线程
参阅: https://blog.csdn.net/chengmo123/article/details/96477103 https://www.cnblogs.com/zhuminghui/p/9 ...
- 怎样理解 instanceof
instanceof 运算符用来判断一个对象在其原型链中是否存在一个构造函数的 prototype 属性. 也就是说, instanceof 判断的实际上是某个对象是否为某个构造函数的实例, 因为es ...
- python操作MySQL数据库(转)
先来一个简单的例子吧: ? 1 2 3 4 5 6 7 8 9 10 import MySQLdb try: conn=MySQLdb.connect(host='localhost',u ...
- 向PHP使用Post方式上传文件
欢迎访问我的个人博客,获取更多有用的东西 链接一 链接二 也可以关注我的微信订阅号:CN丶Moti 1.post-file.html form表单提交方式一定要是post,而且添加属性enctype= ...
- sql的关键字
整理一下sql的关键字,一直都在用,只是很少去整理,所以今天简单整理一下,主要是整理CRUD的一些关键字. 写在前面:sql 不区分大小写 select 简单查询语句 select columnNam ...
- 记 Win10 - Archlinux - Archlinux(Emergency) 三系统安装/配置注意事项
起因是正常使用的archlinux做滚动更新,结果貌似有一个盘块写坏了(?). 手上没有U盘,进入不了linux,不好做fsck.于是直接就直接用win10了. 取消Fast Boot 当晚进入lin ...