vue中directive

孙景荣

已于 2023-02-01 14:35:56 修改

阅读量655

点赞数

分类专栏： vue2 文章标签： vue.js javascript 前端 html css

于 2022-10-07 10:43:49 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127191765

版权

vue2 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、自定义指令

vue 作者允许开发者自己创建一些指令，指令的类型分为全局自定义指令和局部自定义指令

指令的生命周期钩子函数：
1.bind(el,binding){} 指令第一次绑定到元素的时候触发，el表示当前绑定指令的元素，binding表示参数对象(可选项)，该生命周期中无法获取到父节点
2. inserted(el,binding){} 表示绑定指令的元素插入到父节点的时候触发，该生命周期可以获取到父节点
3. update(el,binding){} 绑定指令的元素上的数据发生更新的时候触发
4. componentUpdated(el,binding){} 绑定指令的元素节点更新时,触发
5. unbind(el,binding){} 表示当前指令解除绑定的时候触发

二、全局自定义指令

Vue.directive(指令名, {生命周期钩子函数})，全局指令可以在不同的组件实例中使用

这段代码，在vue上定义了全局指令v-color，使用该指令将元素字体颜色调为对应颜色，例如<p v-color='"red"'>{{msg}}</p>将p标签字体调为红色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <p v-color='"red"'>{{msg}}</p>
    </div>
  </body>
</html>
<script>
  Vue.directive("color", {
    bind(el, binding) {
      el.style.color = binding.value;
      console.log(el.parentNode);
    },
    inserted(el, binding) {
      console.log(el.parentNode);
    },
    update() {},
    componentUpdated() {},
    unbind() {},
  });

  const vm = new Vue({
    el: "#app",
    data: {
      msg: "白日依山尽",
    },
  });
</script>

三、局部自定义指令

局部指令 directives: {指令名1: {生命周期钩子函数}, 指令名2: {生命周期钩子函数},…}，局部指令只能在当前的组件中使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <p v-green='"green"'>{{msg}}</p>
      <p v-red>{{msg}}</p>
    </div>
    <hr />
    <div id="app2">
      <p v-green='"green"'>{{msg}}</p>
      <p v-red>{{msg}}</p>
    </div>
  </body>
</html>
<script>
  Vue.directive("red", {
    bind(el) {
      el.style.color = "red";
    },
  });

  const vm = new Vue({
    el: "#app",
    data: {
      msg: "欲穷千里目",
    },
    methods: {},
    directives: {
      green: {
        bind(el, binding) {
          el.style.color = binding.value;
        },
        inserted(el, binding) {},
        update() {},
        componentUpdated() {},
        unbind() {},
      },
    },
  });

  const vm2 = new Vue({
    el: "#app2",
    data: {
      msg: "欲穷千里目",
    },
  });
</script>