Vue（八）：键盘事件 







<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>键盘事件</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <!-- 
    Vue中的键盘事件：
        1.Vue中键盘事件的写法：
        @keydown.XXX 或 @keyup.XXX，这里的XXX可以是Vue为一些按键起的别名，也可以是是键盘按键的key值，还可以是keyCode值（不推荐使用KeyCode值）
        keydown是按下按键就会触发事件；keyup则是按下并松手才会触发事件
        2.常用的按键别名：
            回车：enter
            删除：delete（退格键和删除键都会响应）
            退出：esc
            空格：space
            换行：tab
            上：up
            下：down
            左：left
            右：right
        3.使用按键的key值去绑定的时候，对于有多个单词的按键需要使用kebab-case命名（短横线命名），例如CapsLock按键要转化为 caps-lock
        4.自定义命名：
        Vue.config.keyCodes.自定义命名=KeyCode
        5.系统修饰键
        ctrl、alt、shift、meta
        这四个按键的使用有些特殊，当他们配合keyup使用时，需要按住此键，再按下并松开某一个键才能触发事件；配合keydown则正常使用。
        系统修饰键可以跟其它按键形成组合键 例如@keyup.ctrl.a
     -->
    <body>
        <div id="root">
            <input type="text" @keyup.ctrl.a="showInfo1">
        </div>
    </body>

    <script>
        const vm = new Vue({
            el: "#root",
            methods: {
                showInfo1(event) {
                    console.log(event)
                    console.log(event.target.value)
                }
            }
        })
    </script>
</html>




 


 


（本文仅作个人学习记录用，如有纰漏敬请指正）






            

            
posted @ 
2023-06-26 15:05 
谁知道水烫不烫 
阅读(278) 
评论(0) 
编辑 
收藏 
举报