Vue中的自定义指令——全局和局部

通过自定义指令，我们可以对DOM进行更多的底层操作，这样不仅可以在某些场景下为我们提供解决问题的思路，而且让我们对vue的底层有了进一步的了解。

一、注册全局指令

通过Vue.directive({})注册全局指令

钩子函数：

（1）bind：此钩子函数只会被调用一次，可以定义一个在绑定时执行一次的初始化动作
（2）inserted：当被绑定的元素插入到父元素中时调用
（3）update：不论被绑定的值是否发生了变化，在更新时都会被调用
（4）componentUpdated：被绑定的元素在模板完成一次更新周期时调用
（5）unbind：元素解绑时调用，只调用一次

参数：

（1）el：指令所绑定的DOM元素，可以直接用来操作DOM
（2）binding：一个对象，包含以下属性：
name：指令名称
value：指令绑定的值
oldValue：指令绑定前一个值
expression：绑定值的字符串形式
arg：传给指令的参数
modifiers：包含修饰符的对象

<div id="app">
    <p>页面载入时，input 元素自动获取焦点</p>
    <input v-focus="meg"><br>
</div>

<script>
   Vue.directive('focus', {
        bind(el,binding){
            el.style.backgroundColor=binding.value.color;
        },
        inserted(el) {
            el.focus()
        }
    })

    new Vue({
        el:'#app',
        data:{
            meg:{
                color:'cadetblue'
            }
        }
    })
</script>

此时光标在输入框内闪烁

二、注册局部指令

通过directives:{}注册局部指令

<div id="app">
    <p>页面载入时，input 元素自动获取焦点</p>
    <input v-focus="meg"><br>
</div>

<script>
new Vue({
    el: '#app',
    data:{
        meg:{
            color:'cadetblue'
        }
    },
    directives: {
        focus: {
            bind(el,binding){
                el.style.backgroundColor=binding.value.color;
            },
            inserted(el) {
                el.focus()
            }
        }
    }
})
</script>

效果如上图所示