「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

自定义指令

什么是自定义指令

vue官方提供了v-text、v-for、v-if、v-model等指令，此外vue还允许开发者自定义指令

私有自定义指令

在directives节点下声明私有自定义指令

<script>
	export default {
  	// 私有自定义指令的节点
    directives: {
    	// 定义名为color的指令，指向一个配置对象
      color: {
      	// 当指令第一次被绑定到元素上的时候，会立即触发bind函数
        // 形参el表示当前指令所绑定的那个DOM对象(element)
        bind(el){
        	console.log('触发了v-color的bind函数')
          el.style.color = 'red'	// 将相应DOM对象的文字改为红色
        }
      }
    }
  }
</script>

<!-- 使用自定义指令 -->
<template>
	<h1 v-color>自定义指令color</h1>
	<!-- 触发v-color指令时，会立刻调用里面的bind函数 -->
	<!-- h1内的文字会变成红色 -->
</template>

bind函数的第二个形参binding(官方的写法，写作别的名字如obj也可以)

<template>
	<h1 v-color="color">使用变量指定属性值,由data的数据</h1>
	<h2 v-color=" 'red' "> </h2>
	<!-- 注意不带引号是变量，带引号才是一个表达式的值 -->
	
</template>

<script>
	export default {
    data(){
    	color: blue
    },
  	// 私有自定义指令的节点
    directives: {
    	// 定义名为color的指令，指向一个配置对象
      color: {
        // 形参el表示当前指令所绑定的那个DOM对象
        bind(el, binding){
        	console.log('触发了v-color的bind函数')
          console.log(binding)
          // binding绑定的意思
          // 打印binding得到一个对象，其中的value属性就是使用指令时传递的数据
          el.style.color = binding.value	// 使用 用户指定的颜色
        }
      }
    }
  }
</script>

自定义属性中的update函数

bind函数的缺点：只能在自定义属性第一次绑定到元素上的时候触发一次，当数据改变的时候(DOM更新的时候)，不会自动触发bind函数，因而页面也不会重新渲染

update函数会在每次DOM更新时被调用(指令所在的模板被重新解析时)

<script>
	export default {
  	directives: {
    	// 定义名为color的指令，指向一个配置对象
      color: {
        // 形参el表示当前指令所绑定的那个DOM对象
        bind(el, binding){
        	console.log('触发了v-color的bind函数')
          el.style.color = binding.value	
        },
        // 每次DOM更新时被调用
        update(el, binding){
          console.log('触发了v-color的update函数')
        	el.style.color = binding.value
        }
      }
    }
  }
</script>

函数简写

上面的bind函数和update函数中的逻辑完全相同，这种情况下 对象格式的自定义指令 可以简写为函数格式

<script>
  export default {
  	directives: {
		// 在bind函数和update函数中会触发相同的业务逻辑
     // color: function(el, binding){ }
			color(el, binding){
				el.style.color = binding.value
			}
		}
  }
	
</script>

补充：

1. 我们之前写了 自定义指令与元素成功绑定时(一上来)就调用bind函数，每次DOM更新时(指令所在的模板被重新解析时)调用update函数，这都能实现自定义指令的操作。此外，还有一个时间点，就是自定义指令所在的元素被插入到页面的时候，就会调用inserted函数

<script>
	export default {
  	directives: {
				color: {
  				// 自定义指令与元素成功绑定时(一上来)就调用bind函数
          bind(element,binding){},
          
          // 自定义指令所在的元素被插入到页面的时候，就会调用inserted函数
          inserted(element,binding){},
          
          // 每次DOM更新时(指令所在的模板被重新解析时)调用update函数
          update(element,binding){}
  			}
  	})
  }
</script>

2. 所有由Vue管理的函数，他们的this都指向的是vm实例对象；而directives节点里面的自定义指令中的函数，他们的this都指向的是window(因为这些函数都是要操作DOM的)

全局自定义指令

全局共享的自定义指令需要通过 Vue.directive( ) 进行声明

注意：全局声明的自定义指令、过滤器等都要写在main.js里面

// 在main.js里面写入

	// 参数1：字符串，表示全局自定义指令的名字
  // 参数2：对象，用来接收指令的参数值
  Vue.directive('color', {
        bind(el, binding){
        	console.log('触发了v-color的bind函数')
          el.style.color = binding.value	
        },
    		// 每次DOM更新时被调用
        update(el, binding){
          console.log('触发了v-color的update函数')
        	el.style.color = binding.value
        }
  	}
                
  // 函数形式简写
  Vue.directive('color', function(el, binding){
  	el.style.color = binding.value
  })
  
  

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖