vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考，具体如下：
@keydown.up
@keydown.enter
@keydown.a/b/c....
自定义键盘信息:
?| 1 2 | Vue.directive( 'on' ).keyCodes.ctrl=17; Vue.directive( 'on' ).keyCodes.myenter=13; |
@keydown.a/b/c....
?| 1 | < input type = "text" @ keydown.c = "show" > |
自定义键盘信息:
?| 1 2 | Vue.directive( 'on' ).keyCodes.ctrl=17; Vue.directive( 'on' ).keyCodes.myenter=13; |
| 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 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title></title> <style> </style> <script src= "vue.js" ></script> <script> Vue.directive( 'on' ).keyCodes.ctrl=17; // Vue.directive( 'on' ).keyCodes.myenter=13; window.onload= function (){ var vm= new Vue({ el: '#box' , data:{ a: 'blue' }, methods:{ show: function (){ alert(1); } } }); }; </script> </head> <body> <div id= "box" > <input type= "text" @keydown.myenter= "show | debounce 2000" > </div> </body> </html> |
监听数据变化:
vm.el/el/mount/$options/....
vm.$watch(name,fnCb); //浅度
| 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 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title></title> <script src= "vue.js" ></script> <script> window.onload= function (){ var vm= new Vue({ el: '#box' , data:{ json:{name: 'strive' ,age:16}, b:2 } }); vm.$watch( 'json' , function (){ alert( '发生变化了' ); //浅监听，json里面某个属性变，是不会监听到的 }); document.onclick= function (){ vm.json.name= 'aaa' ; }; }; </script> </head> <body> <div id= "box" > {{json | json}} //json过滤相当于 JSON.string <br> {{b}} </div> </body> </html> |
vm.$watch(name,fnCb,{deep:true}); //深度监视
?| 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 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title></title> <script src= "vue.js" ></script> <script> window.onload= function (){ var vm= new Vue({ el: '#box' , data:{ json:{name: 'strive' ,age:16}, b:2 } }); vm.$watch( 'json' , function (){ alert( '发生变化了' ); },{deep: true }); document.onclick= function (){ vm.json.name= 'aaa' ; }; }; </script> </head> <body> <div id= "box" > {{json | json}} <br> {{b}} </div> </body> </html> |
更多精彩
