Vue学习---自定义指令

Vue学习—自定义指令##

在Vue中，在绑定和操作数据的时候除了核心的一些指令例如“v-bind、v-model”等等之外，我们还可以自定义指令，这中自定义指令的输出形式包括两种：属性形式输出以及元素形式输出。

1、属性形式输出

<div v-red-dom='red'></div>


    //双向绑定
    Vue.directive('red-dom',{
        bind(){
            //初始状态(只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。)
            this.el.style.background='red';
        },
        update(val){
            //当被绑定元素所在的模板更新时，触发update(被绑定元素所在的模板更新时调用，而不论绑定值是否变化)
            this.el.style.background=val;
        }
    })

    new Vue({
        el:"body",
        data:{
            blue:'',
            styleDemond:{
                width:"100px",
                height:"20px",
                background-color:'green',
                position:"absolute",
            }
        },
        methods:{
           //方法
        },
    });

2、元素形式输出

Vue.elementDirective('dom-red',{
    bind(){
        this.el.style.background='red';
    }
});
new Vue({
    el:"body",
    data:{
        blue:'',
        styleDemond:{
            width:"300px",
            height:"30px",
            background:'green',
            position:"absolute",
        }
    },
    methods:{
       //方法
    },
});

第二种将以DOM元素的形式输出自己定义的属性元素