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使用：正常觸發事件。