标签：http 自己 vuejs 添加 知识 insert bre main 就会
除了核心功能默认内置的指令 (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就可以；
<div >前端伪大叔</div> <div v-color>前端伪大叔</div>
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
<div >前端伪大叔</div> <div v-color="‘red‘">前端伪大叔</div> <div v-color="‘blue‘">前端伪大叔</div>
可以通过给自定义的属性，添加属性的方式来修改颜色；当然不仅仅只能修改颜色这么简单，因为el直接获得了DOM，所以你懂得！
3、组件内指令-只有自己组件可以使用
注意：directives是一个对象，里面定义的自定义指令也是对象！
// template <div >前端伪大叔</div> <div v-color>前端伪大叔</div> // script // 这里是对象 directives:{ // 每个指令都是一个对象 color:{ inserted(el){ el.style.color = ‘cyan‘ } } }
4、组件内的自定义指令，增加属性
// template <div v-color="‘red‘">前端伪大叔</div> <div v-color="‘blue‘">前端伪大叔</div> // 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
如果大家喜欢的话，欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识！
标签：http 自己 vuejs 添加 知识 insert bre main 就会
原文地址：https://www.cnblogs.com/webfy/p/11565476.html
