<!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>