Vue 自定义指令

在接触 Vue 自定义指令的之前，我们需要了解到 钩子函数，在 Windows 中，钩子函数实在 Windows 消息处理机制中的一部分，可以通过设置钩子来实现自己想要的需要效果。在 Vue 中每个被创建的实例都需要经过一系列初始化的过程，如果需要设置数据监听、编译或挂载DOM时，会调用一个生命周期的钩子，而此时我们可以在此加入一些code来实现自己想要的效果。

钩子函数

钩子函数即在Vue实例中插入一段code来满足自己下需求，截至vue 2.x 版本内，共支持的钩子函数共有：

钩子参数

自定义指令

全局指令

我们以一个非常经典的案例作为一个例子，当页面加载的时候，该选素将会获得焦点：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="app">
    <input v-focus>
</div>
<script>
    Vue.directive('focus', {
        inserted: function(el) {
            el.focus()
        }
    })
    new Vue({
        el: '#app'
    })
</script>

通过 directive我们注册了一个名为focus的全局组件，其主要作用就是：“当该页面加载的时候”，他会自动获取焦点仅此而已，并且我们还使用了inserted钩子函数，以用于绑定父节点中欧调用focus。

局部指令

通常而言，全局自定义指令与局部自定义指令之间的区别可以从code看出，全局注册指令是单独来写的即：

1
2
3
4
5

Vue.directive('focus', {
    inserted: function(el) {
        el.focus()
    }
})

而局部自定义指令是在初始化vue时写的，即之可以在本身的Vue实例中进行使用，除此之外他们之间的区别还可以是一个是通过directive来定义，另一个则是通过使用directives来实现的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="app">
    <input v-focus>
</div>
<script>
    new Vue({
        el: '#app',
        directives: {
            focus: {
                inserted: function(el) {
                    el.focus()
                }
            }
        }
    })
</script>