vue中的v-on事件监听机制
1、作用:绑定事件监听,表达式可以是一个方法的名字或一个内联语句,
如果没有修饰符也可以省略,用在普通的html元素上时,只能监听 原生
DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
2、常用事件:
v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
....
3、示例:
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 阻止默认行为,没有表达式 -->
<form v-on:submit.prevent></form>
5、v-on的缩写形式:可以使用@替代 v-on:
<button @click="doThis"></button>
6、按键修饰符
触发像keydown这样的按键事件时,可以使用按键修饰符指定按下特殊的键后才触发事件
写法:
<input type="text" @keydown.enter="kd1"> 当按下回车键时才触发kd1事件
由于回车键对应的keyCode是13,也可以使用如下替代
<input type="text" @keydown.13="kd1"> 当按下回车键时才触发kd1事件
但是如果需要按下字母a(对应的keyCode=65)才触发kd1事件,有两种写法:
1、由于默认不支持a这个按键修饰符,需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为:
Vue.config.keyCodes.a = 65
<input type="text" @keydown.a="kd1"> 这样即可触发
2、也可以之间加上a对应的数字65作为按键修饰符
<input type="text" @keydown.65="kd1"> 这样即可触发
键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字
转载于:https://www.cnblogs.com/mushitianya/p/10505584.html
vue中的v-on事件监听机制相关推荐
- java中事件监听_Java中的事件监听机制
鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...
- Java中事件监听机制
Java中事件监听机制 一.事件监听机制的定义 要想了解Java中的事件监听机制,首先就要去了解一下在Java中事件是怎样去定义的呢!在使用Java编写好一个界面后,我们就会对界面进行一些操作,比如, ...
- spring中的事件监听机制
Spring event listener 介绍 example 简单原理解释 自定义事件.监听和发布 事件 监听器 发布者 测试 更加一般的事件 @EventListener原理 介绍 exampl ...
- 关于事件监听机制的总结(Listener和Adapter)
记得以前看过事件监听机制背后也是有一种设计模式的.(设计模式的名字记不清了,只记得背后实现的数据结构是数组.) 附上事件监听机制的分析图: 一个事件源可以承载多个事件(只要这个事件源支持这个事件就可以 ...
- Spring5源码 - 13 Spring事件监听机制_@EventListener源码解析
文章目录 Pre 概览 开天辟地的时候初始化的处理器 @EventListener EventListenerMethodProcessor afterSingletonsInstantiated 小 ...
- Spring5源码 - 12 Spring事件监听机制_异步事件监听应用及源码解析
文章目录 Pre 实现原理 应用 配置类 Event事件 事件监听 EventListener 发布事件 publishEvent 源码解析 (反推) Spring默认的事件广播器 SimpleApp ...
- Spring5源码 - 11 Spring事件监听机制_源码篇
文章目录 pre 事件监听机制的实现原理[观察者模式] 事件 ApplicationEvent 事件监听者 ApplicationEvent 事件发布者 ApplicationEventMultica ...
- Ⅵ:zookeeper的Watcher事件监听机制
2021最新zookeeper系列 ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤️ ❤ ...
- java swing事件监听_Java swing(awt):事件监听机制的实现原理+简单示例
(1)实现原理 事件监听机制的实现: 参考图:事件模型_ActionEvent 为了节省资源,系统无法对某个事件进行实时的监听.故实现的机制是当发生某个事件后,处理代码将被自动运行,类似钩子一般.(回 ...
- java监听com口_简单了解Java接口+事件监听机制
1.接口: 定义方法: public interface interName //extends interName2, interName3...可继承多个接口 在接口里只能定义常量和抽象方法. p ...
最新文章
- python 设置开机自动启动 .py 文件
- Gartner 2019年人工智能成熟度曲线的超前趋势
- NVIDIA 显卡与 CUDA 在深度学习中的应用
- matlab 文件指针回到开头,[c/c++] 文件指针位置回到文件开头(rewind)及行开头(ftell+fseek)...
- 【前端】这可能是你看过最全的css居中解决方案了~
- 电脑有两个显示器用来显示,如何配置呢,请看下文
- Spring Cloud Alibaba系列教程-03-搭建生产可用的Nacos集群
- 关于fork()父子进程返回值的问题
- 历经万难,终于搭好深度学习环境[吐血总结篇,造福后人]
- matlab机器学习基础
- matlab fft 与fftshift的理解
- 数据分析方法论和数据分析方法
- Python抖音视频去水印,并打包成exe可执行文件
- 更改360极速浏览器默认安装路径
- IPsec-Tools配置之racoon
- python编程自然数表达式_实现四则运算 (python实现)by 周乃君 张宏根
- 对Autorun.inf类U盘病毒的攻防经验总结
- mysql group by 之后取每个分组最新的一条(或者按照自定义的规则排序)
- 【自制小工具】快速批量查询IP归属地(自动去重、按国内外汇总,并智能识别出错误IP)
- word中输入空格变点