您当前的位置: 首页 > 

40Vue - 事件处理器(按键修饰符)

杨林伟 发布时间:2019-07-29 09:54:47 ,浏览量:4

在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为v-on在监听键盘事件时添加按键修饰符:



记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:






全部的按键别名:

  • 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 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

关注
打赏
1688896170
查看更多评论

杨林伟

暂无认证

  • 4浏览

    0关注

    3183博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文
立即登录/注册

微信扫码登录

0.1068s