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，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。

编程笔记 » VUE3 之自定义指令的实现 - 教程通俗易懂，适合新手