[Vue.js]学习笔记-Vue.js事件处理器-按键修饰符

范范

[Vue.js]学习笔记-Vue.js事件处理器-按键修饰符

导读部分

---

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html

教程部分

---

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

Vue.js中事件监听使用v-on处理。
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

[HTML] 纯文本查看 复制代码

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

但是在记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

[HTML] 纯文本查看 复制代码

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

下面给大家罗列下全部的按钮别名，如下：

[JavaScript] 纯文本查看 复制代码

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

按钮别名的用法如下所示：

[HTML] 纯文本查看 复制代码

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

站长苏飞

我只是路过打酱油的。

Amy

强烈支持楼主ing……

惜

我爱前端 。。。。。。。。。。。。。。。。。。。。。。样式激动人心，无法言表！