vue3第二十五节(h()函数的应用)

2024-04-27 03:12

本文主要是介绍vue3第二十五节(h()函数的应用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、前言:

为什么vue 中已经有 template 模板语法,以及JSX了,还要使用 h()渲染函数;

vue 中选择默认使用template 静态模板分析,有利于DMO性能的提升,而且更接近真实的HTML便于开发设计人员理解修改,特别是对于熟练使用 HTML、CSS、JS的前端人员来说,更容易上手;

vue 中使用 h() 函数,可以更加方便的处理高度动态复杂渲染逻辑,相比而言比使用 template 模板 更加方便;但是由于渲染函数的性能消耗较大,所以一般不建议在开发中直接使用 h() 函数;并且在里面标签 属性 class 事件等杂糅一起,会难以理解;

2、定义:

h() 是一种能生成HTML的JavaScript
h() 函数 用于创建Vnodes 节点

用法:

接收三个参数
h(type, propsOrChildren, children)
type: 节点类型 字符串、对象、函数
propsOrChildren: 属性或子节点
children: 子节点

如:

// 除类型之外的所有参数都是可选的
h('div')
h('div', { id: 'foo' })//属性和属性都可以在道具中使用
//Vue会自动选择正确的分配方式
h('div', { class: 'bar', innerHTML: 'hello' })// props modifiers such as .prop and .attr can be added
// with '.' and `^' prefixes respectively
h('div', { '.name': 'some-name', '^width': '100' })// class 和 style 可以是对象或者数组
h('div', { class: [foo, { bar }], style: { color: 'red' } })// 定义事件需要加on 如 onXxx
h('div', { onClick: () => {} })// 子集可以字符串
h('div', { id: 'foo' }, 'hello')//如果没有props是可以省略props 的
h('div', 'hello')
h('div', [h('span', 'hello')])// 子数组可以包含混合的VNode和字符串
h('div', ['hello', h('span', 'hello')])
const Vnode = h('div', { class: 'my-div' }, 'h() 渲染内容')
渲染之后得到
<div class="my-div">h() 渲染内容</div>

具体如下:

<template>
<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv></vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const vnodeDiv = () => {return h('div', { class: 'my-div' }, 'h() 渲染内容')
}
</script>

3、h() 函数 渲染多层DOM

const vnodeDiv = () => {return h('div', { class: 'my-div', dataType:"ces" }, [h('p', [h('span', 'h()1 渲染内容')]),h('p', 'h()2 渲染内容'),h('p', 'h()3 渲染内容'),])
}

4、h() 函数 接收 props 中数据

<template>
<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv :name="name"></vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const name = ref('Andy')
// 这里与 setup() {} 一样,可以接收 props, context
// context.attrs, context.emit, context.slots
const vnodeDiv = (props, {attrs, emit, slots}) => {console.log('---props-', props)return h('div', { class: 'my-div', dataType:"ces" }, [h('p', [h('span', props.name)]), // Andyh('p', 'h()2 渲染内容'),h('p', 'h()3 渲染内容'),])
}
</script>

5、h() 函数 接收emit 事件

事件以驼峰方式命名onXxx 如:onClick: ()=>{}

<template>
<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv :name="name" @click="handleClick"></vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const name = ref('Andy')
const handleClick = (data) => {console.log('====', data) // 这里得到子组件 触发事件 的参数
}
const vnodeDiv = (props, {attrs, emit, slots}) => {console.log('---props-', props)return h('div', { class: 'my-div', dataType:"ces" }, [h('p', {onClick: () => {// 使用emit 触发父组件事件emit('click', props.name)}}, 'h()2 渲染内容')])
}
</script>

6、h() 函数 定义插槽 slots

通过 slots.xxx 语法定义插槽
如:匿名插槽 slots.default具名插槽 slots.footer

<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv :name="name" @click="handleClick"><template #default><div class="default-">这是默认插槽</div></template><template #footer><div class="default-footer">这是具名插槽 footer </div></template>
</vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const name = ref('Andy')
const handleClick = (data) => {console.log('====', data) // 这里得到子组件 触发事件 的参数
}
const vnodeDiv = (props, {attrs, emit, slots}) => {console.log('---props-', props)return h('div', { class: 'my-div', dataType:"ces" }, [h('p', [h('span', props.name)]),h('p', {onClick: () => {emit('click', props.name)}}, 'h()2 渲染内容'),h('p', 'h()3 渲染内容'),// 定义默认插槽  // 具名插槽 footer 这里可以定义多个插槽名称], slots.default(), slots.footer())
}
</script>

7、h() 函数 渲染列表

<template>
<div class="my-h">
This is a h() demo .
<hr></hr>
<vnodeDiv :name="name" @click="handleClick"><template #default><div class="default-">这是默认插槽</div></template><template #footer><div class="default-footer">这是具名插槽 footer </div></template>
</vnodeDiv>
</div>
</template>
<script setup>
import { ref, h } from 'vue'
const name = ref('Andy')
const lists = ref([{ name: 'Andy1', age: 18 },{ name: 'Andy2', age: 19 },{ name: 'Andy3', age: 22 },
])
const handleClick = (data) => {console.log('====', data) // 这里得到子组件 触发事件 的参数
}
const vnodeDiv = (props, {attrs, emit, slots}) => {console.log('---props-', props)return h('div', { class: 'my-div', dataType:"ces" }, [// 接收 props 中的数据h('p', [h('span', props.name)]),h('p', {onClick: () => {emit('click', props.name)}}, 'h()2 渲染内容'),// 循环渲染列表h('p', lists.value && lists.value.length && lists.value.map(itm => {return h('p', [h('span', itm.name), '~', h('span', itm.age)])})),// 定义默认插槽], slots.default(), slots.footer())
}
</script>

运行结果如下:
请添加图片描述
对于 h() 函数 与 JSX 语法的使用,个人感觉 JSX 语法更灵活方便。

这篇关于vue3第二十五节(h()函数的应用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/939379

相关文章

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使

C++中::SHCreateDirectoryEx函数使用方法

《C++中::SHCreateDirectoryEx函数使用方法》::SHCreateDirectoryEx用于创建多级目录,类似于mkdir-p命令,本文主要介绍了C++中::SHCreateDir... 目录1. 函数原型与依赖项2. 基本使用示例示例 1:创建单层目录示例 2:创建多级目录3. 关键注

Python循环缓冲区的应用详解

《Python循环缓冲区的应用详解》循环缓冲区是一个线性缓冲区,逻辑上被视为一个循环的结构,本文主要为大家介绍了Python中循环缓冲区的相关应用,有兴趣的小伙伴可以了解一下... 目录什么是循环缓冲区循环缓冲区的结构python中的循环缓冲区实现运行循环缓冲区循环缓冲区的优势应用案例Python中的实现库

SpringBoot整合MybatisPlus的基本应用指南

《SpringBoot整合MybatisPlus的基本应用指南》MyBatis-Plus,简称MP,是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,下面小编就来和大家介绍一下... 目录一、MyBATisPlus简介二、SpringBoot整合MybatisPlus1、创建数据库和

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程