渲染 函数

DOM树

什么是渲染函数

在多数情况下,Vue推荐使用模板template来创建HTML。

然而在一些应用场景中,需要使用JavaScript创建HTML。

这时可以用渲染函数,它比模板更方便。

render函数的主要神秘地方就是Vue的h函数。 

h()函数

h()函数是一个用于创建虚拟节点(VNode)的程序

也可以更准确地将其命名为createVNode(),以便简洁使用

它被称为h()

基本参数 

约束 

使用JavaScript代替模板功能 

总结 

当浏览器读到HTML代码时,将建立一个DOM节点树。在DOM节点树中,每个元素都是一个节点,每段文字也是一个节点,甚至注释也都是节点。

Vue通过建立一个虚拟DOM树来追踪自己如何更新真实DOM树。

在虚拟DOM树中,有虚拟节点 (virtual node, VNode),这些Vnode将告诉Vue页面上需要渲染什么样的节点,包括其子节点的描述信息。     

当需要使用JavaScript创建HTML元素时,建议使用渲染函数。

在渲染函数render中,有一个或多个h()函数用于创建虚拟节点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1411255.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【HAL库 STM32】输入捕获并实现超声波测距

文章目录 HC-SR04 超声波模块简介HC-SR04 工作原理如何使用HC-SR04模块程序效果 一、工程配置代码如果您发现文章有错误请与我留言,感谢 HC-SR04 超声波模块简介 HC-SR04 工作原理 模块有2个超声波换能器(如图所示),一个发出声波…

小红书爬虫GUI软件 | API接口封装 | 根据笔记链接批量采集笔记详情,含笔记正文内容、发布时间、转评赞藏等

一、背景介绍 1.1 爬取目标 我用python开发的采集软件,可自动按笔记链接抓取笔记的详情数据。 为什么有了源码还开发界面软件呢?方便不懂编程代码的小白用户使用,无需安装python,无需改代码,双击打开即用&#xff0…

ruoyi漏洞总结

若依识别 黑若依 :icon hash"-1231872293 绿若依 :icon hash"706913071” body" 请通过前端地址访 " body" 认证失败,无法访问系统资源 " 如果页面访问显示不正常,可添加默认访问路径尝试是否显示正常 /login?redi…

Redis---------分布式锁Redisson

概述 Redisson入门 第一步&#xff1a;引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version>3.13.6</version></dependency> 第二步&#xff1a;配置文件 import org.redisson…

STM32——WWDG(窗口看门狗)

技术笔记&#xff01; 1.WWDG&#xff08;窗口看门狗&#xff09;简介 本质&#xff1a;能产生系统复位信号和提前唤醒中断的计数器。 特性&#xff1a; 递减的计数器&#xff1b; 当递减计数器值从 0x40减到0x3F时复位&#xff08;即T6位跳变到0&#xff09;&#xff1b; …

Netty 网络编程深入学习【一】:ByteBuffer 源码解析

ByteBuffer源码阅读 ByteBuffer是一个用于处理字节数据的缓冲区类。它是Java NIO 包的一部分&#xff0c;提供了一种高效的方式来处理原始字节数据。 ByteBuffer 可以用来读取、写入、修改和操作字节数据&#xff0c;它是一种直接操作字节的方式&#xff0c;比起传统的 InputSt…

使用OpenCV绘制两幅图验证DSC和IoU以及BCELoss的计算程序

1.创作灵感 很多小伙伴在玩深度学习模型的时候,需要计算Groudtruth和predict图的dsc、IOU以及BCELoss。这两个关键的指标的程序有很多种写法,今天使用OpenCV绘制两张已知分布的图像,计算其dsc、IOU以及BCELoss。 2、图像如图所示 在一个100100的区域内,红色框范围为预测…

我的毕业实习经历

我的毕业实习经历 前言求职之路成为社畜重获自由结语 前言 这篇博客原本我想以实习生找工作踩坑指南&#xff1a;我的毕业实习经历为文章标题的&#xff0c;原因是跟我前面发布的一篇博客《实习生找工作踩坑指南&#xff1a;租房篇》做一个呼应收尾&#xff0c;奈何标题略显臃肿…

c3 笔记8 css排版技巧

相关内容&#xff1a;边界、边框、位置&#xff08;absolute、relative、static&#xff09;、overflow、z-index、超链接、鼠标光标特效、…… margin:上边界值 右边界值 下边界值 左边界值 笔记来源&#xff1a; ©《HTML5CSS3JavaScript网页设计》陈婉凌编&#xff…

固定资产管理系统

固定资产管理系统 摘 要 随着计算机信息技术的发展以及对资产、设备的管理科学化、合理化的高要求&#xff0c;利用计算机实现设备及资产的信息化管理已经显得非常重要。 固定资产管理系统是一个单位不可缺少的部分。但一直以来人们使用传统的人工方式管理固定资产的信息&…

【大数据】学习笔记

文章目录 [toc]NAT配置IP配置SecureCRT配置PropertiesTerminal Java安装环境变量配置 Hadoop安装修改配置文件hadoop-env.shyarn-env.shslavescore-site.xmlhdfs-site.xmlmapred-site.xmlyarn-site.xml 环境变量配置 IP与主机名映射关系配置hostname配置映射关系配置 关闭防火墙…

[每日AI·0501]GitHub 版 Devin,Transformer的强力挑战者 Mamba,Sora 制作细节与踩坑,OpenAI 记忆功能

AI 资讯 国资委&#xff1a;加快人工智能等新技术与制造全过程、全要素深度融合GitHub版 Devin 上线&#xff0c;会打字就能开发应用&#xff0c;微软 CEO&#xff1a;重新定义 IDE在12个视频理解任务中&#xff0c;Mamba 先打败了 TransformerSora 会颠覆电影制作吗&#xff…

Linux POSIX消息队列遇到的问题和使用方法

目录 一、开发环境及消息队列介绍二、问题描述三、解决办法四、测试代码 一、开发环境及消息队列介绍 开发板&#xff1a;nuc980 1.ARM Linux中消息队列的原理   在ARM Linux中&#xff0c;消息队列是通过POSIX&#xff08;Portable Operating System Interface&#xff09…

idea 新建spring maven项目、ioc和依赖注入

文章目录 一、新建Spring-Maven项目二、在Spring-context使用IOC和依赖注入 一、新建Spring-Maven项目 在pom.xml文件中添加插件管理依赖 <build><plugins><plugin><artifactId>maven-compiler-plugin</artifactId><version>3.1</ver…

来一篇错题集(虽然简单吧)

一.Assembly via Remainders #include<bits/stdc.h> using namespace std; typedef long long ll; int a[2000]; int b[2000]; int main(){int t;cin>>t;while(t--){int n;cin>>n;for(int i1;i<n-1;i){cin>>b[i];}int x1000000000;//使用1000000000…

算法打卡day40

今日任务&#xff1a; 1&#xff09;139.单词拆分 2&#xff09;多重背包理论基础&#xff08;卡码网56携带矿石资源&#xff09; 3&#xff09;背包问题总结 4&#xff09;复习day15 139单词拆分 题目链接&#xff1a;139. 单词拆分 - 力扣&#xff08;LeetCode&#xff09; …

LLaVA:分析图像和文本数据的开源模型

原文地址&#xff1a;analyzing-images-with-llava 2024 年 3 月 20 日 在过去的几个月里&#xff0c;ChatGPT 等各种大型语言模型&#xff08;LLM&#xff09;已进入商业市场&#xff0c;许多公司已成功地将 LLM 集成到其产品和服务中&#xff0c;极大地改变了我们与设备和互…

RocketMQ SpringBoot 3.0不兼容解决方案

很多小伙伴在项目升级到springBoot3.0版本以上之后&#xff0c;整合很多中间件会有很多问题&#xff0c;下面带小伙伴解决springBoot3.0版本以上对于RocketMQ 不兼容问题 报错信息 *************************** APPLICATION FAILED TO START *************************** Des…

【JVM】JMM 内存模型

JMM 概述 内存模型 java[内存模型](Java Memory Model) 和 [内存结构]JMM规定了在多线程下对共享数据的读写时&#xff0c;对数据的原子性 有序性 可见性的规则和保障。 原子性 原子性问题: i和i–不是原子性操作! 所以一个i指令会在执行过程中被另一个线程执行! 问题分…

C++ | Leetcode C++题解之第67题二进制求和

题目&#xff1a; 题解&#xff1a; class Solution { public:string addBinary(string a, string b) {string ans;reverse(a.begin(), a.end());reverse(b.begin(), b.end());int n max(a.size(), b.size()), carry 0;for (size_t i 0; i < n; i) {carry i < a.siz…