VueJS事件处理器v-on:事件修饰符&按键修饰符
事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<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> <!-- click 事件至少触发一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<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
.ctrl
.alt
.shift
.meta
实例
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
VueJS事件处理器v-on:事件修饰符&按键修饰符的更多相关文章
- Vue样式绑定和事件处理器
一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...
- Qt中事件处理的方法(三种处理方法,四种覆盖event函数,notify函数,event过滤,事件处理器。然后继续传递给父窗口。可观察QWidget::event的源码,它是虚拟保护函数,可改写)
一.Qt中事件处理的方式 1.事件处理模式一 首先是事件源产生事件,最后是事件处理器对这些事件进行处理.然而也许大家会问, Qt中有这么多类的事件,我们怎么样比较简便的处理每个事件呢?设想,如果是 ...
- ASP.NET Core Web API下事件驱动型架构的实现(二):事件处理器中对象生命周期的管理
在上文中,我介绍了事件驱动型架构的一种简单的实现,并演示了一个完整的事件派发.订阅和处理的流程.这种实现太简单了,百十行代码就展示了一个基本工作原理.然而,要将这样的解决方案运用到实际生产环境,还有很 ...
- QT中事件处理器和事件过滤器实现实例
Qt中事件处理的方式,最常用的就是使用事件处理器(event handler)和事件过滤器(event filter)这两种方法.接下来,我们就来看看事件处理器和事件过滤器是怎么使用的. 事件处理器 ...
- SAP CRM和Cloud for Customer中的Event handler(事件处理器)
SAP CRM可以在开发工具中用右键直接创建一个新的事件处理器: 这些事件处理器实际上就是UI控制器(Controller)上具有特定接口类型的方法. C4C UI的event handler 在C4 ...
- Vue.js-06:第六章 - 按键修饰符的使用
一.前言 上周末的时候,准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上,结果在一个接一个坑里面跳,最后 Supervisor 守护程序还是有问题,于是,采用重装系统大招, ...
- Vue学习笔记十一:按键修饰符和自定义指令(钩子函数)
目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...
- javaScript事件(一)事件流
一.事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.事件是javaScript和DOM之间的桥梁.你若触发,我便执行——事件发生,调用它的处理函数 ...
- [Abp vNext 源码分析] - 13. 本地事件总线与分布式事件总线 (Rabbit MQ)
一.简要介绍 ABP vNext 封装了两种事件总线结构,第一种是 ABP vNext 自己实现的本地事件总线,这种事件总线无法跨项目发布和订阅.第二种则是分布式事件总线,ABP vNext 自己封装 ...
随机推荐
- import组件的时候报错
去webpack.base.js配置 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.e ...
- 初识laytpl
laytpl-精致巧妙的JavaScript模板引擎 这两天在做一个mui项目,列表需要循环很多的数据.在公司同事的指引下认识了这个新的模板--laytpl.我只想说,很好用们很巧妙. 废话不多说,直 ...
- xCode控制台的使用-应用闪退原因跟踪
xCode控制台的使用-应用闪退原因跟踪 今天遇到这个一个问题,使用xCode version = 5.0 编译一个程序,刷到IOS7设备后,应用运行正常,但是刷新到IOS<7,打开饮用后就会出 ...
- Select语句执行顺序《转》
原文发布时间为:2010-10-12 -- 来源于本人的百度文章 [由搬家工具导入] 目的在于理解如何Select 【搜索所得】: 标准的 SQL 的解析顺序为:(1).FROM 子句, 组装来自不同 ...
- Eigen--简单的C++矩阵计算库
晚上突然想写一段小C++程序,要用到矩阵求逆呀乘法呀之类的,所以找了一下有什么现成的可用的C++矩阵计算相关的库,发现有一大堆,在其中各种各样的配置,感觉比较麻烦.从方便性来说Eigen是最方便的了, ...
- .NET 下二维码解决方案
使用Zint和Zxing实现二维码的编码与解码(Using open-source tools to generate and decode Q-R code) 1.Zint生成二维码 http:// ...
- Android中节操播放器JieCaoVideoPlayer使用
效果 使用 即便是自定义UI,或者对Library有过修改,也是这五步骤来使用播放器. 1.添加类库 compile 'cn.jzvd:jiaozivideoplayer:6.0.0' 2.添加布局 ...
- CSU 1777: 大还是小?【模拟/后导0】
293419 roniking 1777 Accepted 2032 0 C++ 2000 2018-04-03 19:21:25 Description 输入两个实数,判断第一个数大,第二个数大还是 ...
- OnClick五种事件处理
(一)内部类 1,布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...
- mac与linux服务器之间使用ssh互通有无
1. 在mac上没有找到好用的shell图形界面的软件,但也是有办法的,使用ssh公钥达到互相有无目的 2.场景是mac连A(linux,以下简称A)服务器 3.登陆mac shell ,按comma ...