除了核心功能默认内置的指令 (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
如果大家喜欢的话,欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识!
原文地址:https://www.cnblogs.com/webfy/p/11565476.html
时间: 2024-10-13 11:10:37