Vue学习——指令(四)

本文承接上文，继续对Vue的指令进行介绍，同时也是指令系列的终章。建议读者先阅读上篇文章，以免有不解之处。前文请参考“Vue学习——指令(三)”

自定义指令

前文已经介绍了Vue所有的内置指令，这些指令可以满足大多数业务需求，然而，在某些特殊情况下，我们希望可以对普通的DOM元素进行底层操作，这时我们就需要用到自定义指令了。

自定义指令的注册

自定义指令需要注册后才能使用，Vue提供了两种注册方式：全局注册和局部注册。全局注册使用Vue.directive()方法来注册一个全局自定义指令，该方法接收两个参数，第一个参数是指令的ID；第二个参数是一个定义对象或者函数对象，指令要实现的功能在这个对象中定义。

语法形式如下：

Vue.directive(id, [definition])

例如，要编写一个让元素自动获取焦点的全局指令,代码示例如下：

Vue.directive('focus', {...})

全局指令可以在任何Vue实例的模版中使用，代码示例如下：

<div id="app">
    <input v-focus>
</div>

<div id="app2">
    <input v-focus>
</div>

<script>
    Vue.directive('focus', {
        // ...
    })
    new Vue({
        el: '#app'
    })

    new Vue({
        el: '#app2'
    })
</script>

v-focus是一个全局自定义指令，因此可以在任何Vue实例的模版中使用。

局部注册是在Vue实例的选项对象中使用directives选项进行注册，代码示例如下：

new Vue({
    el: '#app',
    directives: {
        // 注册一个局部的自定义指令
        focus: {
            // ...
        }
    }
})

局部注册的自定义指令只能在该实例绑定的视图中使。

看下面的示例：

<div id="app">
    <input v-focus>
</div>

<div id="app2">
    <input v-focus>
</div>

<script>
    new Vue({
        el: '#app'
        directives: {
            // 注册一个局部的自定义指令
            focus: {
                // ...
            }
        }
    })

    new Vue({
        el: '#app2'
    })
</script>

在浏览器打开该页面时，Vue会给出一个警告信息：[Vue warn]: Failed to resolve directive: focus

钩子函数

自定义指令的功能是在定义对象中实现的，而定义对象则是由钩子函数组成的，Vue提供了下面几个钩子函数，这些钩子函数都是可选的。

bind: 只调用一次，指令第一次绑定到元素时调用。指令如果需要一些一次性的初始化设置，可以放到这个钩子函数中。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用，不必存在于document对象中)
update: 所在组件的VNode更新时调用(无论指令的值是否发生了变化)，但是可能发生在其子VNode更新之前。可以通过比较更新前后的值来忽略不必要的模版更新。
componentUpdated: 指令所在组件的VNode及其子VNode全部更新后调用。
unbind: 只调用一次，指令与元素解绑时调用。

根据指令要实现功能的不同，选择相应的钩子函数来编写代码。

例：在元素插入父节点时自动获得焦点，代码示例如下：

<div id="app">
    <input v-focus>
</div>

<script>
    // 注册一个全局自定义指令
    Vue.directive('focus', {
        // 当绑定元素插入父节点时
        inserted: function(el) {
            el.focus()
        }
    })

    new Vue({
        el: '#app'
    })
</script>

指令的钩子函数可以带有一些参数，例如上述代码中的el参数，具体的参数列表如下所示：

el：指令所绑定的元素，可以用来直接操作DOM。
binding：一个对象，包括以下属性：
- name：指令名，不包括v-前缀。
- value：指令的绑定值。
- oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。
- arg：传给指令的参数，可选。
- modifiers：一个包含修饰符的对象。
vonde：Vue编译生成的虚拟节点。
oldVonde：上一个虚拟节点，仅在update和componentUpdated钩子中可用。

要注意的是，除了el参数外，其他参数都应该时只读的，切勿进行修改。

下面编写一个自定义指令，在其钩子函数中将各个参数输出，代码示例如下：

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

<script>
    Vue.directive('demo', {
        bind: function(el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML = 
                'name: ' + s(binding.name) + '<br>' +
                'value: ' + s(binding.value) + '<br>' +
                'expression: ' + s(binding.expression) + '<br>' +
                'argument: ' + s(binding.arg) + '<br>' +
                'modifiers: ' + s(binding.modifiers) + '<br>' +
                'vnode keys: ' + Object.keys(vnode).join(',') 
        }
    })

    new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        }
    })
</script>

我们将bind钩子函数的所有参数信息取出来拼接成字符串，赋值给<div>元素的innerHTML属性。渲染结果如下：

name: "demo"
value: "Hello"
expression: "message"
argument: "foo"
modifiers: {"a": true, "b": true}
vnode keys: tag, data, children, text, elm, ns, context, fnContext, fnOptions, fnScopeId, key, componentOptions, componentInstance, parent, ra, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder

动态指令参数

在之前的文章中已经介绍过，指令的参数可以是动态参数，同样地，自定义的指令也可以使用动态参数。

例：我们想让某个元素固定在页面中的某个位置，在出现滚动条时，元素也不会随着滚动。这可以通过设置CSS样式属性position为fixed来实现，同时使用top、right、botton、left等属性以窗口为参考点来进行定位。下面通过自定义指令来实现这个功能。代码示例如下：

<div id="app">
    <!--  直接给出指令的参数  -->
    <p v-pin:top="100">
        Vue学习
    </p>
    <!--  使用动态参数  -->
    <p v-pin:[direction]="100">
        Vue学习
    </p>
</div>

<script>
    Vue.directive('pin', {
        bind: function(el, binding, vnode) {
            el.style.position = 'fixed';
            let s = binding.arg || 'left';
            el.style[s] = binding.value + 'px'
        }
    })

    new Vue({
        el: '#app',
        data: {
            direction: 'left'
        }
    })
</script>

函数简写

如果自定义指令在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)
    console.log(binding.value.text)
})

以上便是Vue指令这一系列的全部内容，应该说最常用的指令就是v-if、v-for、v-on、v-bind和v-model，只要熟练掌握这五个指令的用法即可完成大部分工作。

此外，在指令系列还介绍了自定义指令的开发。需要注意的是，自定义指令只应该用于封装对DOM的操作，不要将其用作别的用途。在某些特殊需求下，通过自定义指令来封装DOM操作，可以简化代码的编写，提高代码的重用型。

在下篇文章中，打算写几个实际场景中用得到的示例，敬请期待！