本文实例总结了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.jb51.net 自定义指令写法一</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.jb51.net 自定义指令写法二</title>
<script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>
<script>
//这里的color可以传参
