vue事件修饰符
阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>
提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
只有修饰符
<form v-on:submit.prevent></form>
添加事件侦听器时使用时间捕获模式
<div v-on:click.capture="doThis">...</div>
只当事件在该元素本身(而不是子元素)触发时触发回调
<div v-on:click.self="doThat">...</div>
全部的按键别名: .enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
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事件修饰符串联的顺序如何理解?
官网有一个提醒:使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent ...
- Vue事件修饰符,.capture关键字详解
.prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加 上此关键字,click.prevent .capture 冒泡顺序 例如 div1中嵌套div2中嵌 ...
- vue 事件修饰符
1.用.stop来阻止冒泡(点击click按钮之后,先执行clickBtn2方法,然后执行clickBtn1方法,.stop命令阻止了clickBtn1方法的执行) 2.使用.prevent命令来阻止 ...
随机推荐
- 深入理解python装饰器
写在前面,参考文章链接: 1.博客园(https://www.cnblogs.com/everzin/p/8594707.html) 2.公众号文章 装饰器是什么,什么时候会用到装饰器呢? 写代码要遵 ...
- CentOS下TensorFlow安装命令
安装扩展源:sudo yum -y install epel-release 安装python-pip模块:sudo yum install python-pip 直接把whl文件download下来 ...
- 【转】子类会调用父类的@PostConstruct方法
如果一个类用@Service或@Component,那么只需要用@PostConstruct修饰某个方法,该方法能在类实例化的过程中自动执行,相当于类的构造函数.同时,具备了构造函数不具备的功能. @ ...
- Apollo与ROS
Apollo项目基于ROS,但是对其进行了改造,主要包括下面三个方面: 通信性能优化 去中心化网络拓扑 数据兼容性扩展 通信性能优化 自动驾驶车辆中包含了大量的传感器,这些传感器可能以非常高频的速度产 ...
- Java模仿http请求工具类
package ln; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRea ...
- FreeBSD 与中文
$ setenv LC_ALL en_US.UTF- 然后用 locale 检查 en_US 不是重点,重点是 UTF-8 . 然后用 putty,原因是默认终端又没有中文字体...然后就能输入输出中 ...
- DAY1 VS2017&CUDA10.01环境搭建
Visual Studio工程配置情况: VC++目录配置: C:\ProgramData\NVIDIA Corporation\CUDA Samples\v10.\common\lib\x64 C: ...
- Hadoop的数据压缩
一.Hadoop的数据压缩 1.概述 在进行MR程序的过程中,在Mapper和Reducer端会发生大量的数据传输和磁盘IO,如果在这个过程中对数据进行压缩处理,可以有效的减少底层存储(HDFS)读写 ...
- 如何在电脑上配置两个tomcat
问题 准备逐渐转向idea的怀抱了,每次部署项目时和eclipse使用的都是同一个tomcat,这是很大的隐患,并且非常的不方便,遂再配置一个tomcat 1.下载tomcat和配置系统变量 CATA ...
- CodeForces 510C Fox And Names (拓扑排序)
<题目链接> 题目大意: 给你一些只由小写字母组成的字符串,现在按一定顺序给出这些字符串,问你怎样从重排字典序,使得这些字符串按字典序排序后的顺序如题目所给的顺序相同. 解题分析:本题想到 ...