如何在vue中实现自定义指令

tangjin

作者

本篇文章给大家分享的是有关如何在vue中实现自定义指令，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

自定义指令:

如何在vue中实现自定义指令

一、属性:

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

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

指令名称: v-red -> red

* 注意: 必须以 v-开头

拖拽:

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

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

自定义指令写法一：

<divid="box">
<spanv-red>
asdfasd
</span>
</div>

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

测试示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>www.jb51.net自定义指令写法一</title>
<scriptsrc="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(){
varvm=newVue({
el:'#box',
data:{
msg:'welcome'
}
});
};
</script>
</head>
<body>
<divid="box">
<spanv-red>
asdfasd
</span>
</div>
</body>
</html>

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

<divid="box">
<spanv-red="a">
asdfasd
</span>
</div>

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

测试示例：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>www.jb51.net自定义指令写法二</title>
<scriptsrc="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(){
varvm=newVue({
el:'#box',
data:{
a:'blue'
}
});
};
</script>
</head>
<body>
<divid="box">
<spanv-red="a">
asdfasd
</span>
</div>
</body>
</html>

自定义指令写法三：

<divid="box">
<spanv-red>
asdfasd
</span>
</div>

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

自定义指令：拖拽drag

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>www.jb51.net自定义指令：拖拽drag</title>
<scriptsrc="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>
<script>
Vue.directive('drag',function(){
varoDiv=this.el;
oDiv.onmousedown=function(ev){
vardisX=ev.clientX-oDiv.offsetLeft;
vardisY=ev.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
varl=ev.clientX-disX;
vart=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(){
varvm=newVue({
el:'#box',
data:{
msg:'welcome'
}
});
};
</script>
</head>
<body>
<divid="box">
<divv-drag:></div>
<divv-drag:></div>
</div>
</body>
</html>

自定义元素指令

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>www.jb51.net自定义元素指令</title>
<style>
zns-red{
width:100px;
background:gray;
height:100px;
display:block;
}
</style>
<scriptsrc="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(){
varvm=newVue({
el:'#box',
data:{
a:'blue'
}
});
};
</script>
</head>
<body>
<divid="box">
<zns-red></zns-red>
</div>
</body>
</html>

以上就是如何在vue中实现自定义指令，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-04-03 22:30:43

vue