SOURCE

<!-- 
    需要对普通DOM元素进行底层操作的时候， 就会用到自定义指令

    例子：
        1.聚焦输入框
        2.转为大写 toUpperCase()
        3.转为小写 toLowerCase()
 -->

 <div id="exp1">
     <input type="text" v-focus/>
 </div>
 <div id="exp2">
     <p v-lower-text>{{msg}}</p>
     <p v-upper-text>{{msg}}</p>
 </div>

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
    //  注册全局自定义指令 v-focus 达到聚焦输入框功能

    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            // el.focus();
        }        
    });

    //  全局自定义指令 转为大写
    Vue.directive('upper-text', {
        bind(el) {
            console.log(el, 'ppp')
            el.innerHTML = el.innerHTML.toUpperCase()
        }
    });
    // 实例化 vue
    new Vue({
        el: "#exp1",
        data: {
            msg:'I Like You'
        }
    });
    // 局部指令
    new Vue({
        el: "#exp2",
        data: {
            msg:'I Like You'
        },
        directives: {
            //  el: 指令属性所在的标签对象
            //  binding: 包含指令相关信息数据的对象
            'lower-text'(el, binding) {
                el.innerHTML = el.innerHTML.toLowerCase();
            }
        }
    })
 </script>