Vue3自定义指令

作者：温新

时间：2021-08-11

hi，我是温新，一名PHPer

有些时候需要操作DOM元素该怎么办？如有一个input框，当页面加载完成input获得焦点。

定义指令：app.directive(自定义指令名,{})

使用自定义指令：v-自定义指令名

全局自定义指令

<div id="app"></div>

<script>
    const app = Vue.createApp({
        template:`<input type="text" v-focus >`
    });

    // 全局自定义指令
    app.directive('focus', {
        //  当被绑定的元素挂载到 DOM 中时
        mounted(el){
            el.focus();
        }
    });

    app.mount('#app');
</script>

局部自定义指令

<div id="app"></div>

<script>
    // 局部自定义指令
    const directives = {
        focus: {
            mounted(el){
                el.focus();
            }
        }
    };

    const app = Vue.createApp({
        // 指定需要使用的局部自定义组件
        directives,
        template:`<input type="text" v-focus >`
    });

    app.mount('#app');
</script>

相关函数

除了mounted函数外，还有一些函数：

• created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加须要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。
• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
• mounted：在绑定元素的父组件被挂载后调用。
• beforeUpdate：在更新包含组件的 VNode 之前调用。
• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
• beforeUnmount：在卸载绑定元素的父组件之前调用
• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

我是温新

每天进步一点，就一点点