vue中render函数和h函数以及jsx的使用方式
作者：丑小鸭变黑天鹅 发布时间：2024-04-30 10:27:52
标签：vue,render,h,jsx
一、认识h函数
Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用 渲染函数 ，它比模板更接近编译器
Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚 拟DOM（VDOM）
事实上，我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode
那么，如果你想充分的利用JavaScript的编程能力，我们可以自己来编写 createVNode 函数，生成对应的VNode
那么我们应该怎么来做呢？使用 h()函数
h() 函数是一个用于创建 vnode的一个函数
其实更准确的命名是 createVNode() 函数，但是为了简便在Vue中将之简化为 h() 函数
二、h()函数 如何使用呢？
它接受三个参数：
注意事项：
如果没有props，那么通常可以将children作为第二个参数传入
如果会产生歧义，可以将null作为第二个参数传入，将children作为第三个参数传入
三、h函数的基本使用
h函数可以在两个地方使用render函数选项中setup函数选项中（setup本身需要是一个函数类型，函数再返回h函数创建的VNode）
四、h函数计数器案例
五、setup函数计数器案例
六、函数组件和插槽的使用
七、jsx组件的使用
具体的语法可以看我的react文章，这里给一个在vue中使用jsx的简单案例
以上为个人经验，希望能给大家一个参考，也希望大家多多支持asp之家。
来源：https://blog.csdn.net/qq_41880073/article/details/124202016
0
投稿猜你喜欢
- 在实际的项目中，能用别人写好的插件实现相关功能是最好不过，为了节约时间成本，因为有的项目比较紧急，没充分时间让你自己来写，即便写了，你还要花
使用python filecmp模块的dircmp类可以很方便的比对两个目录，dircmp的用法已经有很多文章介绍，不再赘述。可以help(- 在安装完数据库后，由于自己不小心直接关闭了安装窗口，或者长时间没有使用root用户登录系统，导致忘记了root密码，这时就需要重置MySQL
- 本文实例讲述了Python元组常见操作。分享给大家供大家参考，具体如下：不能修改的列表就叫做元组。1 访问元素元组是使用圆括号来标识的。 定
- 本文研究的主要是python删除过期log文件的相关内容，具体介绍如下。1. 用Python遍历目录os.walk方法可以很方便的得到目录下
- 小编语：小编我最早使用的网页制作工作就是FrontPage啦，FrongPage方便简单，会用Word就能做网页。如果你对网页制作要求不高，
- 从前有三只小猪，长大自立了分别造房子住。老大搬来草堆堆出草屋，老二搬来木头搭出木屋，老三搬来砖头，砌墙，造烟囱，造出了坚固的砖房。一天晚上大
- 问题:1. 访问 ASP 页面时，出现以下错误:Active Server Pages 错误 'ASP 0201'错误无效的
- 本文实例讲述了Flask框架单例模式实现方法。分享给大家供大家参考，具体如下：单例模式：程序运行时只能生成一个实例，避免对同一资源产生冲突的
- 如下所示：from tkinter import *class Reg (Frame): def __init__(self,m
- 目录前言前期准备数据的选择与获取分词筛选与可视化总结前言”数据可视化“这个话题，相信大家并不陌生，在一些平台，经常可以看到一些动态条形图的视
- MySQL为开源数据库，因此可以基于源码实现安装。基于源码安装有更多的灵活性。也就是说我们可以针对自己的硬件平台选用合适的编译器来优化编译后
- 一、主线程会等待所有的子线程结束后才结束首先我看下最普通情况下，主线程和子线程的情况。import threadingfrom time i
- 1.单列运算在Pandas中，DataFrame的一列就是一个Series, 可以通过map来对一列进行操作：df['col2
- 利用百度 AI 开发平台的 OCR 文字识别 API 识别并提取图片中的文字。首先需注册获取 API 调用的 ID 和 key，步骤如下：打
- 第一款在线格式化工具：Instant SQL Formatter功能强劲，可以设置第二款，和第一款类似，功能也一样，只不过是不同的UI而已，
- atom（一款开源的代码编辑器）是github专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持
- keras训练fit( self, x, y, batch_size=32, nb_epoch=10, verbose=1, c
- 1. 什么是Matplotlibmatplotlib是专门用于开发2D图表(包括3D图表)，以渐进、交互式方式实现数据可视化。使用pytho
- 效果展示数据集展示数据集来源：使用了开源数据集FaceMask_CelebAgithub地址：https://github.com/seve
