vue中自定义指令使用

自己定义指令, 封装DOM操作(对普通 DOM 元素进行底层操作 )，扩展额外功能

全局注册 - 语法
// 指令名要带引号
Vue.directive("指令名”, {
  // 当被绑定的元素插入到 DOM 中时insert函数起作用
  inserted(el，binding) {
    //对el进行操作
  }
})

局部注册 - 语法
  directives: {
    指令名: {
      inserted(el,binding) {
        // 对el进行操作
      }
    }
  }

el：指令所绑定的元素，可以用来直接操作 DOM

binding：一个对象，常用以下属性：更多可见文档 name：指令名，不包括 v- 前缀； value：指令的绑定值;

oldValue：指令绑定的前一个值 ;

例如：

main.js

// 自定义指令v-size 全局注册
Vue.directive("size", {
  inserted(el) {
    el.style.fontSize = "100px"
  }
})

也可以注册局部指令v-color如下，注册后可以在template中任何元素上作为属性一样使用

app.vue

<template>
  <div>
    <h1 v-color v-size>here</h1>
  </div>
</template>

<script>
export default {
  // 局部注册
  directives: {
    color: {
      inserted(dom) {
        // 在自定义指令插入的标签渲染dom时insert函数起作用
        dom.style.color = "red";
      },
    },
  },
};
</script>

自定义指令 - 传值

需求：定义color指令——传入一个颜色, 给标签设置文字颜色 语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值。

通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数。

app.vue

<template>
  <!-- 需求：定义color指令-传入一个颜色, 给标签设置文字颜色 -->
  <div>
    <h1 v-color="red" v-size>here</h1>
    <h1 v-color="blue" v-size>here</h1>
    <h1 v-color="yellow" v-size>here</h1>
    <button @click="red = 'black'">改红色为黑色</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      red: "red",
      blue: "blue",
      yellow: "yellow",
    };
  },
  // 局部注册
  directives: {
    color: {
      inserted(dom, binding) {
        // 这里的dom就是我们指令所在的标签的dom
        // 在自定义指令插入的标签渲染dom时insert函数起作用
        dom.style.color = binding.value;
      },
      //update会在指令的值v-指令=“变量”中，变量变化的时候触发
      update(dom, binding) {
        //  binding.value是我们传给指令的值
        dom.style.color = binding.value;
      },
    },
  },
};
</script>