Vue2键盘事件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记,学习一下Vue键盘事件
键盘事件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title></title>   <script src="../js/Vue.js" charset="utf-8"></script>   <script type="text/javascript">     window.onload = function () {       var vm = new Vue({         el: '#box',         data: {},         methods: {           show: function (ev) {             alert(ev.keyCode)           }         }       });     }   </script> </head> <body> <div id="box">   <input type="text" @keydown="show($event)"> </div> </body> </html>

keyCode

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title></title>   <script src="../js/Vue.js" charset="utf-8"></script>   <script type="text/javascript">     window.onload = function () {       var vm = new Vue({         el: '#box',         data: {},         methods: {           show: function (ev) {             if(ev.keyCode==13){               alert('你按了回车键！')             }           }         }       });     }   </script> </head> <body> <div id="box">   <input type="text" @keyup="show($event)"> </div> </body> </html>

keyUp

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title></title>   <script src="../js/Vue.js" charset="utf-8"></script>   <script type="text/javascript">     window.onload = function () {       var vm = new Vue({         el: '#box',         data: {},         methods: {           show: function (ev) {             alert(ev.keyCode)           }         }       });     }   </script> </head> <body> <div id="box">   <input type="text" @keyup="show($event)"> </div> </body> </html>

键盘事件——简写方式

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title></title>   <script src="../js/Vue.js" charset="utf-8"></script>   <script type="text/javascript">     window.onload = function () {       var vm = new Vue({         el: '#box',         data: {},         methods: {           show: function () {             alert('你按了回车！');           },           show2: function () {             alert('你按了回车！');           },           show3: function () {             alert('你按了上键！');           },           show4: function () {             alert('你按了下键！');           },           show5: function () {             alert('你按了左键！');           },           show6: function () {             alert('你按了右键！');           }         }       });     }   </script> </head> <body> <div id="box">   <input type="text" @keyup.13="show()">   <hr>   <input type="text" @keyup.enter="show2()">   <hr>   <input type="text" @keyup.up="show3()">   <hr>   <input type="text" @keyup.down="show4()">   <hr>   <input type="text" @keyup.left="show5()">   <hr>   <input type="text" @keyup.right="show6()">   <hr> </div> </body> </html>