<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 键盘事件
     1.常用按键：
      回车-enter，
      删除-delete（捕获 删除 、 退格）
      退出-esc（不能使用）
      空格-space
      换行-tab（只能配合keydown使用 ）
      上-up
      下-down
      左-left
      右-right
     2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意转化未kebab-case(短横线命名)

     3.系统修饰键 ctrl,alt,shift,meta需要配合其他按键去使用，如ctrl，先点击ctrl+任意键（如：y），抬起任意键，才可使用

     4；可以通过使用keyCode编码去使用（不适用）

     5.  Vue.config.keyCodes.huiche = code码（如：13 回车）  注意在vue外面使用
     -->
    <script src="./vue.js" type="text/javascript" charset="utf-8"></script>
    <div id="input">
      <!-- 第一种 -->
      <input type="text" placeholder="按下回车提示输入" @keyup.right="showInfo">
      <hr>
      <!-- 第二种：引用别名按键 -->
      <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock ="showInfo1">
      <hr>
      <!-- 第三种：系统修饰箭 -->
      <input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo2">
      <hr>
      <!-- 第四种：通过keyCode编码 -->
      <input type="text" placeholder="按下回车提示输入" @keyup.13='showInfo3'>
      <hr>
      <!-- 第五种：自己定义别名 -->
      <input type="text" placeholder="按下回车提示输入" @keyup.huiche='showInfo4'>
    </div>
  </head>
  <body>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      Vue.config.keyCodes.huiche = 13,
       new Vue ({
         el :'#input',
         data : {
           showInfo(e){
             console.log(e.target.value)
           },
           showInfo1(el){

             console.log(el.key,el.keyCode)
           },
           showInfo2(er){
             console.log(er.target.value)
           },
           showInfo3(es){
            console.log(es.target.value)
           },
           showInfo4(esi){

            console.log(esi.target.value)
           },
         },

       })

    </script>
  </body>
</html>