vue自定义指令用法经典实例小结

2019-11-19 11:59:12

字体：大中小

来源：转载

供稿：网友

本文实例总结了vue自定义指令用法。分享给大家供大家参考，具体如下：

自定义指令:

一、属性:

Vue.directive(指令名称,function(参数){  this.el  -> 原生DOM元素});

<div v-red="参数"></div>

指令名称: v-red -> red

* 注意: 必须以 v-开头

拖拽:

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

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

自定义指令写法一：

<div id="box">  <span v-red>    asdfasd  </span></div>

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

测试示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>www.VeVB.COm 自定义指令写法一</title><script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script><script>Vue.directive('red',function(){  this.el.style.background='red';});window.onload=function(){  var vm=new Vue({    el:'#box',    data:{      msg:'welcome'    }  });};</script></head><body><div id="box">  <span v-red>    asdfasd  </span></div></body></html>

自定义指令写法二：推荐写法

<div id="box">  <span v-red="a">    asdfasd  </span></div>

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

测试示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>www.VeVB.COm 自定义指令写法二</title><script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script><script>//这里的color可以传参Vue.directive('red',function(color){  this.el.style.background=color;});window.onload=function(){  var vm=new Vue({    el:'#box',    data:{      a:'blue'    }  });};</script></head><body><div id="box">  <span v-red="a">    asdfasd  </span></div></body></html>

自定义指令写法三：

<div id="box">  <span v-red>    asdfasd  </span></div>

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

自定义指令：拖拽drag

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.COm 自定义指令：拖拽drag</title>  <script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>  <script>    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'        }      });    };  </script></head><body>  <div id="box">    <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>    <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>  </div></body></html>

自定义元素指令

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.COm 自定义元素指令</title>  <style>    zns-red{      width:100px;      background: gray;      height:100px;      display: block;    }  </style>  <script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>  <script>    Vue.elementDirective('zns-red',{      bind:function(){        this.el.style.background='red';      }    });    window.onload=function(){      var vm=new Vue({        el:'#box',        data:{          a:'blue'        }      });    };  </script></head><body>  <div id="box">    <zns-red></zns-red>  </div></body></html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.VeVB.COm/code/HtmlJsRun测试上述代码运行效果。

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

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

下一篇：简单易扩展可控性强的Jquery转盘抽奖程序