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使用：正常触发事件。
标签：触发,vue,别名,js,键盘,事件,按键 来源： https://www.cnblogs.com/longkui-site/p/15860380.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。