Vue入门基础之自定义指令

全局自定义指令

1. 在main.js中全局注册自定义指令

在标签中可以使用v-自定义的指令名：<p v-color>自定义指令</p>，这只是自定义指令的基础用法。

如果想要传值或者修改Dom对象的属性值可以用以下示例：

import Vue from "vue"
Vue.directive（"color",{
inserted(el,binding){
    // el是当前绑定标签的DOM对象， binding.value是用来接受自定义指令传递的值
    el.style.color = binding.value
},

// update方法可以更新el对象里面的属性值
update(el,binding){
    el.style.color = binding.value

}
}）


例如：在组件中使用自定义指令，并且通过事件触发来修改el对象里面的属性值

<template>
    <div>
        <p v-color="color">使用全局自定义指令</p>
        <button @click="changeColor">更换颜色</button>
    </div>
</template>
export default {
    data(){
        return {
            color:"red"
        }
    },
    methods:{
    //点击修改，此时的文字的颜色就会改变为粉色
        changeColor(){
            this.color = "pink"
        }
    }
}

2.在组件中使用局部自定义指令

<template>
    <div>
        <p v-color="color">使用全局自定义指令</p>
        <button @click="changeColor">更换颜色</button>
    </div>
</template>
export default {
    // 自定义指令的局部使用
    directives:{
        color:{
            inserted(el,binding){
                // el是当前绑定标签的DOM对象， binding.value是用来接受自定义指令传递的值
                el.style.color = binding.value
            },

            // update方法可以更新el对象里面的属性值
            update(el,binding){
                el.style.color = binding.value
            }
        }
    
    }
}