vue自定义指令

1.什么是指令？

学习vue的时候肯定会接触到指令，那什么是指令呢？

• vue中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，一般都是以v-开头
• 指令中封装了一些 DOM 行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，会进行相关 DOM 操作的绑定，即可以进行一些模板的操作

2.全局注册自定义指令

我们通过注册一个 v-focus 指令，实现了在页面加载完成之后自动让输入框获取到焦点的小功能。

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

3.局部注册自定义指令

同样的是一个获取焦点的指令v-focus2，通过在Vue实例中添加 directives 对象数据注册局部自定义指令。

<script>
    new Vue({
        el: "#app",
        directives: {
            focus2: {
                inserted: function(el){
                    el.focus();
                }
            }
        }
    })
</script>

可以在模板中任何元素上使用v-focus指令 像这样 输入框会自动获取到焦点

<div>
<input v-focus>
</div>

4.钩子函数

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

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update：所在组件的 VNode 更新时调用。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

官方文档：
自定义指令--Vue.js