对官网vue事件修饰符串联的顺序如何理解?
官网有一个提醒:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。
@click.prevent.self =“c” 总是先执行prevent,无论是内部元素还是本身元素触发,他都会prevent默认事件。只不过只有当你点击a元素的时候,才会触发c事件,因此会阻止所有的点击
@click.self.prevent =“c” 当你点击的元素是a的时候,才会prevent默认事件,而且执行c事件,因此只会阻止对元素自身的点击。
对官网vue事件修饰符串联的顺序如何理解?的更多相关文章
- Vue—事件修饰符
Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...
- vue事件修饰符(once:prev:stop)
vue事件修饰符(once:prev:stop) stop修饰符 效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...
- Vue2.0学习笔记:Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...
- vue事件修饰符与按钮修饰符
事件修饰符:(当事件无需传参数时可直接写成以下形式,有参数时则为@click.stop="handleLiClick($event)") stop:阻止事件冒泡行为(子元素被点击, ...
- vue 事件修饰符(阻止默认行为和事件冒泡)
1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...
- vue事件修饰符
阻止单击事件冒泡 <a v-on:click.stop="doThis"></a>提交事件不再重载页面<form v-on:submit.preven ...
- Vue事件修饰符,.capture关键字详解
.prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加 上此关键字,click.prevent .capture 冒泡顺序 例如 div1中嵌套div2中嵌 ...
- vue 事件修饰符
1.用.stop来阻止冒泡(点击click按钮之后,先执行clickBtn2方法,然后执行clickBtn1方法,.stop命令阻止了clickBtn1方法的执行) 2.使用.prevent命令来阻止 ...
随机推荐
- 【Zookeeper】实现哨兵机制(选举策略)
一.Master选举使用场景及结构 二.代码实现 2.1 Maven依赖信息 2.2 IndexController 2.3 MyApplicationRunner 2.4 ElectionMaste ...
- Liunx-tail命令
1. 实时刷新tail -f /var/log/messages 2. 实时刷新最新500条log tail -500f /var/log/messages 3. tail -n 20 catali ...
- Netty4实现JTT809对接
网上的使用的netty版本过老,最近自己接触到这一块,重新写了一个 服务器流程 1,判定报文起始和结束标识 ,2去掉头尾标识进行转义,3,去掉CRC码进行CRC计算,4读取报文头,(5,如果加密则解密 ...
- 图卷积神经网络(GCN)入门
图卷积网络Graph Convolutional Nueral Network,简称GCN,最近两年大热,取得不少进展.不得不专门为GCN开一个新篇章,表示其重要程度.本文结合大量参考文献,从理论到实 ...
- ggplot2入门与进阶(上)
出处:http://www.cellyse.com/how_to_use_gggplot2_part1/ ggplot2包是基于Wilkinson在<Grammar of Graphics> ...
- React 新特性学习
1 context 2 contextType 3 lazy 4 suspense 5 memo 6 hooks 7 effect hooks =========== 1 Context 提供了一种方 ...
- nginx 重发机制导致的重复扣款问题
问题: nginx 重发机制导制重复提交(客户还款,被扣俩笔款,前端调用一次,后端执行2次) proxy_next_upstream 语法: proxy_next_upstream error ...
- "Class does not support Automation or does not support expected interface"数据库连接错误问题分析与解决
1,故障现象 本人编译的英文版程序在本机上运行OK,换台电脑运行,发现启动时连接数据库出错. 错误信息如下: --------------------------- Error start datab ...
- [hdoj4578][多延迟标记的线段树]
Transformation Time Limit: 15000/8000 MS (Java/Others) Memory Limit: 65535/65536 K (Java/Others)T ...
- Windows服务启动时候报错1053
用.net 开发了一个C#语言的windows服务,在本地和测试环境,安装启动都正常,在新的线上环境报错,不能启动-报出-错误1053:服务没有及时响应启动或控制请求. 后来发现时线上.NET FRA ...