前言

第一章——v指令的使用

在上一篇文章中介绍到在Vue中一些指令的使用，按照官方的说法在 Vue2.0 中，代码复用和抽象的主要形式是组件，然而，有的情况下，仍然需要对普通 DOM 元素进行底层操作，这个时候就需要用到自定义指令。

全局指令

现在要做这样一条指令：当页面加载完成的时候，文本框自动聚焦。
实例如下：

<body>

<input type="text" v-focus>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
     
     
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
     
     
            // 聚焦元素
            el.focus()
        }
    })
</script>
</body>

这里使用Vue.directive进行全局命令的创建，这里有两个参数，一个是指令的名字，另一个是一个对象，用来实现逻辑的具体方法，当然里面会用到一些钩子函数，下面会提及。

局部指令

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
     
     
            el: '#app',
            data:{
     
     
                message:"message"
            },
            directives: {
     
     
                focus: {
     
     
                    // 指令的定义
                    inserted: function (el) {
     
     
                        el.focus()
                    }
                }
            }
        })
    
    </script>
</body>

局部指令的创建基本和全局指令创建相同，区别在于，在局部Vue对象中，添加了directives代表可以在这里声明多个指令，当然这条指令只能作用在"#app"的标签之内生效。
把全局指令和局部指令都搞明白，那么其他的功能（全局和局部）也都是信手拈来了，都是一个套路。

钩子函数

上面提到了钩子函数，一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

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

参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM
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 }
vnode：Vue 编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

实例如下：

<body>
    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        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: '#hook-arguments-example',
            data: {
     
     
                message: 'hello!'
            }
        })
    </script>
</body>

渲染结果如下

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, raw, isStatic, isRootInsert, isComment, isCloned,
isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder

在 bind 和 update 时触发相同行为，而不关心其它的钩子，可以这样简写：

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

在自定义指令的过程中，钩子函数的的作用十分重要，因为它决定着你的你的指令是否会挂载成功。

Vue第一章——自定义指令

前言

全局指令

局部指令

钩子函数

参数

猜你喜欢