Vue — 自定义指令

一、自定义指令语法

1.全局注册

//main.js
Vue.directive('focus', {
  inserted(el) {
    el.focus(
  }
});

//App.vue
<input v-focus />

2.局部注册

<script>
export default {
  directives: {
    'focus': {
     inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

二、自定义指令的值

<h1 v-color="color1">测试11111</h1>
 <h1 v-color="color2">测试22222</h1>
//通过v-指令名 = “指令值”,通过=绑定指令的值

data(){
    return {
      color1 : 'pink',
      color2 : 'lightBlue'
    }
  },
  directives :{
    color : {
      inserted(el,binding){
　　　　//binding.value拿到指令的值
        el.style.color = binding.value
      }
    }
  }

三、自定义指令的钩子函数

Vue.directive('custom-directive', {
  bind(el, binding, vnode) {
    // 指令绑定时的处理逻辑
  },
  inserted(el, binding, vnode) {
    // 元素插入到父节点时的处理逻辑
  },
  update(el, binding, vnode, oldVnode) {
    // 更新元素时的处理逻辑
  },
  componentUpdated(el, binding, vnode, oldVnode) {
    // 组件更新完成时的处理逻辑
  },
  unbind(el, binding, vnode) {
    // 解绑指令时的处理逻辑
  }
});

在上面的代码中，bind、inserted、update、componentUpdated 和 unbind 是钩子函数，用于处理不同阶段的指令逻辑。这些钩子函数分别在不同的生命周期阶段被调用。