当前位置: 首页 > news >正文

Vue3中的h函数

文章目录

  • 简介
  • 简单使用
    • 参数
    • 使用
      • 计数器
  • 进阶使用
    • 函数组件
    • 插槽

专栏目录请点击

简介

  1. 众所周知,vue内部构建的其实是虚拟DOM,而虚拟DOM是由虚拟节点生成的,实质上虚拟节点也就是一个js对象
  2. 事实上,我们在vue中写的template,最终也是经过渲染函数生成对应的VNode
  3. 而h函数就是用来生成VNode的一个函数,他的全名叫做createVNode

简单使用

参数

他一共跟三个参数在这里插入图片描述

第一个参数

  • 是一个字符串,他是必须的
  • 这个字符串可以是 html标签名,一个组件、一个异步的组件或者是函数组件

第二个参数

  • 是一个对象,可选的
  • 与attribute、prop和事件相对应的对象

第三个参数

  • 可以是字符串、数组或者是一个对象
  • 他是VNodes,使用h函数来进行创建

使用

<script>
import { h } from 'vue'export default {setup() {return () => h("h2", null, "Hello World")}
}</script>

渲染效果如下
在这里插入图片描述

当然我们还可以使用rener函数进行渲染

<script>
import { h } from 'vue'export default {render() {return h("h2", null, "Hello World")}
}
</script>

计数器

<script>
import { h } from 'vue'export default {data() {return {counter: 0}},render() {return h("div", null, [h("h2", null, "计数器"),h("h3", null, `计数${this.counter}`),h("button", { onClick: () => this.counter++ },"点一下")])}
}
</script>

渲染如下

在这里插入图片描述

进阶使用

函数组件

我们先写一个组件HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue';const param = ref("Hello World") 
</script><template><h2>{{ param }}</h2>
</template><style scoped lang="less"></style>

然后,我们在h函数中引入这个组件,他就会被渲染

<script>
import { h } from 'vue'import HelloWorld from './HelloWorld.vue'export default {data() {return {counter: 0}},render() {return h("div", null, [h(HelloWorld)])}
}
</script>

在这里插入图片描述

插槽

h函数同样支持插槽,我们把HelloWorld组件改成一个插槽组件

HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue';const param = ref("Hello World") 
</script><template><h2>{{ param }}</h2><slot></slot>
</template><style scoped lang="less"></style>

index.ts

<script>
import { h } from 'vue'import HelloWorld from './HelloWorld.vue'export default {data() {return {counter: 0}},render() {return h("div", null, [h(HelloWorld, {}, [h("div", null, "Hello Slot")])])}
}
</script>

最终渲染如下

在这里插入图片描述

相关文章:

Vue3中的h函数

文章目录简介简单使用参数使用计数器进阶使用函数组件插槽专栏目录请点击 简介 众所周知&#xff0c;vue内部构建的其实是虚拟DOM&#xff0c;而虚拟DOM是由虚拟节点生成的&#xff0c;实质上虚拟节点也就是一个js对象事实上&#xff0c;我们在vue中写的template,最终也是经过…...

阿尔法开发板 IMX6ULL 说明

一. IMX6ULL开发板 IMX6ULL开发板即正点原子的阿尔法(ALPHA)开发板&#xff0c;采用恩智浦芯片&#xff0c;cortex-A7架构的。 二. IM6ULL开发板说明 1. IO说明 对于IMX6ULL芯片&#xff0c;一个IO对应两个寄存器&#xff0c;第一个寄存器负责配置其复用功能&#xff0c;…...

Altium Designer19 #学习笔记# | 基础应用技巧汇总

全文目录一.元件符号库二.元件封装库1.AD09 集成元件库/封装库三.电路原理图1. 巧用查找"相似对象功能"1.1 查找相同元件1.2. 查找相同文本1.3. 查找相同网络 &#xff1a;E - S - C四.PCB原理图【AD PCB模式下的常用快捷键】PCB视图放大/缩小PCB视图左/右移动PCB切换…...

Python 元类编程实现一个简单的 ORM

概述 什么是ORM?    ORM全称“Object Relational Mapping”&#xff0c;即对象-关系映射&#xff0c;就是把关系数据库的一行映射为一个对象&#xff0c;也就是一个类对应一个表&#xff0c;这样&#xff0c;写代码更简单&#xff0c;不用直接操作SQL语句。 现在我们就要实…...

《C++ Primer Plus》第18章:探讨 C++ 新标准(7)

C11 新增的其他功能 C11 增加了很多功能&#xff0c;本书无法全面介绍&#xff1b;另外&#xff0c;本书编写期间&#xff0c;其中很多功能还未得到广泛实现。然而&#xff0c;有些功能有必要简要地介绍一下。 并行编程 当前&#xff0c;为提高计算机性能&#xff0c;增加处…...

Redis学习(二):Redis安装测试

概述 Redis是什么 Redis, Remote Dictionary Server, 即远程字典服务。免费开源的数据库。 由C语言编写&#xff0c;支持网络&#xff0c;可基于内存亦可持久化的日志型、KV数据库&#xff0c;并提供所种语言的API。 Redis能干嘛 用于内存存储&#xff0c;持久化。rdb、ao…...

Vector - CAPL - 简介及数据结构

对于想进入车载行业或者已经在车载行业工作的朋友对于CAPL这个词都会相当的熟悉&#xff0c;都知道他是做车载网络测试脚本的语言&#xff0c;并且跟C有点类似&#xff0c;但是它到底是什么呢&#xff1f;CAPL全称&#xff08;Communication Access Programming Language&#…...

20230304英语学习

What Would Happen if the Moon Disappeared Tomorrow? 如果明天月球消失了会怎样&#xff1f; The closest object to our planet, the Moon, may seem like Earth’s little sibling.Since its birth, the satellite has mostly just hung around, playing gravitational t…...

【基础算法】单链表的OJ练习(3) # 移除链表元素 # 相交链表 #

文章目录前言移除链表元素相交链表写在最后前言 本章的OJ练习也是相对简单的&#xff0c;只要能够理解解题的思路&#xff0c;并且依照这个思路能够快速的写出代码&#xff0c;我相信&#xff0c;你的链表水平已经足够了。 对于OJ练习&#xff08;2&#xff09; : ->传送门…...

【自用】SpringBoot项目通用类整理

文章目录全局Json序列化Controller日志切面全局异常拦截GlobalExceptionHandlerApiResultBusinessExceptionResponseEntityUtil全局返回体包装MP自动填充接口文档配置类自定义Async异步线程池本文主要整理各类项目中通用的配置类、工具类&#xff0c;便于复查自用。 全局Json序…...

动态规划法(总述)多阶段决策最优化问题

动态规划: 研究最优控制问题提出的 该问题有n个输入&#xff0c;问题的解由这n个输入组成&#xff0c;这个子集必须满足事先给定的条件&#xff0c;这些条件称为约束条件&#xff0c;满足约束条件的可行解可能不只有一个为了衡量可行解的优劣&#xff0c;通常以一些函数的形式&…...

MySQL跨服务器数据映射

MySQL跨服务器数据映射环境准备1. 首先是要查看数据库的federated引擎 开启/关闭 状态2. 打开任务管理器&#xff0c;并重启mysql服务3. 再次查看FEDERATED引擎状态&#xff0c;引擎已启动映射实现问题总结在日常的开发中经常进行跨数据库进行查询数据。 同服务器下跨数据库进…...

利用反射实现通过读取配置文件对类进行实例化-课后程序(JAVA基础案例教程-黑马程序员编著-第十二章-课后作业)

【案例12-3】&#xff1a;利用反射实现通过读取配置文件对类进行实例化 【案例介绍】 1.案例描述 现在有一个项目&#xff0c;项目中创建了一个Person类&#xff0c;在Person类中定义了一个sleep()方法。在工程中还定义了一个Student类继承Person类&#xff0c;在Student类中…...

1.2 CSS文本属性

CSS Text(文本)属性&#xff1a; 定义文本外观&#xff0c;颜色&#xff0c;装饰&#xff0c;缩进&#xff0c;行间距来修饰文本 文本样式 文本缩进 text-indent文本水平对齐方式&#xff1a;text-align文本修饰&#xff1a;text-decoration行高 line-height CSS文本颜色属性…...

SpringCloud之认识微服务

文章目录一、传统项目转型二、走进 SpringCloud三、微服务项目搭建3.1 创建一个 SpringBoot 项目3.2 创建三个 Maven 子工程3.3 为子工程创建 application.yml3.4 引入依赖3.5 数据库 建库建表3.6 编写业务提示&#xff1a;以下是本篇文章正文内容&#xff0c;SpringCloud系列学…...

【go语言之thrift协议二之server端分析】

go语言之thrift协议二serverthrift.TProtocolFactoryTTransportReadWriteCloserContextFlusherReadSizeProviderTProtocolrunServerNewTServerSocketNewCalculatorHandlerNewCalculatorProcessorNewTSimpleServer4server.ServeListenAcceptLoopprocessRequests在上一篇文章分析…...

【办公类05-03】Python批量修改文件名前面的序号(已有的序号错了,需要改成正确的号码)

背景需求下载教程&#xff0c;手动输入编号&#xff0c;有一个编号错误&#xff0c;导致后面所有编号都错了。30实际是29&#xff0c;以此类推怎样才能快速修改编号数字&#xff1f;前期考虑到可能要改编号&#xff0c;所以在每个编号后面加“ ”&#xff08;空格&#xff09;&…...

定向模糊测试工具Beacon基本用法

Beacon是一个定向模糊测试工具&#xff0c;给定行号&#xff0c;能够定向探索行号附近的代码区域。主要思想是采用静态分析的方法获取到与目标有关的变量的最弱前置条件&#xff08;weakest precondition&#xff09;的信息&#xff0c;并在相关位置插入断言&#xff0c;来提前…...

《程序员面试金典(第6版)》面试题 02.01. 移除重复节点

题目描述 编写代码&#xff0c;移除未排序链表中的重复节点。保留最开始出现的节点。 示例1: 输入&#xff1a;[1, 2, 3, 3, 2, 1] 输出&#xff1a;[1, 2, 3] -示例2: 输入&#xff1a;[1, 1, 1, 1, 2] 输出&#xff1a;[1, 2] 提示&#xff1a; 链表长度在[0, 20000]范…...

如何对web系统开展无障碍测试

Accessibility test&#xff08;无障碍测试&#xff09;是一种测试方法&#xff0c;旨在评估软件、网站或其他数字产品的可访问性&#xff0c;以确保它们能够被身体残障或其他特殊需求的用户使用。这些测试通常包括使用辅助技术&#xff0c;如屏幕阅读器和放大器&#xff0c;以…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...