vue 自定义指令

最新推荐文章于 2025-07-28 13:42:02 发布

崔佳宇_

最新推荐文章于 2025-07-28 13:42:02 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏： # vue.js 笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/nullccc/article/details/126215668

vue.js 笔记专栏收录该内容

4 篇文章

订阅专栏

1 全局定义

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        value: 25,
        template: `<input v-focus/>` <!-- 使用指令 -->
    });
    app.directive('focus',{ <!-- app.directive 挂载指令 -->
        mounted(el){
            el.focus()
        }
    })
    app.mount('#root'); 
</script>

</html>

使用 app.directive 挂载指令，在这里对挂载元素聚焦。

2 局部定义

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>

    const directive = {
        focus:{
            mounted(el){
                el.focus();
            }
        }
    }

    const app = Vue.createApp({
        directive, <!-- 局部定义 -->
        value: 25,
        template: `<input v-focus/>`
    });
    app.mount('#root'); 
</script>

</html>

局部定义在组件内部写 directive 属性定义，效果同上。

3 传递参数

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>  

    const directives = {
        focus:{
            mounted(el,binding){
                console.log(binding)
                el.style.marginTop = `${binding.value}px`
            }
        }
    }

    const app = Vue.createApp({
        directives,
        value: 25,
        template: `<input v-focus="100" />`
    });
    app.mount('#root'); 
</script>

</html>

效果如下：