vue触发事件的五个关键字
v-on
vue中提供了v-on事件绑定
v-on:click='函数';
v-on可以使用@代替
vue 五个触发事件关键字
.stop 用于阻止冒泡
例如 div1中嵌套div2,且两个div都有点击事件,那么在点击div2时会触发div1的
点击事件.click.stop可以阻止所有冒泡
.prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加
上此关键字,click.prevent
.capture 冒泡顺序
例如 div1中嵌套div2中嵌套div3
<div id="app" v-on:click="show">
1
<div id="app2" v-on:click.capture="show2">
2
<div id="app3" v-on:click="show3">
3
</div>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
},
methods:{
show:function(){
console.log("这是app的方法")
},
show2:function(){
console.log("这是app2的方法")
},
show3:function(){
console.log("这是app3的方法")
}
}
})
</script>
此处的代码因为div2有capture关键字,所以此时冒泡的顺序发生了改变
正常情况下:
点击div3一层一层冒泡,先div3=》div2=》div1
使用了关键字:
点击div3时,先div2=》div3=》div1
1.先冒泡外层带有关键字的事件
2.外层执行结束之后,往里层执行事件
3.最后按照从里向外的事件开始执行
就是说只要存在一个capture关键字,就会影响整个嵌套的执行
例子
div1中嵌套div2中嵌套div3.capture中嵌套div4
此时点击div1
先执行带有capture的div3
然后执行div4
最后按照从里向外的顺序执行
顺序就是 div3=》div4=》div2=》div1
其他疑惑
此时嵌套为
div1中嵌套div2.capture中嵌套div3中嵌套div4
那么可以想一下点击最里层的div4会怎么触发呢
1.触发带有关键字的 div2
2.触发点击的div4
3.最后从里向外执行
那么顺序为 div2=》div4=》div3=》div1
.self关键字阻止冒泡或者当点击自身才触发
stop阻止除了自己以外所有的事件触发
self加给想要阻止冒泡的或想要去单独点击它才触发的对象上
.onec 只触发一次,再点击无效果
vue触发事件的五个关键字的更多相关文章
- Vue.js之下拉列表及选中触发事件
老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...
- Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件
<!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...
- 在子组件中触发事件,传值给父组件-vue
1.通过$emit触发事件 在子组件<x-test>中触发事件: <button @click="toSearchProduct()">搜索</but ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- Vue基础系列(五)——Vue中的指令(中)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- javaScript事件(五)事件类型之鼠标事件
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...
- Vue自定义事件
前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- vue click事件获取当前元素属性
Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...
随机推荐
- CF思维联系– Codeforces-990C Bracket Sequences Concatenation Problem(括号匹配+模拟)
ACM思维题训练集合 A bracket sequence is a string containing only characters "(" and ")" ...
- P2620 虫洞
题目背景 applepi 想进行宇宙旅行.当然,applepi 知道这是有可能的,因为applepi 的特殊能力能使他观测到宇宙中的虫洞.所谓虫洞就是一个在三维之外的维度打开的快捷通道,通过虫洞能够从 ...
- VMware15.5.0安装MacOS10.15.0系统 安装步骤(下)
VMware15.5.0安装MacOS10.15.0系统安装步骤(下)超详细! 接上文第5条如果没看过上篇的话传送门:https://www.cnblogs.com/Top-chen/p/128024 ...
- zabbix监控nginx日志状态码
监控需求 监控Nginx常见的状态码并对其进行监控,对常见的错误状态码创建相对应的触发器以下按照分钟对数据进行抓取 Zabbix_Agentd创建监控脚本 1)创建脚本之前核对Nginx日志格式我这里 ...
- CSS设计超链接样式
\(\color{Red}{首先设计一下静止的a标签}\) a{ margin-right:10px;/*右边距,其他边距同理*/ border-bottom:1px solid #eec/*分别是下 ...
- Spring Cloud学习 之 Spring Cloud Hystrix(使用详解)
文章目录 创建请求命令: 定义服务降级: 异常处理: 异常传播: 异常获取: 命令名称,分组以及线程池划分: 创建请求命令: Hystrix命令就是我们之前说的HystrixCommand,它用来 ...
- Mysql常用sql语句(13)- having 过滤分组结果集
测试必备的Mysql常用sql语句,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1683347.html 前言 ...
- [hdu4552]最长公共前缀
题意:给一个串s,求s的每个前缀出现次数之和. 思路:对于一个后缀i,设i和原串的最长公共前缀为k,则当前总共可以产生k个答案.因此原题转化为求所有后缀与原串的最长公共前缀之和.模板题.以下为通过模板 ...
- Jmeter-Throughput Controller 吞吐量控制器
比如在压测是时候,我设置了100个线程组,循环2次,那么我想根据吞吐量进行并发请求,这时候可以用到这个吞吐量控制器 PercentExecutions:按执行次数的百分比来计算执行次数,Through ...
- sqli-labs之Page-4
第五十四关 题目给出了数据库名为challenges. 这一关是依旧字符型注入,但是尝试10次后,会强制更换表名等信息.所以尽量在认真思考后进行尝试 爆表名 ?id=-1' union select ...