阻止单击事件冒泡 
<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事件修饰符的更多相关文章

  1. Vue—事件修饰符

    Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...

  2. vue事件修饰符(once:prev:stop)

    vue事件修饰符(once:prev:stop) stop修饰符  效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...

  3. Vue2.0学习笔记:Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

  4. Vue事件修饰符详解

    整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...

  5. vue事件修饰符与按钮修饰符

    事件修饰符:(当事件无需传参数时可直接写成以下形式,有参数时则为@click.stop="handleLiClick($event)") stop:阻止事件冒泡行为(子元素被点击, ...

  6. vue 事件修饰符(阻止默认行为和事件冒泡)

    1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...

  7. 对官网vue事件修饰符串联的顺序如何理解?

    官网有一个提醒:使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent ...

  8. Vue事件修饰符,.capture关键字详解

    .prevent 用于阻止默认事件,点击a标签href可以打开相应的链接,那么给事件加    上此关键字,click.prevent .capture 冒泡顺序    例如 div1中嵌套div2中嵌 ...

  9. vue 事件修饰符

    1.用.stop来阻止冒泡(点击click按钮之后,先执行clickBtn2方法,然后执行clickBtn1方法,.stop命令阻止了clickBtn1方法的执行) 2.使用.prevent命令来阻止 ...

随机推荐

  1. 深入理解python装饰器

    写在前面,参考文章链接: 1.博客园(https://www.cnblogs.com/everzin/p/8594707.html) 2.公众号文章 装饰器是什么,什么时候会用到装饰器呢? 写代码要遵 ...

  2. CentOS下TensorFlow安装命令

    安装扩展源:sudo yum -y install epel-release 安装python-pip模块:sudo yum install python-pip 直接把whl文件download下来 ...

  3. 【转】子类会调用父类的@PostConstruct方法

    如果一个类用@Service或@Component,那么只需要用@PostConstruct修饰某个方法,该方法能在类实例化的过程中自动执行,相当于类的构造函数.同时,具备了构造函数不具备的功能. @ ...

  4. Apollo与ROS

    Apollo项目基于ROS,但是对其进行了改造,主要包括下面三个方面: 通信性能优化 去中心化网络拓扑 数据兼容性扩展 通信性能优化 自动驾驶车辆中包含了大量的传感器,这些传感器可能以非常高频的速度产 ...

  5. Java模仿http请求工具类

    package ln; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRea ...

  6. FreeBSD 与中文

    $ setenv LC_ALL en_US.UTF- 然后用 locale 检查 en_US 不是重点,重点是 UTF-8 . 然后用 putty,原因是默认终端又没有中文字体...然后就能输入输出中 ...

  7. DAY1 VS2017&CUDA10.01环境搭建

    Visual Studio工程配置情况: VC++目录配置: C:\ProgramData\NVIDIA Corporation\CUDA Samples\v10.\common\lib\x64 C: ...

  8. Hadoop的数据压缩

    一.Hadoop的数据压缩 1.概述 在进行MR程序的过程中,在Mapper和Reducer端会发生大量的数据传输和磁盘IO,如果在这个过程中对数据进行压缩处理,可以有效的减少底层存储(HDFS)读写 ...

  9. 如何在电脑上配置两个tomcat

    问题 准备逐渐转向idea的怀抱了,每次部署项目时和eclipse使用的都是同一个tomcat,这是很大的隐患,并且非常的不方便,遂再配置一个tomcat 1.下载tomcat和配置系统变量 CATA ...

  10. CodeForces 510C Fox And Names (拓扑排序)

    <题目链接> 题目大意: 给你一些只由小写字母组成的字符串,现在按一定顺序给出这些字符串,问你怎样从重排字典序,使得这些字符串按字典序排序后的顺序如题目所给的顺序相同. 解题分析:本题想到 ...