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'
  		}
  	}
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9

  directives:{
  	color:{
  		//为绑定到的HTML元素设置红色的字体颜色
  		bind(el,binding){
  			//形参中的el是绑定了此指令的，原生的DOM对象
  			//在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值
  			//通过 binding 对象的 .value属性，获取动态的参数值
  			el.style.color = binding.value
  		}
  	}
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  自定义指令的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
  		}
  	}
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

  **自定义指令的简写：**如果insert 和update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式。

  directives:{
  	//在insert和update时，会触发相同的业务逻辑
  	color(el,binding){
  		el.style.color = binding.value
  	}
  }
  1
  2
  3
  4
  5
  6

• 全局自定义指令

  全局共享的自定义指令需要通过“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
  })
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

3.自定义指令的使用

• 使用自定义指令

  在使用自定义指令时，需要加上v- 前缀。

  
  
  App 组件
  1
  2
  3

• 为自定义指令动态绑定参数值

  在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值。

  data(){
  	return {
  		color:'red'//定义color颜色值
  	}
  }
  
  App 组件
  1
  2
  3
  4
  5
  6
  7