html监听vue事件,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、示例:

5、v-on的缩写形式:可以使用@替代 v-on:

6、按键修饰符

触发像keydown这样的按键事件时,可以使用按键修饰符指定按下特殊的键后才触发事件

写法:

当按下回车键时才触发kd1事件

由于回车键对应的keyCode是13,也可以使用如下替代

当按下回车键时才触发kd1事件

但是如果需要按下字母a(对应的keyCode=65)才触发kd1事件,有两种写法:

1、由于默认不支持a这个按键修饰符,需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为:

Vue.config.keyCodes.a = 65

这样即可触发

2、也可以之间加上a对应的数字65作为按键修饰符

这样即可触发

键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字

2b7b8069f30d99db7c86e97cb5cee77f.png

b13cf1dd73dcbab35ee388583f1a34d2.png

标签:触发,vue,修饰符,事件,按键,机制,监听,65

来源: https://www.cnblogs.com/mushitianya/p/10505584.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值