vue學習---鍵盤事件
阿新 • • 發佈：2021-11-13
1.Vue中常用的按鍵別名：
回車 => enter
刪除 => delete (捕獲“刪除”和“退格”鍵)
退出 => esc
空格 => space
換行 => tab (特殊，必須配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去繫結，但注意要轉為kebab-case（短橫線命名）
3.系統修飾鍵（用法特殊）：ctrl、alt、shift、meta (1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。 (2).配合keydown使用：正常觸發事件。
4.也可以使用keyCode去指定具體的按鍵（不推薦）
5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定製按鍵別名
2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去繫結，但注意要轉為kebab-case（短橫線命名）
3.系統修飾鍵（用法特殊）：ctrl、alt、shift、meta (1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。 (2).配合keydown使用：正常觸發事件。
4.也可以使用keyCode去指定具體的按鍵（不推薦）
5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定製按鍵別名
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>鍵盤事件</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 1.Vue中常用的按鍵別名： 回車 => enter 刪除 => delete (捕獲“刪除”和“退格”鍵) 退出 => esc 空格 => space 換行 => tab (特殊，必須配合keydown去使用) 上 => up 下 => down 左 => left 右 => right 2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去繫結，但注意要轉為kebab-case（短橫線命名） 3.系統修飾鍵（用法特殊）：ctrl、alt、shift、meta (1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨後釋放其他鍵，事件才被觸發。 (2).配合keydown使用：正常觸發事件。 4.也可以使用keyCode去指定具體的按鍵（不推薦） 5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定製按鍵別名--> <!-- 準備好一個容器--> <div id="root"> <h2>歡迎來到{{name}}學習</h2> <input type="text" placeholder="按下回車提示輸入" @keydown.huiche="showInfo"> </div> </body> <script type="text/javascript"> Vue.config.productionTip= false //阻止 vue 在啟動時生成生產提示。 Vue.config.keyCodes.huiche = 13 //定義了一個別名按鍵 new Vue({ el:'#root', data:{ name:'尚矽谷' }, methods: { showInfo(e){ // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script> </html>