今天给大家利用vue自定义指令做一个简单拖拽效果，所谓自定义指令就是Vue除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。因为Vue自带的指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，所以就需要自定义指令，下图是自定义指令的语法。.
今天所要实现的效果，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<div v-drag v-deo style="width: 200px;height: 200px; border: 1px solid black;background-color: red;border-radius: 50%;position:absolute;"></div><!--写法为v-自定义名字-->
<script>
Vue.directive("deo",function(){
this.el.onclick=function(){
this.style.background="rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")" //作颜色随机
}
});
Vue.directive("drag",function(){//作拖拽效果
this.el.onmousedown=function(e){//鼠标按下
var l=e.clientX-this.offsetLeft;
var t=e.clientY-this.offsetTop;
document.onmousemove=function(e){//鼠标移动
this.style.left=e.clientX-l+"px";
this.style.top=e.clientY-t+"px";
}.bind(this);
document.onmouseup=function(){//鼠标弹起
this.onmousemove=this.onmouseup=null;
};
};
})
new Vue({
el:"body",//注意的是vue实例化对象必须写在自定义指令后面
})
</script>
</body>
</html>
其效果图为（由于不能上传视频，静态图片不能很好感受效果，所以传个动态感受下，主要鼠标按下可以拖动圆形移动，点击能随机切换颜色）：
今天又是元气满满的一天，加油！