vue(vue.js)中的键盘事件
0.前言
前面一篇文章中，主要介绍了vue中click事件。这篇文章中，简单介绍下vue中的键盘事件。
1.键盘事件(基础)
常见的键盘事件有keyup和keydown。keydown意为按下按键触发，keyup意为抬起按键触发。
实现简单功能：当用户按下回车按键时，触发一个事件。
最原始的方法，用按键的ASCII码进行判断。回车键的ASCII码是13，我们可以在参数中直接使用keyCode来判断。比如下面这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<!-- 制作一个容器 -->
<div id="first">
<div>
测试数据
</div>
<div >
<input type="text" placeholder="按下回车键输入数据" @keyup="showMsg">
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#first',
data:{
msg:"world",
},
methods:{
showMsg(e){
if(e.keyCode==13){
alert("好好的")
}
}
}
})
</script>
</body>
</html>
效果如下，当用户输入一些数据后，按下回车，就会弹窗。
2.按键的别名
如果你觉得ASCII码比较难记，vue给你想好了助记符（别名），我们可以通过别名的方式来表示，比如上面的语句，我们可以改成下面这样：
<input type="text" placeholder="按下回车键输入数据" @keyup.enter="showMsg">然后把showMsg事件中的判断删除，直接alert就行。
vue给了常见的按键别名，可以参考上面的用法进行替换。
回车 enter
删除 delete
退出 esc
空格 space
换行 tab
上 up
下 down
左 left
右 right3.比较特殊的几个按键
下面这几个按键比较特殊，ctrl、alt、shift、meta。其中meta是键盘上的windows徽标键（开始按键）
(1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2)配合keydown使用：正常触发事件。
