自定义指令

自定义指令

1.Vue.directive('名字',{
    inserted:function(el){/*这个元素插入父元素执行的操作*/
        el.focus();//el代表的是使用这个指令的元素
    }
})

==相关参数：==

参数	意思
el	指令所绑定的元素，可以用来直接操作Dom
binding	一个对象包含如下属性：

1. name:指令名，但不包括v-前缀。
2. value：指令的绑定值。
3. oldValue:指令绑定的前一个值。
4. expression：绑定值的字符串形式。

钩子函数：

bind:只调用一次，指令第一次绑定到元素时调用。

inserted:被绑定元素插入父节点时调用。

update：被绑定元素所在的模板更新时调用。

conmponentUpdated：被绑定元素所在模板完成一次更新周期时调用。

自定义指令的简写形式：

//在实例外创建
Vue.directive('name',function(el,bind){
    //所要执行的操作
})
//在实例内创建
directives:{
    'name':function(el,bind){
        //所要执行的操作
    }
}

实例：

var app = new Vue({
    el:'app',
    data:{
        info:'yellow'
    },
    directives:{
        'changeColor':function(el,bind){
            el.style.color='red'//直接给值
            el.style.color = bind.value //这个value是el标签中 v-changerColor = 'info'的值
        }
    }
})