Vue3 -- 自定义指令directive

最新推荐文章于 2024-06-16 22:02:56 发布

爱划水de鲸鱼哥～

最新推荐文章于 2024-06-16 22:02:56 发布

阅读量3k

点赞数 1

分类专栏： Vue3 文章标签： vue html css css3

本文链接：https://blog.csdn.net/m0_47901007/article/details/118639402

版权

自定义指令directive

在Vue中除了像v-model 和 v-show这样的默认内置的指令外， Vue 也允许注册自定义指令。自定义指令用于对DOM 元素进行底层操作。

局部自定义指令

局部自定义指令类似局部组件，组件使用directives进行引用，以输入框自动获得焦点为例。

// 注册一个局部自定义指令 v-focus，并写入钩子mounted，mounted接收绑定元素el。

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

组件引用局部自定义指令，并使用自定义指令 v-focus

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

页面效果：
在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue自定义指令</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
     	const directives = {
     
            focus:{
     
                mounted(el){
     
                el.focus();
                }
            }
        }
        const app = Vue.createApp({
     
            directives: directives,
            template:`<input v-focus/>`
        });
        const vm = app.mount('#root');
    </s

最低0.47元/天解锁文章

爱划水de鲸鱼哥～

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
4
评论
Vue3 -- 自定义指令directive

目录自定义指令directive局部自定义指令全局自定义指令自定义指令动态参数函数简写传参给自定义指令总结自定义指令directive在Vue中除了像v-model 和 v-show这样的默认内置的指令外， Vue 也允许注册自定义指令。自定义指令用于对DOM 元素进行底层操作。局部自定义指令局部自定义指令类似局部组件，组件使用directives进行引用，以输入框自动获得焦点为例。// 注册一个局部自定义指令 v-focus，并写入钩子mounted，mounted接收绑定元素el。
复制链接

扫一扫