VUE2的自定义指令

目录

1- 私有自定义指令

2- 全局自定义指令

---

1- 私有自定义指令

在每个vue 组件中，可以在directives节点下声明私有自定义指令。

bind 函数 只调用1次：当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发。

update函数 会在每次DOM更新时被调用。

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

App.vue： 

<template>
  <div>
    <h1 v-color>App根组件</h1>
    <p v-color="setcolor">通过binding属性</p>
    <h3 v-color="'red'">直接赋值</h3>
    <button @click="setcolor = 'yellow'">改变color的颜色值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      setcolor: "blue",
    };
  },
  //私有自定义指令的节点
  directives: {
    //定义名为color的指令，指向一个配置对象
    /*
   color: {
      //当指令[第一次]被绑定到元素上的时候，会立即触发 bind函数
      //形参中的el 表示当前指令所绑定到的那个DOM对象---指令所在元素
    bind(el, binding) {
        console.log("触发了v-color的bind函数", "el是----", el);
        el.style.color = "green";
        console.log("binding", binding);
        el.style.color = binding.value;
      },
      //每次DOM更新时被调用
      update(el, binding) {
        console.log("触发了v-color的update函数", "el是----", el);
        el.style.color = binding.value;
      },
    },
    // 指令的本质: 代替DOM的选择器, 可以快速查找到元素, 然后自动触发
      */
    //简写形式
    color(el, binding) {
      el.style.color = binding.value;
    },
  },
};
</script>

<style lang="scss" scoped></style>

2- 全局自定义指令

main.js

import Vue from 'vue'
import App from './App.vue'
// 导入 bootstrap 样式表
import 'bootstrap/dist/css/bootstrap.css'

Vue.config.productionTip = false

//注册全局自定义指令
/* 
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
})
new Vue({
  render: h => h(App)
}).$mount('#app')

效果：