Vue-自定义指令directive

1. 什么是自定义指令？

就是自己设置的 v-属性，详细请看实例

2. 需要用到什么属性？

• directive(name,callback);
    name:指令名字
    callback:回调函数
• binding：自定义绑定的指令

3. 实例代码

html

<div id="app">
    <p v-color="red">红色 hello world</p>
    <p v-color="">绿色 hello world</p>
</div>

javascript

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //全局注册
    Vue.directive("color",function(el,binding){
        if(binding.value){//如果有传值用传值，如果没有则默认green
            el.style.color=binding.value;
        }else{
            el.style.color="green";
        }
        console.log(binding);
    })
    var vm = new Vue({
        el:"#app",
        data:{
            red:"red",
            yellow:"yellow"
        }
    })
    //局部注册TODO...
</script>

效果

image.png