按键修饰符携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情在某些实际场景

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情

在某些实际场景中，可能需要设定各种按键事件去优化页面的交互，接下来学习在vue中监听键盘事件的方法。比如在这种场景中，用户输入账号密码后按【Enter】键就可以登录。在传统的前端开发中，这种类似的需求，需要知道按键所对应的keyCode，然后通过keyCode得知用户按了哪个按键，转而去执行后续的操作。

获取按键的keyCode

要想获取按键的keyCode，可以通过v-model指令进行数据双向绑定，并同时绑定一个keydown事件，在keydown事件中输入keyCode。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg" v-on:keydown="keydown"></input>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"0123456789"
        },
        methods: {
            keydown:function(e){
                console.log(e.keyCode)
            }
        }
    })
</script>
</body>
</html>

测试可知，0~9键的keyCode是96-105.此外，Enter键的keyCode是13，空格键的keyCode是32.

监听按键事件

在vue中，提供了一种便利的方式来实现监听按键事件。在监听按键事件时，经常需要查找常见的按键所对应的keyCode。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>在文本框中不断输入字符，当按Enter键时显示前面已输入的字符，同时清空文本框</div>
    {{msg}}
    <input type="text" v-model="msg" v-on:keydown.13="keydown"></input>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:""
        },
        methods: {
            keydown:function(e){
                console.log(e.keyCode)
            }
        }
    })
</script>
</body>
</html>

上面代码中使用了v-on:keydown.13,13表示Enter键的keyCode。vue为常用的按键提供了别名，常见别名如下表：

别名
.enter	捕获【Enter】键
.tab	捕获【Tab】键
.delete	捕获【Delete】键和【Backspace】键
.esc	捕获【Esc】键
.space	捕获空格键