vue事件修饰符和按键修饰符用法总结


Posted in Javascript onJuly 25, 2017

之前关于vue事件修饰符和按键修饰符的一点分析,最近需要回顾,就顺便发到随笔上了

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.prevent
.capture
.self
.once
<div @click='doThis' style="width:100px;height: 100px; background: red;">
  点击父元素
 <a v-on:click.stop="doThis">点击子元素
 </a>
 </div>

当点击父元素的时候,执行doThis,当点击子元素a的时候,这个点击动作不单单触发了a标签,同时也触发了div标签,这就是事件冒泡,所以假设上述例子中a标签为v-on:click='doThis',则doThis会被执行两次,父元素和子元素都执行了一次click事件,而.stop则是阻止事件冒泡,再次点击a标签,click事件只会执行一次

按键修饰符

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

全部的按键别名:

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用 v-on:keyup.f1 
Vue.config.keyCodes.f1 = 112

按键修饰符

2.1.0 新增

可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应。

.ctrl
.alt
.shift
.meta

注意:在Mac系统键盘上,meta对应命令键 (⌘)。在Windows系统键盘meta对应windows徽标键(⊞)。在Sun操作系统键盘上,meta对应实心宝石键 (◆)。在其他特定键盘上,尤其在MIT和Lisp键盘及其后续,比如Knight键盘,space-cadet键盘,meta被标记为“META”。在Symbolics键盘上,meta被标记为“META” 或者 “Meta”。

例如:

Alt + C

<input @keyup.alt.67="clear">

Ctrl + Click

<div @click.ctrl="doSomething">Do something</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现self的resend
Jul 22 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 #Javascript
ES6正则表达式扩展笔记
Jul 25 #Javascript
简单实现js拖拽效果
Jul 25 #Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 #Javascript
基于jquery实现多级菜单效果
Jul 25 #jQuery
关于TypeScript中import JSON的正确姿势详解
Jul 25 #Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
jquery replace方法去空格
2017/05/08 jQuery
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python快速排序算法实例分析
2017/11/29 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
详解Python的三种可变参数
2019/05/08 Python
关于Python作用域自学总结
2019/06/10 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
村容村貌整治方案
2014/05/21 职场文书
法制主题班会教案
2015/08/13 职场文书
mysql 子查询的使用
2022/04/28 MySQL