27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
<!--默认是从里向外冒泡响应事件,从子级->父级元素响应事件,-->
<div @click="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转,stop是阻止从里向外冒泡响应事件,父级的事件不执行-->
<a href="https://www.cnblogs.com/haima" @click.prevent="links">从里向外冒泡响应事件</a>
</div>
<br>
<!--capture捕获事件,从父级->子级元素响应事件,-->
<div @click="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转,stop是阻止从里向外冒泡响应事件,父级的事件不执行-->
<a href="https://www.cnblogs.com/haima" @click.stop.prevent="links">阻止从里向外冒泡响应事件,阻止点击a连接跳转</a>
</div>
<br>
<!--self点到自己才触发事件,点谁谁响应事件-->
<div @click.self="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转,由于父级加了self,所以就不会向上冒泡响应事件,效果同上面的stop-->
<a href="https://www.cnblogs.com/haima" @click.prevent="links">父级加self,阻止a标签冒泡响应事件,点谁谁响应事件</a>
</div>
<br>
<!--capture捕获事件,从父级->子级元素响应事件,-->
<div @click.capture="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转-->
<a href="https://www.cnblogs.com/haima" @click.prevent="links">从父级->子级元素响应事件</a>
</div>
<br>
<!--once是只绑定一次跳转-->
<div @click="box" :style="{border:'solid 2px red'}">
<!--prevent是阻止点击a连接跳转-->
<a href="https://www.cnblogs.com/haima" @click.once.stop.prevent="links">从父级->子级元素响应事件</a>
</div>
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {},
methods: {
box(){
alert('div');
},
links(){
alert('www.cnblogs.com/haima');
}
}
});
</script>
</body>
</html>
效果:
27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解的更多相关文章
- vue学习(六) 事件修饰符 stop prevent capture self once
//html <div id="app"> <div @click="divHandler" style="height:150px ...
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- vue指令与事件修饰符
一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...
- vue中的事件修饰符
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
- 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue指令之事件修饰符
事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...
- 怎样在 Vue 中使用 事件修饰符 ?
Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...
- （二）咋使用VUE中的事件修饰符
1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...
随机推荐
- URAL 2080 Wallet
找规律发现只要找到两个相同数字之间,有多少个不同的数字,即为答案. 可以用树状数组离线处理. 坑点是卡有很多张,没用完的情况,后面的卡直接放在哪里, 就是 10 5 1 2 3 4 5 这样 开始数据 ...
- Sqoop Export HDFS
Sqoop Export应用场景——直接导出 直接导出 我们先复制一个表,然后将上一篇博文(Sqoop Import HDFS)导入的数据再导出到我们所复制的表里. sqoop export \ -- ...
- IO缓冲流
目录 IO缓冲流 缓冲流 基本原理 字节缓冲流 字符缓冲流 IO缓冲流 缓冲流也叫高效流,能够更高效的进行读取: 转换流:能够进行编码转换 序列化流:持久化存储对象 缓冲流 缓冲流--就是对应4个Fi ...
- ORA-29875 出现问题解决办法
出现问题:Underlying DBMS error [ORA-29875: 无法执行 ODCIINDEXINSERT 例行程序ORA-20085: Insert Spatial Reference ...
- 一般处理程序ashx
在用户列表中链接数据库 在这里Html只管做Post 请求,其他逻辑全部交给ashx 其中修改需要隐藏域 1.展现列表 public void ProcessRequest (HttpContext ...
- Sublime Text插件列表
本文由 伯乐在线 - 艾凌风 翻译,黄利民 校稿.英文出处:ipestov.com.欢迎加入翻译组. 本文收录了作者辛苦收集的Sublime Text最佳插件,很全. 最佳的Sublime Text ...
- SSM整合笔记
SSM整合笔记 1,创建maven项目 创建maven项目过程省略 ps:如果创建完maven项目之后项目报错,可能是没有配置Tomcat 2,在pom.xml里面导入相应的jar的依赖 <pr ...
- MATLAB之折线图、柱状图、饼图以及常用绘图技巧
MATLAB之折线图.柱状图.饼图以及常用绘图技巧 一.折线图 参考代码: %图1:各模式直接成本预测 %table0-table1为1*9的数组,记录关键数据 table0 = data_modol ...
- Spring MVC中注解的简介
参考网址: https://blog.csdn.net/a67474506/article/details/46361195 @RequestMapping映射请求 SpringMVC 使用 @Re ...
- Spring MVC + Thymeleaf
参考网址: https://www.cnblogs.com/litblank/p/7988689.html 一.简介 1.Thymeleaf 在有网络和无网络的环境下皆可运行,而且完全不需启动WEB应 ...