vue之v-on的键盘事件

<script src="./vue.js"></script>
    <div id="root">
        <h1>{{name}}</h1>
        <h1>{{age}}</h1>
        <h1>{{skill}}</h1>
        <!-- <input type="text" placeholder="输入敲回车提示信息" @keyup.space="showInfo"> -->
        <input type="text" placeholder="输入敲回车提示信息" @keydown.ctrl="showInfo">
        <!-- 当键盘抬起的时候，并且这个键位是enter，那么就会触发函数。vue为键位起一个别名
            1. enter 回车键
            2. delete 删除键 （backspace与delete）键位
            3. esc    退出键
            4. 空格   space
            5. 换行   tab
            6.up      上键
            7.down    下键
            8.left    左键
            9.right   右键 
            caps-lock 20 这种没有提供别名的，命名方式要小写以下划线来连接
            【注意】 tab键只要摁一下就会失去焦点，所以其绑定事件必须是keydown
            
            系统修饰键（用法特殊）ctrl alt shift win
                (1)配合keyup使用 按下修饰键的同时再按下其他键，随后释放其他键位，才可以触发函数。
                (2)配合keydown使用 正常就可以触发函数了。

            自定义一个别名 Vue.config.keycodes.huiche = 13;  @keydown.huiche="showInfo" -->

        
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm =new  Vue({
            el:"#root",
            data:{
                name:"黑崎一护",
                age:18,
                skill:"虚化の月牙天冲",
            },
            methods:{
                showInfo(event){
                    //输出input框的值
                    console.log(event.target.value);
                    //输出按键编码与按键的值
                    // console.log(event.key,event.keyCode);


                }
            }
        });
    </script>