Vue 按键修饰符

2017年05月10日 15:00 | 353次浏览 | 分类: vue2教程

当监听键盘事件时,我们常常需要判断常用的 key code。Vue.js 提供了一个特殊的只能用在 v-on 指令的过滤器:key。它接收一个表示key code 的参数并完成判断。

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

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

Vue2.10 新增按键修饰符

.ctrl

.alt

.shift

.meta

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
<!DOCTYPE html>
<html>
<head>
    <title>Vue键盘修饰</title>
</head>
<body>
    <div id="app">
        <!--<input type="text" v-on:keyup.enter="alert($event)">-->
        <input type="text" v-on:keyup.alt.67="alert($event)">
    </div>
     <script type="text/javascript" src="../js/vue.js"></script>
     <script type="text/javascript">
         var app = new Vue({
             el: '#app',
            // 在 `methods` 对象中定义方法
            methods: {
                alert(event){
                    alert(event.target.value);
                }
            }
         });
     </script>
</body>
</html>

为什么要在 HTML 中写监听器?

你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念。不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:


1 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

3 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。



感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:SparK RDD持久化 下一篇:Vue 计算属性
^