Vue-自定义指令
1. 什么是自定义指令
vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 还允许开发者自定义指令。
2. 自定义指令的分类
-
私有自定义指令
在每个vue 组件中,可以在directives节点下声明私有自定义指令。
bind函数:只调用一次,指令第一次绑定元素时调用,在这里可以进行一次性的初始化设置。
directives:{ color:{ //为绑定到的HTML元素设置红色的字体颜色 bind(el){ //形参中的el是绑定了此指令的,原生的DOM对象 el.style.color = 'red' } } }
directives:{ color:{ //为绑定到的HTML元素设置红色的字体颜色 bind(el,binding){ //形参中的el是绑定了此指令的,原生的DOM对象 //在声明自定义指令时,可以通过形参中的第二个参数,来接收指令的参数值 //通过 binding 对象的 .value属性,获取动态的参数值 el.style.color = binding.value } } }
自定义指令的update函数:所在组件的 Vnode 更新时调用,但是可能发生在其子 VNode 更新之前,指令的值可能发生了变化,也可能没有,但是可以通过比较更新前后的值来忽略不必要的模板更新。bind 函数只调用1 次:当指令第一次绑定到元素时调用,当DOM 更新时bind 函数不会被触发。update 函 数会在每次DOM 更新时被调用。
directives:{ color:{ //当指令第一次被绑定时被调用 bind(el,binding){ el.style.color = binding.value }, //每次 DOM 更新时被调用 update(el,binding){ el.style.color = binding.value } } }
**自定义指令的简写:**如果insert 和update函数中的逻辑完全相同,则对象格式的自定义指令可以简写成函数格式。
directives:{ //在insert和update时,会触发相同的业务逻辑 color(el,binding){ el.style.color = binding.value } }
-
全局自定义指令
全局共享的自定义指令需要通过“Vue.directive()”进行声明。
//参数1:字符串,表示全局自定义指令的名字 //参数2:对象,用来接收指令的参数值 Vue.directive('color',{ bind(el,binding){ el.style.color = binding.value }, update(el,binding){ el.style.color = binding.value } }) //简写 Vue.directive('color',function(el,binding){ el.style.color = binding.value })
3.自定义指令的使用
-
使用自定义指令
在使用自定义指令时,需要加上v- 前缀。
<!-- 声明自定义指令时,指令的名字是color --> <!-- 使用自定义指令时,需要加上v-指令前缀 --> <h1 v-color>App 组件</h1>
-
为自定义指令动态绑定参数值
在 template 结构中使用自定义指令时,可以通过等号(=)的方式,为当前指令动态绑定参数值。
data(){ return { color:'red'//定义color颜色值 } } <!-- 在使用指令时,动态为当前指令绑定参数值 color --> <h1 v-color="color">App 组件</h1>