这篇文章主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下
本文实例总结了vue自定义指令用法。分享给大家供大家参考，具体如下：
自定义指令:
一、属性:
Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 });
<div></div>
指令名称: v-red -> red
* 注意: 必须以 v-开头
拖拽:
二、自定义元素指令:（用处不大）
Vue.elementDirective('zns-red',{ bind:function(){ this.el.style.background='red'; } });
自定义指令写法一：
<div id="box"> <span> asdfasd </span></div>
Vue.directive('red',function(){ this.el.style.background='red'; }); window.onload=function(){ var vm=new Vue({ el:'#box', data:{ msg:'welcome' } }); };
测试示例：
<title>www.gaodaima.com 自定义指令写法一</title> <div id="box"> <span> asdfasd </span></div>
自定义指令写法二：推荐写法
<div id="box"> <span> 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' } }); };
测试示例：
<title>www.gaodaima.com 自定义指令写法二</title> <div id="box"> <span> asdfasd </span></div>
自定义指令写法三：
<div id="box"> <span> asdfasd </span></div>
Vue.directive('red',{ bind:function(){ this.el.style.background='red'; } }); window.onload=function(){ var vm=new Vue({ el:'#box' }); };
自定义指令：拖拽drag
<title>www.gaodaima.com 自定义指令：拖拽drag</title> <div id="box"> <div></div><div></div></div>
自定义元素指令
<title>www.gaodaima.com 自定义元素指令</title> zns-red{ width:100px; background: gray; height:100px; display: block; } <div id="box"> </div>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.gaodaima.com/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.j来@源gao*daima.com搞@代#码网s程序设计有所帮助。
以上就是vue自定义指令用法经典实例小结的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue自定义指令用法经典实例小结
转载请注明原文链接：vue自定义指令用法经典实例小结
