Vue 自定义指令

前面的话

我们知道Vue有许多内置的指令，比如v-if、v-show等，不过有时我们需要对DOM进行底层操作，这时就要使用自定义指令。

指令注册

与组件注册一样，分为全局注册与局部注册

这里注册一个v-focus的指令：用于在 元素初始化时自动获得焦点

[全局注册]

    Vue.directive('focus',{
        // 指令选项
    })

[局部注册]

     var app = new Vue({
         el:"#app",
         directives: {
             focus: {
                 // 指令选项
             }
         }
     })

钩子函数

自定义指令选项的几个函数钩子：

• bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个初始化动作
• inserted： 被绑定元素插入父结点时调用。
• update： 被绑定元素所在模板更新时调用
• componentUpdated： 被绑定元素所在模板完成一次更新周期时调用
• unbind: 只调用一次，指令与元素解绑时调用

完善上面的v-focus指令：

我们希望元素插入父结点时就调用，最好使用inserted钩子：

<div id="app">
        <input type="text" v-focus>
    </div>
<script>
 Vue.directive('focus',{
        inserted: function(el) {
            // 元素聚焦
            el.focus();
        }
    })
    var app = new Vue({
        el: '#app'
    })
</script>

钩子函数参数

我们可以看到钩子函数里有一个参数el,其实每个钩子函数都有几个参数可用：

• el: 指令所绑定的元素，可以直接操作dom

• binding： 一个对象，包含以下属性：

  • name：指令名 不包含v-
  • value： 指令的绑定值，例如v-myDirective=“1+1”,value值为2
  • oldValue： 指令绑定的前一个值，仅在update与componentUpdate钩子中可用
  • expression： 绑定值的字符串形式，例如v-myDirective=“1+1”,expression值为"1+1"
  • arg: 传给指令的参数。例如例如v-myDirective=foo，arg值为foo
  • modifiers: 一个包含修饰符的对象，例如v-myDirective.foo.bar,modifiers的值为：{foo: true,bar: true}

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

• oldVnode: 上一个虚拟节点，仅在update与componentUpdate钩子中可用

[注意]： 除了 el 之外，其它参数都是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行 。

具体实例：

<div id="app1">
        <div v-test:msg.a.b="message"></div>
    </div>
<script>
   Vue.directive('test',{
        bind: function(el, binding, vnode) {
            el.innerHTML = 
            'name:' + binding.name + '<br>'+
            'value:' + binding.value +'<br>'+
            'expresstion:'+ binding.expression +'<br>'+
            'argument:' + binding.arg + '<br>' +
            'modifiers:' + JSON.stringify(binding.modifiers) +'<br>'+
            'vnode keys:' + Object.keys(vnode).join(',');

        }
    })
    var app1 = new Vue({
        el: "#app1",
        data: {
            message: 'some text'
        }
    }) 
    </script>

对象字面量

如果指令需要多个值，可以使用对象字面量

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