vueカスタム命令用法経典インスタンス小結

5733 ワード

この例では、vueカスタム命令の使い方をまとめます.皆さんの参考にしてください.具体的には以下の通りです.
カスタムコマンド:
一、属性:


Vue.directive(    ,function(  ){
  this.el  ->   DOM  
});

指令名称: v-red -> red

* 注意: 必须以 v-开头

拖拽:

二、自定义元素指令:（用处不大）


Vue.elementDirective('zns-red',{
  bind:function(){
    this.el.style.background='red';
  }
});

カスタム命令の書き方1:



  
    asdfasd


Vue.directive('red',function(){
  this.el.style.background='red';
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      msg:'welcome'
    }
  });
};

テスト例:






www.jb51.net         


Vue.directive('red',function(){
  this.el.style.background='red';
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      msg:'welcome'
    }
  });
};




  
    asdfasd

カスタム命令書き方2:推奨書き方



  
    asdfasd


//   color    
Vue.directive('red',function(color){
  this.el.style.background=color;
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      a:'blue'
    }
  });
};

テスト例:






www.jb51.net         


//   color    
Vue.directive('red',function(color){
  this.el.style.background=color;
});
window.onload=function(){
  var vm=new Vue({
    el:'#box',
    data:{
      a:'blue'
    }
  });
};




  
    asdfasd

カスタム命令書き方3:



  
    asdfasd


Vue.directive('red',{
  bind:function(){
    this.el.style.background='red';
  }
});
window.onload=function(){
  var vm=new Vue({
    el:'#box'
  });
};

カスタムコマンドかすたむこまんど:dragをドラッグdragをドラッグdrag





  
  www.jb51.net      ：  drag
  
  
    Vue.directive('drag',function(){
      var oDiv=this.el;
      oDiv.onmousedown=function(ev){
        var disX=ev.clientX-oDiv.offsetLeft;
        var disY=ev.clientY-oDiv.offsetTop;
        document.onmousemove=function(ev){
          var l=ev.clientX-disX;
          var t=ev.clientY-disY;
          oDiv.style.left=l+'px';
          oDiv.style.top=t+'px';
        };
        document.onmouseup=function(){
          document.onmousemove=null;
          document.onmouseup=null;
        };
      };
    });
    window.onload=function(){
      var vm=new Vue({
        el:'#box',
        data:{
          msg:'welcome'
        }
      });
    };

自定义元素指令





  
  www.jb51.net        
  
  
  
    Vue.elementDirective('zns-red',{
      bind:function(){
        this.el.style.background='red';
      }
    });
    window.onload=function(){
      var vm=new Vue({
        el:'#box',
        data:{
          a:'blue'
        }
      });
    };

興味のある方は、オンラインHTML/CSS/JavaScriptコードを使用してツールを実行できます.http://tools.jb51.net/code/HtmlJsRun上記のコードの実行効果をテストします.
本文で述べたようにみんなにvue.jsプログラム設計が役立ちます.

VUEテンプレート構文

C++学習の道(3):関数にオブジェクトを渡す