vue自定义指令

自定义指令

自定义指令分为全局自定义指令和局部自定义指令

全局自定义指令注册：
html：

    <div id="app">
        <input type="text" v-focus >
    </div>

js：

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

            el.focus();
            el.style.border = "4px solid pink"
        },
      
    }) 

局部自定义指令注册：
html代码同上
js:

    new Vue({
        el: "#app",
        directives:{
            focus:{
                inserted(el){
                    el.focus()
                    el.style.color='red'
                }
            }
        }
            

自定义指令一共有五个钩子函数
bind（） 指令第一次绑定时调用 只调用一次
inserted() 被绑定元素被插入父节点是调用，
update() 被绑定元素所在模板更新时调用，不论绑定值是否发生变化
componentUpdated() 被绑定元素模板完成一次更新周期是调用
unbind() 指令与元素解绑是调用 只调用一次

输出的钩子函数的参数：

name 是自定义事件名
rawName 绑定方法