VUE3 之 自定义指令的实现 - 这个系列的教程通俗易懂，适合新手

1. 概述

老话说的好：能屈能伸的人生，才是完满而丰富的人生。

 

言归正传，今天我们来聊聊 VUE 中自定义指令的实现。

 

2. 自定义指令

2.1 文本框聚焦的实现 

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        mounted() {
            // 文本框聚焦
            this.$refs.myInput.focus();
        },
        template:`
            <div>
                <input ref="myInput" />
            </div>
        `
    });
   const vm = app.mount("#myDiv");

 

 这个例子中，我们用常规的方式实现了文本框的聚焦，下面我们用自定义指令来实现这个功能。

 

2.2 自定义指令实现文本框聚焦

    const app = Vue.createApp({
        template:`
            <div>
                <input v-myFocus />
            </div>
        `
    });

    app.directive('myFocus', {
        mounted(element) {
            element.focus();
        }
    })

这里我们使用 app.directive 声明了一个自定义指令 myFocus，在自定义指令中可以使用生命周期函数 mounted()  实现元素的聚焦功能，生命周期函数的参数 element 就是使用指令的元素本身

 

2.3 局部自定义指令

    const myDirectives = {
        myFocus : {
            mounted(element) {
                element.focus();
            }
        }
    }

    const app = Vue.createApp({
       directives: myDirectives,
       template:`
           <div>
               <input v-myFocus />
           </div>
       `
   });

与局部组件类似，自定义指令也可以局部，在主组件中需要使用 directives 对局部自定义指令进行声明后，才可以使用。

 

2.4 其他生命周期函数也可以在自定义指令中使用

    const app = Vue.createApp({
        template:`
            <div>
                <input v-myFocus />
            </div>
        `
    });

    app.directive('myFocus', {
        beforeMount(element) {
            console.info('beforeMount');
        },
        mounted(element) {
            console.info('mounted');
            element.focus();
        },
        beforeUpdate(element) {
            console.info('beforeUpdate');
        },
        updated(element) {
            console.info('updated');
        },
        beforeUnmount(element) {
            console.info('beforeUnmount');
        },
        unmounted(element) {
            console.info('unmounted');
        },
    })

 

2.5 自定义指令传参

    const app = Vue.createApp({
       template:`
           <div v-pos="100" class="header">
               <input />
           </div>
       `
   });

   app.directive('pos', {
       mounted(element, binding) {
           element.style.top = binding.value + 'px';
       }
   })

在自定义指令的生命周期函数中，再增加一个参数 binding，使用 binding.value 可以拿到自定义指令中传的参数 100

 

2.6 自定义指令参数绑定数据

    const app = Vue.createApp({
       data() {
            return {
                pos : 200
            }
       },
       template:`
           <div v-pos="pos" class="header">
               <input />
           </div>
       `
   });

   app.directive('pos', {
       mounted(element, binding) {
           element.style.top = binding.value + 'px';
       }
   })

此例子，将自定义属性的参数值与数据绑定

 

2.7 arg 参数的传递

    const app = Vue.createApp({
       data() {
            return {
                pos : 200
            }
       },
       template:`
           <div v-pos:top-pos="pos" class="header">
               <input />
           </div>
       `
   });

   app.directive('pos', {
       mounted(element, binding) {
           element.style.top = binding.value + 'px';
           console.info(binding.arg);
       }
   })

在使用自定义指令时，可以写成 v-pos:top-pos="pos"，自定义指令中可以使用 binding.arg 的方式获得 top-pos 这个值

 

2.8 arg 参数的使用

    const app = Vue.createApp({
       data() {
            return {
                pos : 200
            }
       },
       template:`
           <div v-pos:left-pos="pos" class="header">
               <input />
           </div>
       `
   });

   app.directive('pos', {
       mounted(element, binding) {

           console.info(binding.arg);

           if(binding.arg == 'top-pos') {
                element.style.top = binding.value + 'px';
           }
           
           if(binding.arg == 'left-pos') {
                element.style.left = binding.value + 'px';
           }
       }
   })

通过对 arg 参数的判断，实现不同的效果。

 

3. 综述

今天聊了一下 VUE 中自定义指令的实现，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中的高级语法，敬请期待

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。

 

4. 个人公众号

追风人聊Java，欢迎大家关注

posted @ 2022-05-04 21:28  追风人聊Java  阅读(451)  评论(1)  编辑  收藏  举报