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

本篇文章给大家分享的是有关如何在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
收藏
分享
海报
0 条评论
168
上一篇:如何在Yii框架中使用响应组件 下一篇:怎么在Laravel中使用事件监听器
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码