vue 自定义指令

定义一个big指令，和v-text功能类似，但会吧绑定的值放大10倍
定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

函数形式

directives: { 
    // big何时被调用：指令与元素绑定成功时，指令所在的模板被重新解析时
    big(el, binding) {
      // console.dir(el);
      // el：指令所绑定的元素，可以用来直接操作 DOM。
      // binding：一个对象，包含以下 property：
      el.innerText = binding.value * 10;
    }, 
}

对象形式

directives: { 
    fbind: {
      // 指令与元素绑定成功时调用
      bind(el, binding) {
        console.log("bind");
        el.value = binding.value;
      },
      // 指令所在元素被插入页面时调用
      inserted(el, binding) {
        console.log("inserted");
        el.focus();
      },
      // 指令所在的模板被重新解析时
      update(el, binding) {
        console.log("update");
        el.value = binding.value;
        el.focus();
      },
    },
  },

全局自定义指令

//函数全局自定义指令
Vue.directive('big', function (el, binding) {
  el.innerText = binding.value * 10;
})

// 对象全局自定义指令
Vue.directive('fbind', {
  bind(el, binding) {
    console.log("bind");
    el.value = binding.value;
  },
  // 指令所在元素被插入页面时调用
  inserted(el, binding) {
    console.log("inserted");
    el.focus();
  },
  // 指令所在的模板被重新解析时
  update(el, binding) {
    console.log("update");
    el.value = binding.value;
    el.focus();
  },
})

完整例子

<template>
  <div>
    <p>当前n值是：<span v-text="n"></span></p>
    <p>放大n值是：<span v-big="n"></span></p>
    <button @click="n++">+1</button>

    <hr />

    <p>v-bind：<input type="text" v-bind:value="n" /></p>
    <p>v-fbind：<input type="text" v-fbind:value="n" /></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      n: 1,
    };
  },
  directives: {
    // 函数形式
    // big何时被调用：指令与元素绑定成功时，指令所在的模板被重新解析时
    big(el, binding) {
      // console.dir(el);
      // el：指令所绑定的元素，可以用来直接操作 DOM。
      // binding：一个对象，包含以下 property：
      el.innerText = binding.value * 10;
    },

    // 对象形式
    fbind: {
      // 指令与元素绑定成功时调用
      bind(el, binding) {
        console.log("bind");
        el.value = binding.value;
      },
      // 指令所在元素被插入页面时调用
      inserted(el, binding) {
        console.log("inserted");
        el.focus();
      },
      // 指令所在的模板被重新解析时
      update(el, binding) {
        console.log("update");
        el.value = binding.value;
        el.focus();
      },
    },
  },
};
</script>