Vue入门-自定义指令

自定义指令
当需要对普通DOM元素进行底层操作时,可以考虑自定义指令来实现。
语法: Vue.directive(指令名,配置对象)。

1.创建全局指令特点:可以在任意不同的实例对象挂载的范围进行使用

 Vue.directive('highlight', {
           bind(el, binding) {
               console.log(el, binding);
               el.style.background = 'red';
               el.onmouseover = function () {
                   this.style.background = binding.value;
               };
               el.onmouseout = function () {
                   this.style.background = '';
               };
           },
           // 指令所绑定的值, 再次改变的时候, 才会触发
           update(el, binding){
               console.log(el, binding);
               el.style.background = 'red';
               el.onmouseover = function () {
                   this.style.background = binding.value;
               };
               el.onmouseout = function () {
                   this.style.background = '';
               };
           }
       });

2.创建局部指令特点:在指定的实例对象挂载范围内使用

        directives: {
            useless: {
                // 需要访问该指令所绑定元素的父级,必须要在inserted钩子中.
                bind(el, binding) {
                    // 输出的结果为:null
                    console.log('bind:', el, el.parentElement);

                },
                inserted(el, binding) {
                    // 输出的结果为:app标签, 即对应的父级标签
                    console.log('inserted:', el, el.parentElement);
                    if (binding.value === true) {
                        el.parentElement.removeChild(el);
                    }
                }
            },
            focus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            }
        }

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app" style="width: 500px;margin: auto;border-bottom: 1px solid black">
        <input type="text" v-focus>
        <h1 v-highlight="color">鼠标移入该标签时，标签高亮显示</h1>
        <button @click="color = 'pink'">改变color的值,鼠标移入h1标签查看效果改变</button>
        <div v-useless="false">
            <h3>娱乐头条</h3>
            <p>二本毕业生简历直接被扔进垃圾箱</p>
        </div>
    </div>
    <div id="app2" style="width: 500px;margin: auto;border-bottom: 1px solid black">
        <p v-highlight="'yellow'">鼠标移入该标签时，标签高亮显示</p>
    </div>
    <p v-highlight="'yellow'" style="width: 500px;margin: auto;">不在任何实例中,不能使用全局指令,便不会有自定义指令的高亮效果</p>
</body>

</html>
<script>
    /*
     *自定义指令
     *  当需要对普通DOM元素进行底层操作时,可以考虑自定义指令来实现
     *  语法: Vue.directive(指令名,配置对象);
     */
    // 1.创建全局指令(特点:可以在任意不同的实例对象挂载的范围进行使用)
       Vue.directive('highlight', {
           bind(el, binding) {
               console.log(el, binding);
               el.style.background = 'red';
               el.onmouseover = function () {
                   this.style.background = binding.value;
               };
               el.onmouseout = function () {
                   this.style.background = '';
               };
           },
           // 指令所绑定的值, 再次改变的时候, 才会触发
           update(el, binding){
               console.log(el, binding);
               el.style.background = 'red';
               el.onmouseover = function () {
                   this.style.background = binding.value;
               };
               el.onmouseout = function () {
                   this.style.background = '';
               };
           }
       });
    // 注意:当bind和update中的操作一致时,而且不关心其他钩子,便可以使用下面的简写方式
    Vue.directive('highlight', function (el, binding) {
        // 写在函数中的操作就相当于在bind和update中各写了一次
        // 注意:el为是使用该指令的标签
        console.log(el, binding);
        el.onmouseover = function () {
            this.style.background = binding.value;
        };
        el.onmouseout = function () {
            this.style.background = '';
        };
    });
    new Vue({
        el: '#app',
        data: {
            color: 'green'
        },
        methods: {},
        // 注册局部指令
        directives: {
            useless: {
                // 需要访问该指令所绑定元素的父级,必须要在inserted钩子中.
                bind(el, binding) {
                    // 输出的结果为:null
                    console.log('bind:', el, el.parentElement);

                },
                inserted(el, binding) {
                    // 输出的结果为:app标签, 即对应的父级标签
                    console.log('inserted:', el, el.parentElement);
                    if (binding.value === true) {
                        el.parentElement.removeChild(el);
                    }
                }
            },
            focus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            }
        }

    });
    new Vue({
        el: '#app2',
        data: {},
        methods: {}
    });
</script>

效果图对比

Vue入门-自定义指令

猜你喜欢