第二章 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 ...
随机推荐
- 奥比中光Astra Pro的使用(1)
在ubuntu上的使用 首先下载SDK以及OpenNI安装包,下载地址: 解压两个安装包 切换目录到AstraSDK-Linux下的install目录,并输入命令:sudo sh ./install. ...
- Node KOA框架入门
KOA: v1 generator v2 过渡版 generator&async v3 async/await koa koa不带路由 因此得cnpm i koa-router -D 路由:1 ...
- Kafka主题体系架构-复制、故障转移和并行处理
本文讨论了Kafka主题的体系架构,讨论了如何将分区用于故障转移和并行处理. Kafka主题,日志和分区 Kafka将主题存储在日志中.主题日志分为多个分区.Kafka将日志的分区分布在多个服务器或磁 ...
- NIKKEI Programming Contest 2019-2 Task D. Shortest Path on a Line
Observations ① 从 $1$ 到 $N$ 的最短路一定是不走回头路的.所谓走回头路是指从序号大的点走到序号小的点. 证明:首先,任意从 $1$ 到 $N$ 的路径的最后一步一定不是回头路. ...
- VC++ 窗口透明化及透明窗口上绘画、截图、轨迹
源文件:https://files.cnblogs.com/files/MrFengD/Temp.rar
- 经验：什么影响了数据库查询速度、什么影响了MySQL性能 （转）
一.什么影响了数据库查询速度 1.1 影响数据库查询速度的四个因素 1.2 风险分析 QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定 ...
- java——包装类数据缓存 ==号详解
Java对部分经常使用的数据采用缓存技术,即第一次使用该数据则创建该数据对象并对其进行缓存, 当再次使用等值对象时直接从缓存中获取,从而提高了程序执行性能.(只对常用数据进行缓存) Java中只是对部 ...
- Cannot call sendRedirect() after the response has been committed的解决办法
做一个Login Demo的时候,写了如下代码: protected void doPost(HttpServletRequest request, HttpServletResponse respo ...
- swagger 报错打不开
1.controller中的接口里使用的 qto的数据类型有问题: qo中的字段中缺少:(@JsonProperty(value = "sort"),以及定义的example值的格 ...
- Unable to load the specified metadata resource
本地运行都正常,就是发布到服务器上不行,查找了一些文章,都没解决我的问题,后来发现是路径不对和文件缺失. 原来的配置文件中是这样的: <add name="TRidentityEnti ...