Vue2键盘事件_vue2中如何绑定键盘事件-CSDN博客

本文链接：https://blog.csdn.net/weixin_64770583/article/details/125760028

1.Vue中常用的按键别名

回车：enter

删除：delete

退出：esc

空格：space

换行：tab

上：up

下：down

左：left

右：right

2.Vue未提供的别名的按键，可以使用按键原始的key值去绑定

3.系统修饰词(用特殊法) ：ctrl alt shift meta

(1) 配合keyup使用：按下修饰键的同时，再按下其它键，随后释放其他键，时间才被触发

(2) 配合keydown使用：正常触发事件

4.也可以使用keyCode去指定具体的按键(不推荐，已经快被淘汰了)

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制案件别名（不推荐）

绑定键盘事件例子

1. 有提供别名的键，在输入框按下回车键时,执行tip(){}函数

<body>
    <div class="box">
        <h3>学Vue去{{name}},地址在{{address}}</h3>
        <input type="text" placeholder="按回车键提示" @keyup.enter="tip()">
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '.box',
        data: {
            name: '尚硅谷',
            address: '北京',
        },
        methods: {
            tip() {
                alert('教的就是好!!!');
            }
        }
    });
</script>

2.没有提供别名的，可以直接用按键的keyCode值，比如Backspace退格键的keyCode值为8

        <input type="text" placeholder="按回车键提示" @keyup.8="tip()">

keyup与keydown的区别

1.keyup 键按下再松开触发

2.keydown 键按下就触发