快捷導(dǎo)航

vue自定義鍵盤(pán)信息、監(jiān)聽(tīng)數(shù)據(jù)變化的方法示例【基于vm.$watch】

更新時(shí)間：2019年03月16日 11:27:31 作者：白楊-M

這篇文章主要介紹了vue自定義鍵盤(pán)信息、監(jiān)聽(tīng)數(shù)據(jù)變化的方法,結(jié)合實(shí)例形式分析了vue.js基于vm.$watch進(jìn)行事件監(jiān)聽(tīng)相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了vue自定義鍵盤(pán)信息、監(jiān)聽(tīng)數(shù)據(jù)變化的方法。分享給大家供大家參考，具體如下：

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

自定義鍵盤(pán)信息:

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

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

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

自定義鍵盤(pán)信息:

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>

監(jiān)聽(tīng)數(shù)據(jù)變化:

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('發(fā)生變化了');//淺監(jiān)聽(tīng)，json里面某個(gè)屬性變，是不會(huì)監(jiān)聽(tīng)到的
      });
      document.onclick=function(){
        vm.json.name='aaa';
      };
    };
  </script>
</head>
<body>
  <div id="box">
    {{json | json}}//json過(guò)濾相當(dāng)于 JSON.string
    <br>
    {}
  </div>
</body>
</html>

vm.$watch(name,fnCb,{deep:true}); //深度監(jiān)視

<!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('發(fā)生變化了');
      },{deep:true});
      document.onclick=function(){
        vm.json.name='aaa';
      };
    };
  </script>
</head>
<body>
  <div id="box">
    {{json | json}}
    <br>
    {}
  </div>
</body>
</html>

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: