第二章 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 ...
随机推荐
- Nmap之用法
简介 Nmap是一款开源免费的网络发现(Network Discovery)和安全审计(Security Auditing)工具.软件名字Nmap是Network Mapper的简称. 功能架构图 N ...
- 【DSP开发】DSP通用并行端口uPP
这是翻译TI官方文档<KeyStone Architecture Universal Parallel Port (uPP)>SPRUHG9有关通用并行端口uPP的内容(除寄存器部分) ...
- C#对IQueryable<T>、IEnumerable<T>的扩展方法
#region IQueryable<T>的扩展方法 #region 根据第三方条件是否为真是否执行指定条件的查询 /// <summary> /// 根据第三方条件是否为真是 ...
- Centos7源码安装Apache和PHP
源码安装Apache 安装需要的依赖 yum -y install gcc autoconf automake make pcre pcre-devel openssl openssl-devel# ...
- 第五周课程总结&实验报告（四）
第五周课程总结 本周主要学习了 1.抽象类 抽象类的定义格式 abstract class抽象类名称{ 属性; 访问权限返回值类型方法名称(参数){ //普通方法 [return返回值]; } 访问权 ...
- springboot整合httpClient
创建httpClientConfig配置类 @Configuration @PropertySource(value="classpath:/properties/httpClient.pr ...
- 洛谷 P4198 楼房重建 题解
题面 首先你要知道题问的是什么:使用一种数据结构,动态地维护以1为起点地最长上升子序列(把楼房的高度转化成斜率地序列)的长度: 怎么做?线段树! 我们在线段树上维护两个东西:1.这个区间内斜率的最大值 ...
- js gridview中checkbox的全选与全不选
1.html: <asp:GridView runat="server" ID="gvAddBySR" AutoGenerateColumns=" ...
- 前端imageBuffer设置图片src（后端返回二进制流图片）
参考地址1:前端imageBuffer设置图片src(后端到前端直传buffer) 参考地址2:axios根据流生成图片 本质为buffer转base64 // 获取项目截图 getItemPic() ...
- jeesite直接登录——真实破解
前台 后台 @RequiresPermissions("alarm:alarm:view")一定要注释 —————————————————————————————————————— ...