vue中自定义指令（directive）的基本使用方法

目录

• 前言
• 正文

• 1.全局注册
• 2.局部注册
• 3.钩子函数及参数设置
• 4.灵活用法

• （1）动态指令参数
• （2）函数简写方式
• （3）对象字面量方式

<div id="app">
    <h1 type="text" v-red>我是h1元素</h1>
    <div v-red>我是div元素</div>
    <p v-red>我是p元素</p><br>
    <input type="text" v-red><br>
  </div>
  <script>
    Vue.directive("red", {
      // 指令的定义
      inserted: function (el) {
        console.log(111);
        el.style.border = "1px solid red"
      }
    })
    new Vue({
      el: "#app",
      data() {
        return {
        }
      },
      methods: {
      }
    })
  </script>

<div id="app">
    <border-item></border-item>
  </div>
  <script>
    Vue.directive("red", {
      // 指令的定义
      inserted: function (el) {
        console.log(111);
        el.style.border = "1px solid red"
      }
    })
    // 定义子组件
    Vue.component("border-item", {
      directives: {
        blue: {
          // 指令的定义
          inserted: function (el) {
            el.style.border = "1px solid blue"
          }
        }
      },
      template: `<div>
                    <h1  v-blue>我是子组件h1元素</h1>
                    <div v-blue>我是子组件div元素</div>
                    <p v-blue>我是子组件p元素</p><br>
                    子组件<input type="text" v-blue><br>
                    <p  v-blue>我是子组件h1元素,我同时使用了全局和局部自定义指令</p>
                </div>`
    })
    new Vue({
      el: "#app",
      data() {
        return {
        }
      },
      methods: {
      }
    })
  </script>

<div id="app">
    <h1 v-border="redBorder">我是动态指令参数的元素1</h1>　　
    <h1 v-color:[pro]="redBg">我是动态指令参数的元素2</h1>
  </div>
  <script>
    Vue.directive("border", {
      bind: function (el, binding, vnode) {
        console.log("el", el);
        console.log("binding", binding);
        console.log("vnode", vnode);
        el.style.border = binding.value
      }
    })
    Vue.directive("color", {
      bind: function (el, binding, vnode) {
        console.log("el", el);
        console.log("binding", binding);
        console.log("vnode", vnode);
        el.style[binding.arg] = binding.value
      }
    })
    new Vue({
      el: "#app",
      data() {
        return {
          redBorder: "1px solid red",
          pro: "backgroundColor",
          redBg: "green"
        }
      },
      methods: {
      }
    })
  </script>

    Vue.directive("border", 
      function (el, binding, vnode) {
        el.style.border = binding.value
      }
    )

<div id="app">
    <h1 v-color="{ color: 'red', text: 'hello!' }">我是对象字面量形式</h1>
  </div>
  <script>
    // 对象字面量
    Vue.directive('color', function (el, binding) {
      console.log(binding.value.color) // => "red"
      console.log(binding.value.text)  // => "hello!"
      el.style.color = binding.value.color
      el.innerHTML = binding.value.text
    })
    new Vue({
      el: "#app",
      data() {
        return {
        }
      },
      methods: {
      }
    })
  </script>