40Vue - 事件处理器(按键修饰符)
事件 处理器 按键 修饰符
2023-09-11 14:15:43 时间
在监听键盘事件时,我们经常需要监测常见的键值。 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
可以通过全局config.keyCodes
对象自定义按键修饰符别名:
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念。不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:
1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
2. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
3. 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
相关文章
- video元素和audio元素相关事件
- C#委托和事件详解
- 移动Web触控事件总结
- 【第二篇】学习 android 事件总线androidEventbus之异步事件的传递
- C#委托和事件机制
- SAP CRM和Cloud for Customer中的Event handler(事件处理器)
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- Android AccessibilityService 事件分发原理
- 事件绑定(onmouseout,onmouseover)
- QWidget标题栏双击事件(QWidget::event里拦截NonClientAreaMouseButtonDblClick)
- 对于多个button要在同一个监听器中实现自己的单击事件的方法小诀窍。
- 怎么创建 JavaScript 自定义事件
- 鼠标事件类型:click和dblclick事件共存依赖问题
- React合成事件的原理是什么