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 相关文章推荐
JQuery从头学起第三讲
Jul 06 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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
php简单实现sql防注入的方法
2016/04/22 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
详解Python字典小结
2018/10/20 Python
Python Cookie 读取和保存方法
2018/12/28 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
校园招聘策划书
2014/01/09 职场文书
公司合作意向书范文
2014/07/30 职场文书
2014年宣传工作总结
2014/11/18 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书