Vue3 h() 中使用指令

最新推荐文章于 2023-11-13 13:37:18 发布

小唯殿

最新推荐文章于 2023-11-13 13:37:18 发布

阅读量452

点赞数

分类专栏： ACE的开发日志文章标签： vue.js npm node.js

本文链接：https://blog.csdn.net/qq_26061869/article/details/129244155

版权

ACE的开发日志专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章介绍了在Vue应用中，如何通过`resolveDirective`引入并使用自定义指令，如懒加载(lazy)。在`setup`函数内，通过`resolveDirective(lazy)`获取懒加载指令，然后利用`withDirectives`在模板中应用到`img`元素上，实现图片的延迟加载功能。

摘要由CSDN通过智能技术生成

首先先引入vue的两个方法

import {resolveDirective, withDirectives} from 'vue'

在setup中需要引入自定义的指令

// 方法的参数是指令的名称，如果没找到就会报一个warning，并且返回undefined
const lazyLoad = resolveDirective('lazy');

接下来就可以在代码中进行使用

const renderer = withDirectives(h('img'),[[lazyLoad, img.src]])

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小唯殿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue3 - 全局指令（详细教程）

王佳斌

11-18

2951

vue3.js官方文档，vue3全局指令，vue3全局指令官方文档，vue3全局自定义指令，Vue3全局指令，Vue3.x教程-Vue3，Vue3自定义指令，vue3中全局和局部自定义指令怎样实现，vue3自定义全局指令，vue3封装全局指令，vue3 学习笔记 (三)——vue3 自定义指令，Vue3 中自定义指令，Vue全局指令:如何添加全局指令，Vue3-巧用指令，Vue自定义指令的使用详细介绍，Vue3 - 全局指令（详细教程）。

vue2中的自定义指令的基本语法、常见参数与使用场景，超详细教程！

最新发布

共同学习，共同成长

05-18

2970

今日给大家讲解vue2中的自定义指令的基本语法、指令的常见参数与常见使用场景，并结合具体案例来让小伙伴们深入理解，彻底掌握！快来看看吧~

参与评论您还未登录，请先登录后发表或查看评论

vue3中，在h()函数内使用自定义指令

暴躁小码农的博客

02-15

2018

vue3使用自定义指令接下来进入正题：在h()函数中使用自定义指令 ok了

vue3 vNode、h函数中使用自定义指令，如v-loading

qq_26772309的博客

01-10

1914

vue3 h函数中使用v-loading

Vue3封装自定义指令+h()

weixin_63681863的博客

11-13

454

【代码】Vue3封装自定义指令。

Vue 3的 h 函数详解

訾博（ZiBo）的博客

09-27

8578

Vue 3的`h`函数（`createVNode`）是前端开发中一个强大的工具，用于创建虚拟DOM节点。虚拟DOM是Vue框架中的核心概念，通过它，我们可以更高效地更新页面内容。本文将深入探讨Vue 3的`h`函数及其用法。

自定义指令

hhhhhhhhhhhhhhhc的博客

05-10

166

自定义指令 Vue.directive("指令名称",{ //inserted:function(el) inserted(el){ //el就是使用自定义指令的标签元素 //js操作。。。 } }) 指令名称不需要添加v-前缀，但是在使用指令的时候需要添加v-前缀 inserted 被绑定元素插入父节点时就会调用该函数 bind 指定绑定到对应的元素后就会调用该函数示例代码： <div id="app"> <input type="text" v-focus&

Vue3新特性之在Composition API中使用CSS Modules

10-15

Vue3的Composition API引入了一项新特性，即在Vue实例中使用CSS Modules。CSS Modules是一种模块化和组合CSS的系统，旨在解决CSS命名冲突和管理问题。Vue3的`useCSSModule`函数允许开发者在使用Composition API时，...

Vue--》自定义指令的使用讲解

ztK63LrD的博客

12-07

2656

目录自定义指令自定义指令的分类私有自定义指令：全局自定义指令：总结vue官方提供了v-text、v-for、v-model、v-if等常用的指令，还允许开发者自定义指令。在每个vue组件中，可以在directives节点下声明私有自定义指令。代码如下：注意：directives节点下定义的指令名称必须是要渲染标签样式的 v-指令的v-后面的名称。bind函数：指令与元素成功绑定时执行bind函数。当然我们也可以为自定义指令赋予静态值和动态值。如下： inserted函数：指令所在元素被插入页面时调

vue中自定义全局指令报错

ann4752518的博客

06-23

1081

vue初学者，可能会遇到的问题。报错信息为Failed to resolve directive：所定义的指令

html ＜h＞标签的嵌套在Vue3中产生了缩放效果

qq_29667767的博客

06-11

392

在 h 标签的嵌套中，如<h2><h4>hello</h4></h2>，中间的 h 标签实际上起到放大和缩小的功能，h4 是不变，1-3是变大，5-6是变小。注意：该方法只在 Vue 中有效！

Vue3加载中（Spin）

Mr Dear的博客

04-06

3043

用于页面和区块的加载中状态，共有 7 种样式并且支持自定义各种样式！无论多么挑剔，都能拿下！功能丰富，简单易用，总有一款满足你的想象😁😁

vue3 中 h 函数的使用

朝阳39的博客

01-06

1604

vue3中 h函数的使用方法

Vue 渲染函数 render 函数，h() 创建 VNode 虚拟节点 | js 实现模板功能 | 函数式组件

海胆的博客

08-08

7052

相较于模板，应用于更加灵活的场景预备知识实例 property 的 api

vue3 h函数点击事件

m0_65730686的博客

10-09

1979

vue3 h函数点击事件

vue3的自定义指令directives

guizi0809的博客

07-15

1万+

vue3 自定义指令的使用详解

vue3：vue中的h函数