Vue2学习 （5） ref的使用+自定义指令

ref的引用

​ ref 用来获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

• 使用console.log(this),可以查看到$refs:

• 使用 ref 引用页面上的 DOM 元素:

  //在APP.vue中
   <p ref="myP" @click="Change">APP根组件</p>
  
  ......
  
  
   methods: {
      Change(){
        //console.log(this)
  	  //通过$ref操作DOM,点击后字体颜色变成红色
        this.$refs.myP.style.color = 'red'
      }
    }
  

• this.$nextTick(cb) 方法

  cb即callback,会把 cb 回调推迟到下一个 DOM 更新周期之后执行，也就是等组件的DOM 更新完成之后，再执行 cb 回调函数，从而操作到最新的 DOM 元素。

自定义指令

• vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

• 私有自定义指令

  在每个 vue 组件中，可以在 export default中的directives 节点下声明私有自定义指令，例如：

  <!--APP.vue中-->
    <!--<template>中-->
  		<h1 v-color>app</h1>
  
  ...
  
  export default {
  	directives:{
  		//定义名为color的指令
  		color:{
  			//当指令第一次被绑定到元素上时，立即触发bind函数
  			//el表示当前指令所绑定的那个DOM对象
  			bind(el) {
  			//字体颜色设为红色
  				el.style.color = "red"
  }
  }
  }
  }
  

• 通过 binding 获取指令的参数值

  在声明自定义指令时，可以通过形参中的第二个参数，来接收指令的参数值：

  ...
  <h1 v-color="color"></h1>
  
  ...
  
  date() {
  	return {
  		color: 'blue'
  }
  },
  directives: {
     color: {
        bind(el, binding) {
          el.style.color = binding.value
        },
  
  	//bind 函数只会在指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。 update 函数会在每次 DOM 更新时被调用。
  	  update(el, binding) {
          el.style.color = binding.value
        }
      } 
    }
  

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

color(el, binding) {
      el.style.color = binding.value
    }

• 全局自定义指令

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

  //main.js中
  /* 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
  })