Render函数之二《基于vue-cli理解render函数》

本文详细介绍了Vue的render函数,包括其作用、返回的VNode、createElement参数及用法。通过实例展示了如何使用render函数创建组件,以及如何结合if、else和map方法渲染列表。render函数的本质是生成模板,通过传递参数动态生成HTML结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.render 函数作用

render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数

2.render 函数讲解

render 函数即渲染函数,它是个函数,它的参数也是个函数——即 createElement

2.1 render 函数的返回值(VNode)

VNode(即:虚拟节点),也就是我们要渲染的节点。

2.2 render 函数的参数(createElement)

createElement 是 render 函数 的参数,它本身也是个函数,并且有三个参数。

    1.createElement 函数的返回值(VNode)

      createElement 函数的返回值是 VNode(即:虚拟节点)。

    2.createElement 函数的参数(三个)         

  •   第一个参数可以是( HTML 标签,也可以是一个组件或函数)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吴小花的博客

1分也是爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值