Vue自定义指令详解

在项目实战中，有可能需要对普通的 DOM 元素进行底层操作，这时候可以用自定义指令的方式实现。

定义一个 v-demo 指令，封装控制台输出元素的样例业务。在 input 元素中使用 v-demo 指令，页面在运行的时候，控制台上会输出 input 元素，代码如下：

<!-- 定义 Vue.js 的视图 -->
<div id="app">
    <input type="text" v-demo>
</div>
<script type="text/JavaScript">
    // 自定义一个名为 'demo' 的指令
    Vue.directive('demo', {
      inserted: function(el) {
        console.log(el);
      }
    });
    // 创建 Vue.js 对象
    const vm = new Vue({
      el: "#app",
    });
</script>

//控制台输出<input type="text">

同样，可以在组件内部注册一个局部指令，在组件里面使用。在 MyComponent 组件中定义 mydemo 指令，在组件的 div 和 input 元素中使用 mydemo 指令，代码如下：

<!-- 定义 Vue.js 的视图 -->
<div id="app">
    <my-component />
</div>
<script type="text/JavaScript">
    let MyComponent = {
      template: '<div v-mydemo><input v-mydemo type="text" value="default value"/></div>',
      directives: {
        mydemo: {
          inserted: function(el) {
            console.log('mydemo -> ' + el);
          }
        }
      }
    };
    // 创建 Vue.js 对象
    const vm = new Vue({
      el: "#app",
      components: {
        MyComponent: MyComponent
      }
    });
</script>
//控制台输出了 div 对象和 input 对象

钩子函数

在指令对象中包含 5 个钩子函数，它们分别如下：

bind：只调用一次，指令在第一次绑定到元素时调用。在这里可以进行一次性的初始化设置；
inserted：被绑定元素在插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）；
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有，但是可以通过比较更新前后的值来忽略不必要的模板更新；
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用；
unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

钩子函数有 el、binding、vnode 和 oldVnode 等 4 个参数，它们的特点和意义分别如下。

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

2) binding：一个对象，包含以下 property：

name：指令名，不包括v-前缀。
value：指令的绑定值，例如在 v-my-directive="1+1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如在 v-my-directive="1+1" 中，表达式为 "1+1"。
arg：传给指令的参数，可选。例如在 v-my-directive：foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo：true，bar：true}。

3) vnode: Vue.js 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

4) oldVnode：上一个虚拟节点，仅在 updat 和 componentUpdated 钩子中可用。

注意，除了 el 之外，其他参数都是只读的，切勿修改。

获取钩子参数的代码如下：

<!-- 定义 Vue.js 的视图 -->
<div id="app">
    <div v-demo:foo.a.b="message">hello, how are you</div>
</div>
<script type="text/JavaScript">
    Vue.directive('demo', {
      bind: function(el, binding, vnode) {
        var s = JSON.stringify;
        el.innerHTML =
          'name: ' + s(binding.name),
          'value: ' + s(binding.value),
          'expression: ' + s(binding.expression),
          'argument: ' + s(binding.arg),
          'modifiers: ' + s(binding.modifiers),
          'vnode keys: ' + Object.keys(vnode).join(', ')
      }
    });

    // 创建 Vue.js 对象
    const vm = new Vue({
      el: "#app",
      data: {
        message: "hello!"
      }
    });
</script>

指令的参数可以是动态的。例如，在 v-mydirective: [argument]="value" 中，argument 参数可以根据组件实例的数据进行更新，这使自定义指令可以在应用中被灵活使用。

通过动态参数，控制元素是固定在 left 还是固定在 top，代码如下：

<div id="dynamicexample">
  <h3>Scroll down inside this section</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed';
    // 根据动态参数判断是固定在left还是固定在top
    var s = (binding.arg === 'left' ? 'left' : 'top');
    el.style[s] = binding.value + 'px';
  }
});

new Vue({
  el: '#dynamicexample',
  data: function() {
    return {
      direction: 'left'
    };
  }
});

函数简写

如果 bind 和 update 触发相同的行为，而不关心其他的钩子，则可以用以下代码的方式统一实现：

Vue.directive('color-swatch', function (el, binding) {
    el.style.backgroundColor = binding.value;
});

对象字面量

如果指令需要多个值，则可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式，代码如下：

<div v-demo="{ color: 'white', text:'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color); // => "white"
  console.log(binding.value.text); // => "hello!"
});

Vue自定义指令详解

钩子函数

钩子函数参数

函数简写

对象字面量

相关文章