怎么用vue自定义指令

<template>
    <div>
        <!-- 高级操作:自定义指令:要求使用者熟练使用dom -->
        <!-- vue提供了很多指令 使用者也可以自己定义 -->
        <ul>
            <li v-color="'red'">skyline</li>
            <!-- v-green是自定义指令 -->
            <!-- v-xx这个xx是一个自定义的js代码 -->
            <!-- js代码里面的颜色要加字符串 -->
            <li v-green>horizon</li>
            <li v-blue>rain</li>
            <li v-color="'orange'">papi</li>
            <!-- 模仿写v-text 让值原样显示到标签 -->
            <li v-textH="'<h1>我是仿v-text的</h1>'"></li>
        </ul>
    </div>
</template>

<script>
    export default {
        // directive就是指令
        directives:{
            green(e){
                console.log("el:",e);
                console.dir(e)
                e.style.color="green"
            },
            blue(a){
                a.style.color="blue"
            },
            // 这个方法比较灵活，可以多次使用元素，并且多次修改元素的值
            color(c,d){
                //c参数1当前元素
                //d参数2绑定的元素
                c.style.color=d.value;
            },
            textH(el,bindings){
                el.innerText=bindings.value
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>