苏飞论坛

标题: [Vue.js]学习笔记-Vue.js事件处理器-按键修饰符 [打印本页]

作者: 范范 时间: 2018-12-20 10:29
标题: [Vue.js]学习笔记-Vue.js事件处理器-按键修饰符

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

导读部分

教程部分

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>

作者: 站长苏飞 时间: 2018-12-20 10:54
我只是路过打酱油的。

作者: Amy 时间: 2018-12-20 13:58
强烈支持楼主ing……

作者: 惜 时间: 2018-12-21 11:03
我爱前端。。。。。。。。。。。。。。。。。。。。。。样式激动人心，无法言表！

欢迎光临苏飞论坛 (http://www.sufeinet.com/)