vue自定义指令

什么是指令?

指令 (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自定义指令的一些简单应用,你可以创建出更高级灵活的自定义指令。

posted @ 2017-11-22 13:08  黑色瓶子  阅读(304)  评论(0编辑  收藏  举报