vue.js自定义指令

1.什么是自定义指令？

除了使用 Vue 提供的内置指令之外，我们可以自定义一些自己的指令。

2.什么时候需要自定义指令？

当你需要不可避免的操作 DOM 的时候，使用自定义指令来解决。

3.如何注册和使用自定义指令？

1).注册
全局注册，在任何组件中都可以使用全局注册自定义指令。
局部注册，只能在当前组件中使用该指令。
PS:如果需要在多个不同的组件中使用该指令，则把它定义为全局的非通用的，不需要多次使用的指令定义到局部。
注册一个focus指令：

//第一个参数：指令的名字
//第二个参数：需要配置指令的生命钩子函数
//每个钩子函数可以接受两个参数。
//el:      作用该指令的 DOM 对象
//binding：一个对象，可以获取指令的值等信息
Vue.directive('focus'，{//五个钩子函数
//当被绑定的元素插入到 DOM 中时...
//el参数就是你作用该指令的 DOM 元素
    //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    //bind中拿不到父元素
    //bind 和 inserted的相同之处：一上来都执行一次，以后再也不会执行
    bind(){
        console.log('bind'，el.parentNode)
    }，
    //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    如果你需要操作作用指令的父元素，则最起码写到这个 inserted 中
    inserted(el){
        console.log('inserted'，el.parentNode)
    }，
    //update 和 componentUpdated 只有在指令的绑定的值发生更新的时候才会触发调用
    //区别：update获取的是更新的之前的指令所在的 DOM 内容，拿到的是数据改变之前的内容
    //     componentUpdated:获取的是更新之后的最新的 DOM 内容，拿到的是数据改变之后的内容
    update（el）{
    }，
    componentUpdated（）{
    }，
    unbind（）{
    }

})

2).使用
注册一个全局自定义指令 ‘v-focus’
指令的名字随便起，但是在使用的时候务必加上 v- 前缀，所以在起名字的时候就不需要加上v-前缀。
如果是驼峰命名法则，则在使用的时候需要将大写转换为小写并用 ‘-‘链接。
如：

定义autoFocus指令：
使用的时候为：v-auto-focus