“Vue 键盘事件”的版本间的差异

2024年8月11日 (日) 07:30的最新版本

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=16

vue 给一些按键起了别名，是小写开头的
原本的按键名可以通过 event.key 得到，可能和 vue 起的别名一样，但是大写字母开头；对于 vue 没有取别名的按键，可以通过原本的按键名 event.key 绑定事件，但要注意的是：对于像 CapsLock 这样两个单词组成的按键在绑定的时候要使用 kebab-case （短横线命名），变成 caps-lock 才能成功绑定
笔记本上 fn（function 功能键）是绑不了事件的
像 tab 键，最好绑定 @keydown 使用，因为本身 tab 有切换控件、让当前控件失去焦点的功能，所以如果绑定 @keyup，等到 tab 键起来的时候事件的发生已经不在控件里了，所以就不能被原先的控件捕获到了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
    1. Vue 中常用的按键别名：
        回车 => enter
        删除 => delete（捕获“删除”和“退格”键；没有打开 numlock 时，按小键盘上的 del 也可以）
        退出 => esc
        空格 => space
        换行 => tab（特殊，必须配合 keydown 使用）
        上 => up
        下 => down
        左 => left
        右 => right

    2.Vue 未提供别名的按键，可以使用按键原始的 key 值去绑定，但注意要转为 kebab-case （短横线命名）

    3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win 键，windows 徽标键，mac 里是 command 键）
        (1).配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
        (2).配合 keydown 使用：正常触发事件。

    4.也可以使用 keyCode 去指定具体的按键（不推荐，MDN 标注为已弃用）

    5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
         <!-- vue 中，.enter 可以代表回车 -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"><br> -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.delete="showInfo"><br> -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.keyCodes.huiche = 13; //定义了一个别名按键

    new Vue({
        el:'#root',
        data:{
            name:'河北'
        },
        methods:{
            showInfo(e){
                // console.log(e.target.value);
                // console.log(e.keyCode);
                // 按下回车再提示
                // if (e.keyCode !== 13) return
                // console.log(e.target.value);
                console.log(e.key, e.keyCode);
            }
        }
    })
</script>
</html>

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=17

事件总结

关于事件修饰符的小技巧（事件修饰符可以连续写：@click.stop.prevent="showInfo"），同时阻止冒泡和阻止默认事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于事件修饰符的小技巧</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .demo1{
            height: 50px;
            background-color: skyblue;
        }        
    </style>
</head>
<body>
    <div id="root">
        <div class="demo1" @click="showInfo">
            <!--先阻止冒泡、再阻止默认事件-->
            <a href="https://www.baidu.com/" @click.stop.prevent="showInfo">点我提示信息</a>
            <!--先阻止默认事件、再阻止冒泡-->
            <a href="https://www.baidu.com/" @click.prevent.stop="showInfo">点我提示信息</a>
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                console.log(e.target);
            },
        }
    })
</script>
</html>

先阻止冒泡或先阻止默认事件的区别，效果上是一样的

提出新需求

只有按下 ctrl + y 的时候才触发，按别的不触发：

在系统修饰键 ctrl 后面 .y，就是 ctrl 和 y 一起按的时候

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于事件修饰符的小技巧</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .demo1{
            height: 50px;
            background-color: skyblue;
        }        
    </style>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="同时按下 Ctrl+Y 输出" @keyup.ctrl.y="showInfo">
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        methods:{
            showInfo(e){
                console.log(e.target.value);
            },
        }
    })
</script>
</html>

“Vue 键盘事件”的版本间的差异

2024年8月11日 (日) 07:30的最新版本

事件总结

提出新需求

导航菜单

搜索