vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

2019-11-19 11:59:10

字体：大中小

来源：转载

供稿：网友

本文实例讲述了vue自定义键盘信息、监听数据变化的方法。分享给大家供大家参考，具体如下：

@keydown.up
@keydown.enter
@keydown.a/b/c....

自定义键盘信息:

Vue.directive('on').keyCodes.ctrl=17;Vue.directive('on').keyCodes.myenter=13;

@keydown.a/b/c....

<input type="text" @keydown.c="show">

自定义键盘信息:

Vue.directive('on').keyCodes.ctrl=17;Vue.directive('on').keyCodes.myenter=13;

<!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); //浅度

<!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}); //深度监视

<!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>

希望本文所述对大家vue.js程序设计有所帮助。

上一篇：Javascript读写cookie的实例源码

下一篇：vue自定义指令用法经典实例小结