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弹出层插件简化版代码下载
Oct 16 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
vant实现购物车功能
Jun 29 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 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php时间戳转换的示例
2014/03/31 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
python 布尔操作实现代码
2013/03/23 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
华为慧通笔试题
2016/04/22 面试题
C/C++程序员常见面试题二
2015/11/19 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
大学生怎样写好自荐信
2014/02/25 职场文书
创文明城市标语
2014/06/16 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
毕业生政审意见范文
2015/06/04 职场文书
孕妇病假条怎么写
2015/08/17 职场文书