vue 快速生成组件的指令_Vue中自定义指令的使用方法！

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：(咳咳，借官网的用一用)

1、定义全局的自定义变量

main.js

Vue.directive('color',{

inserted(el){//各单位注意，这里的el获取的是标签元素，说白了就是可以直接操作DOM

console.log(el)

el.style.color= "red"}

})

app.vue，这里直接写v-color就可以；

前端伪大叔

前端伪大叔

2、自定义指令中，添加属性；

Vue.directive('color',{

bind(el,binding){switch(binding.value){case 'red':

el.style.color= 'red'

break;case 'blue':

el.style.color= 'blue'

break;

}

}

})

App.vue

前端伪大叔

前端伪大叔

前端伪大叔

可以通过给自定义的属性，添加属性的方式来修改颜色；当然不仅仅只能修改颜色这么简单，因为el直接获得了DOM，所以你懂得！

3、组件内指令-只有自己组件可以使用

注意：directives是一个对象，里面定义的自定义指令也是对象！

//template

前端伪大叔

前端伪大叔

//script//这里是对象

directives:{//每个指令都是一个对象

color:{

inserted(el){

el.style.color= 'cyan'}

}

}

4、组件内的自定义指令，增加属性

//template

前端伪大叔

前端伪大叔

//script//这里是对象

directives:{//每个指令都是一个对象

color:{

bind(el,binding){if(binding.value == 'red'){

el.style.color= 'red'}else if (binding.value = 'blue'){

el.style.color= 'blue'}

}

}

}

给大家奉上地址：https://cn.vuejs.org/v2/guide/custom-directive.html

如果大家喜欢的话，欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识！