VUE自定义指令

一、自定义指令的用法（函数式&对象式）

<div id="root">
  <h2>当前的n值是: <span v-text="n"></span> </h2>
  <h2>放大10倍后的n值是: <span v-big="n"></span> </h2>
  <button @click="n++">点我n+1</button>
  <hr>

  <input type="text" v-fbind:value="n">
</div>

<script>
  const vm = new Vue({
    el: '#root',
    data: {
      n: 1
    },
    directives: {
      // big函数何时会被调用？
      // 1. 指令与元素成功绑定时（一上来，初始化）
      // 2. 指令所在的模板被重新解析时
      big(element, binging) {
        element.innerText = binging.value * 10;
      },
      // fbind(element, binding) {
      //     element.value = binding.value;
      //     // focus()无效,因为input元素第一次调用的时候还未生成
      //     element.focus();
      // }
      fbind: {
        // 当指令与元素成功绑定时（一上来）
        bind(element, binding) {
          console.log('bind');
          element.value = binding.value;
        },
        // 指令所在元素被插入页面时
        inserted(element, binding) {
          console.log('inserted');
          element.focus();
        },
        // 指令所在的模板被重新解析时
        update(element, binding) {
          console.log('update');
          element.value = binding.value;
        }
      }
    }
  });
</script>

二、使用注意事项

• 当指令名使用多个单词时

v-big-number

'big-number'(element, binding) { ... }

• 指令相关的回调函数（big, bind, inserted, update）中this的指向为window

• 全局指令

  Vue.directive('big', function(element, binding) {
  	...
  });
  或者
  Vue.directive('big', {
  	bind() {...},
  	inserted() {...},
  	update() {...}
  });