Vue入门-自定义指令

淩亂°似流年 2021-09-15 14:14 404阅读 0赞

**自定义指令**  
当需要对普通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>

效果图对比

![70][]![70 1][]![70 2][]

[70]: https://img-blog.csdn.net/20180620175909439?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180620175927391?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20210802/dd39a4a4be4e4c8eb70e285c05a31335.png