Vue指令-自定义指令

13-Vue指令-自定义指令

介绍

• 在Vue中，我们除了可以使用内置指令之外，还可以自定义指令来实现我们的需求

自定义全局指令

/* 通过在全局Vue对象上调用directive方法
格式
Vue.directive("指令名称"， {
    生命周期钩子函数名称： function (el, obj) {
        // el:被绑定的元素
        // obj:指令被绑定时,传递的参数
    }
})

0.自定义全局指定可以被任何一个Vue实例挂载的模板使用
1.在定义的时候，指令名称不需要添加v- 
2.指令需要挂载到vue的生命周期钩子函数上，所以在自定指令的时候需要确定在该生命周期能获取在需要的元素
3.生命周期详解
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用
... */

Vue.directive("color", {
    bind: function (el, obj) {
        el.style.color = obj.value
    }
})
Vue.directive("focus", {
    inserted: function (el) {
        el.focus();
    }
})
let vue = new Vue({
    el: '#app',
});

<div id="app">
    <p v-color="'red'">我是P标签</p>
    <input type="text" v-focus>
</div>

自定义局部指令

/* 通过在Vue实例对象的directives属性添加
格式
new Vue({
    el: '模板ID',
    directives: {
        "指令名称": {
            生命周期钩子函数名称: function (el, obj) {}
        }
    }
});

0.自定义局部指令只能在对应的Vue实例挂载的模板使用
1.在定义的时候，指令名称不需要添加v- 
2.指令需要挂载到vue的生命周期钩子函数上，所以在自定指令的时候需要确定在该生命周期能获取在需要的元素
3.生命周期详解
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置
inserted：被绑定元素插入父节点时调用
... */
let app1 = new Vue({
    el: '#app1',
    directives: {
        "color": {
            bind: function (el, obj) {
                el.style.color = obj.value
            }
        }
    }
});
let app2 = new Vue({
    el: '#app2',
});

<div id="app1">
    <p v-color="'red'">我是P标签</p>
</div>

<!--该模板不能使用v-color-->
<div id="app2">
    <p v-color="'red'">我是P标签</p>
</div>