vue 私有自定义指令，全局自定义指令

私有自定义指令

自定义指令需要在directives节点下创建私有自定义指令，创建好的指令通过v-指令名放到元素中

<template>
        <div id="App">
                <p v-color>这个文字编程红色</p>
        </div>
</template>


<script>
export default {
    data() {
        return {
            
        }
    },
    //自定义指令的节点
    directives:{
     //创建一个color指令，执行配置对象。
        color:{
        //当指令帮到元素上的时候，聚会出发bind函数
        //el参数标识当前绑定的dom对象
            bind(el){
                el.style.color="red"
            }
        }
    }
}
</script>

上述中，如果给元素添加颜色，只能绑定唯一的值，不能自己设定颜色，
在vue中，可以通过hinding.value获取属性绑定的颜色值。

<template>
        <div id="App">
                <p v-color='red'>通过属性值绑定的颜色变颜色</p>
                <p v-color="'blue'">自己在v-color中自己设置颜色，需要通过字符串形式传入</p>
        </div>
</template>


<script>
export default {
    data() {
        return {
            color:'red'
        }
    },
    directives:{
        color:{
            bind(el,binding){
                el.style.color=binding.value
            }
        }
    }
}
</script>

update函数

bind函数只能被调用一次，如果再次操作dom的颜色时，bind函数就不会触发，而update函数可以在每次dom更新时触发。

<template>
        <div id="App">
                <p v-color='red'>通过属性值绑定的颜色变颜色</p>
                <p v-color="'blue'">自己在v-color中自己设置颜色，需要通过字符串形式传入</p>
                <button @click="color='blue'">点击变换颜色</button>
        </div>
</template>


<script>
export default {
    data() {
        return {
            color:'red'
        }
    },
    directives:{
        color:{
           //只能被触发一次
            bind(el,binding){
                el.style.color=binding.value
            },
            //在每次dom更新的时候触发
            update(el,binding){
                el.style.color=binding.value
            }
        }
    }
}
</script>

自定义指令的简写形式

简写形式可以包含bind和update两个函数，减少代码的重复，直接将指令变成函数。

<template>
        <div id="App">
                <p v-color='red'>通过属性值绑定的颜色变颜色</p>
                <p v-color="'blue'">自己在v-color中自己设置颜色，需要通过字符串形式传入</p>
                <button @click="color='blue'">点击变换颜色</button>
        </div>
</template>


<script>
export default {
    data() {
        return {
            color:'red'
        }
    },
    directives:{
    //将指令对象改写成指令函数
        color(el,binding){
            el.style.color=binding.value
        }
    }
}
</script>

定义全局自定义属性

全局自定义指令要在main.js下定义，使用Vue.directive() 函数。

Vue.directive('color', {
    bind(el, binding) {
        el.style.color = binding.value
    },
    update(el, binding) {
        el.style.color = binding.value
    }
})

或者

这是借助ES6的箭头函数形式

Vue.directive('color', (el,binding)=>el.style.color=binding.value)