vue自定义指令

Posted 2020-10-15 黑色瓶子

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊属性。 它可以写在DOM元素上，对html进行操作。常用的指令比如有：v-if，v-else，v-show，v-for等。这些都是官方直接给定的，另外Vue也允许注册自定义指令，有时这很有用。

 

自定义指令方法

自定义一个指令很简单,官网给出一个简单的例子，自定义一个聚焦指令v-focus：

// 注册一个全局自定义指令 `v-focus`
Vue.directive(‘focus‘, {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

上面几行代码就全局注册了一个指令并可以执行，当给一个输入框加上这个指令时，页面加载就会使该框获得焦点。

<input v-focus>

说明：

‘focus‘：如你所见，是指令的名称，不带v-前缀；

inserted：这是一个钩子函数，表示被绑定元素插入父节点时调用，指令定义函数提供了多个钩子函数，下面再介绍。

另外，你也可以局部注册指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

 

钩子函数介绍

指令定义函数提供了几个钩子函数（可选）

• bind：只调用一次，指令第一次绑定到元素时调用。

• inserted：被绑定元素插入父节点时调用。

• update：所在组件的VNode更新时调用，但是可能发生在其子 VNode 更新之前。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

 

他们中每一个都有相同的三个参数：el，binding和vnode，在update和componentUpdated中，还会有参数oldVnode，以区分传递的旧值和新值。

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

• binding：一个对象，包含以下属性：name，value，oldValue，expression，arg和modifiers。

• vnode：Vue 编译生成的虚拟节点。

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

注意：除了 el 之外，其它参数都应该是只读的。

 

其中，你注意到binding参数中有多个属性，要搞清楚他们分别代表了什么，这很重要。

<div id="app">
    <p v-demo:foo.a.b="message"></p>
</div>

Vue.directive(‘demo‘,{
    bind(el, binding, vnode){
        //给绑定的元素添加内容
        el.innerHTML = `
        name:${binding.name};<br>
        value:${binding.value};<br>
        expression:${binding.expression};<br>
        argument:${binding.arg};<br>
        modifiers:${JSON.stringify(binding.modifiers)};
        `
    }
});


new Vue({
    el:‘#app‘,
    data:{
        message:"hello"
    }
});

结果：

name:demo; //指令名，不包括 v- 前缀
value:hello; //指令的绑定值
expression:message; //字符串形式的指令表达式
argument:foo; //传给指令的参数，可选。
modifiers:{"a":true,"b":true}; //一个包含修饰符的对象。

还有一个oldValue是指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

 

到这里，你可能有点糊涂了，东西看起来有点多，其实并不是，你只是不熟悉。这些官网介绍的很清楚，你需要的是一个更具体的例子。

 

写一个自己的指令

现在来创建一个自定义指令，比如我想创建一个可以操作定位的指令，就叫他 v-position。

Vue.directive(‘position‘,{
    bind(el, binding, vnode){
        el.style.position = ‘fixed‘;
        el.style.top = binding.value + ‘px‘;
    }
});

<div id="app">
    <p v-position=‘100‘>我距离顶部100px</p>
</div>

 

现在v-position只能控制到顶部的距离，我们还可以自由控制方向：

<p v-position:left=‘50‘>我距离左侧50px</p>

Vue.directive(‘position‘,{
    bind(el, binding, vnode){
        el.style.position = ‘fixed‘;
        let d = (binding.arg == ‘top‘?‘top‘:‘left‘);
        el.style[d] = binding.value + ‘px‘;
    }
});

 

另外，你还可以控制多个值：

<p v-position="{top:‘100‘,left:‘50‘}">我距离左侧50px，距离顶部100px</p>

Vue.directive(‘position‘,{
    bind(el, binding, vnode){
        el.style.position = ‘fixed‘;
        el.style.top = binding.value.top + ‘px‘;
        el.style.left = binding.value.left + ‘px‘;
    }
});

这就是vue自定义指令的一些简单应用，你可以创建出更高级灵活的自定义指令。