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

2024-05-06 15:41:37

字体：大中小

来源：转载

供稿：网友

本文实例总结了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

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

下一篇：使用webpack搭建vue项目实现脚手架功能

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注