手写MVVM框架-构建虚拟dom树
MVVM的核心之一就是虚拟dom树，我们这一章节就先构建一个虚拟dom树
首先我们需要创建一个VNode的类
// 当前类的位置是src/vnode/index.js
export default class VNode{constructor(tag, // 标签名称（英文大写）ele, // 对应真实节点children, // 子节点text, // 文本内容data, // 节点数据parent, // 父节点nodeType, // 节点类型key // 节点key) {this.tag = tag;this.ele = ele;this.children = children;this.text = text;this.data = data;this.parent = parent;this.nodeType = nodeType;this.key = key;this.env = {} // 环境变量this.instructions = [] // 指令this.template = [] // 当前节点的模板 }
}第二步：构建虚拟dom
构建虚拟dom树的操作我们放在mount事件里面，现在需要创建mount.js
import VNode from '../vnode/index'/*** 给MiniVue添加挂载方法* @param {*} MiniVue */
export function initMount(MiniVue) {MiniVue.prototype.$mount = function (el) {let root = document.getElementById(el)mount(this, root)}
}/*** 实现mount事件* @param {*} vm * @param {*} el */
function mount(vm, el) {console.log('开始挂载')// 构建虚拟Domvm._vnode = constructVnode(vm, el, parent)// 预备渲染
}function constructVnode(vm, el, parent) {let vnode = null;const tag = el.nodeNameconst text = el.textContent.trim()const data = {}const nodeType = el.nodeTypeconst key = ""vnode = new VNode(tag, el, [], text, data, parent, nodeType, key)// 递归构建子节点vnode.ele.childNodes.forEach(child => {const childNodes = constructVnode(vm, child, vnode)if(childNodes instanceof Array) {vnode.children.push(...childNodes)} else {vnode.children.push(childNodes)}})return vnode
}/*** 获取节点的文本数据（文本节点）* @param {*} el */
function getNodeText(el) {return el.nodeType === 3 ? el.textContent.trim() : ''
}init方法里面执行当前mount
我们在浏览器里面可以看到当前构建的虚拟dom树
本章总结:
1.创建虚拟DOM的类
2.给原型添加mount方法，通过根节点el构建虚拟dom
3.构建dom时，使用深度优先搜索算法（反复调用本身方法），获取子节点
相关文章：
手写MVVM框架-构建虚拟dom树
MVVM的核心之一就是虚拟dom树，我们这一章节就先构建一个虚拟dom树 首先我们需要创建一个VNode的类 // 当前类的位置是src/vnode/index.js export default class VNode{constructor(tag, // 标签名称（英文大写）ele, // 对应真实节点children,…...
C++单例模式
单例模式是一种设计模式，它保证一个类只有一个对象。因此单例模式要私有化构造函数，禁用拷贝构造以及赋值重载。同时还要提供一个静态成员函数获取单例对象。 单例模式有两种实现方式：饿汉模式和懒汉模式 饿汉模式：创建静态单例…...
SQL入门到精通 理论+实战 -- 在 MySQL 中学习SQL语言
目录 一、环境准备 1、MySQL 8.0 和 Navicat 下载安装 2、准备好的表和数据文件： 二、SQL语言简述 1、数据库基础概念 2、什么是SQL 3、SQL的分类 4、SQL通用语法 三、DDL（Data Definition Language）：数据定义语言 1、操…...
RabbitMQ 可靠性投递
文章目录 前言一、RabbitMQ自带机制1、生产者发送消息注意1.1、事务（Transactions）1.2、发布确认（Publisher Confirms）1.2.1、同步1.2.2、异步 2、消息路由机制2.1、使用备份交换机（Alternate Exchanges）2.…...
Java常见的技术场景面试题
一、单点登录这块怎么实现的？ 单点登录概述 单点登录：Single Sign On（简称SSO）,只需要登录一次，就可以访问所有信任的应用系统 在以前的时候，一般我们就单系统，所有的功能都在同一个系统上。…...
使用 Postman 进行 API 测试：从入门到精通
使用 Postman 进行 API 测试：从入门到精通 使用 Postman 进行 API 测试：从入门到精通一、什么是 API 测试？二、Postman 简介三、环境搭建四、API 测试流程1. 收集 API 文档2. 发送基本请求示例：发送 GET 请求示例代码（…...
用python实现进度条
前言 在Python中，可以使用多种方式实现进度条。以下是几种常见的进度条格式的实现方法： 1. 使用 tqdm 库 tqdm 是一个非常流行的库，可以轻松地在循环中显示进度条。 from tqdm import tqdm import time# 示例：简单的进度条 fo…...
android 自定义通话录音
在 Android 开发中，实现通话录音功能通常涉及到对系统通话的拦截和录音。由于通话录音涉及到用户隐私和安全性，Android 系统对此有严格的限制和要求。在 Android 10（API 级别 29）及以上版本中，直接访问通话录音功能变得…...
WebSocket——环境搭建与多环境配置
一、前言：为什么要使用多环境配置？ 在开发过程中，我们通常会遇到多个不同的环境，比如开发环境（Dev）、测试环境（Test）、生产环境（Prod）等。每个环境的配置和需…...
【自动化办公】批量图片PDF自定义指定多个区域识别重命名，批量识别铁路货物运单区域内容改名，基于WPF和飞桨ocr深度学习模型的解决方案
项目背景介绍 铁路货运企业需要对物流单进行长期存档，以便后续查询和审计。不同的物流单可能包含不同的关键信息，通过自定义指定多个区域进行识别重命名，可以使存档的图片文件名具有统一的规范和明确的含义。比如，将包含货物运单…...
在线教程丨YOLO系列10年更新11个版本，最新模型在目标检测多项任务中达SOTA
YOLO (You Only Look Once) 是计算机视觉领域中最具影响力的实时目标检测算法之一，以其高精度与高效性深受业界青睐，广泛应用于自动驾驶、安防监控、医疗影像等领域。 该模型最早于 2015 年由华盛顿大学研究生 Joseph Redmon 发布，开创了将目…...
c++可变参数详解
目录 引言 库的基本功能 va_start 宏: va_arg 宏 va_end 宏 va_copy 宏 使用 处理可变参数代码 C11可变参数模板 基本概念 sizeof... 运算符 包扩展 引言 在C编程中，处理不确定数量的参数是一个常见的需求。为了支持这种需求，C标准库提供了 &…...
Ubuntu安装VMware17
安装 下载本文的附件，之后执行 sudo chmod x VMware-Workstation-Full-17.5.2-23775571.x86_64.bundle sudo ./VMware-Workstation-Full-17.5.2-23775571.x86_64.bundle安装注意事项： 跳过账户登录的办法：断开网络 可能出现的问题以及解决…...
在Debian 12上安装VNC服务器
不知道什么标题 可以看到这个文章是通过豆包从国外网站copy的，先这样写着好了，具体的我有时间再补充，基本内容都在这里了。 在Debian 12上安装VNC服务器 简介 VNC（Virtual Network Computing，虚拟网络计算…...
设计模式Python版 外观模式
文章目录 前言一、外观模式二、外观模式示例三、抽象外观类四、抽象外观类示例 前言 GOF设计模式分三大类： 创建型模式：关注对象的创建过程，包括单例模式、简单工厂模式、工厂方法模式、抽象工厂模式、原型模式和建造者模式。结构型模式&am…...
Selenium 浏览器操作与使用技巧——详细解析（Java版）
目录 一、浏览器及窗口操作 二、键盘与鼠标操作 三、勾选复选框 四、多层框架/窗口定位 五、操作下拉框 六、上传文件操作 七、处理弹窗与 alert 八、处理动态元素 九、使用 Selenium 进行网站监控 前言 Selenium 是一款非常强大的 Web 自动化测试工具，能够…...
论文解读：《基于TinyML毫米波雷达的座舱检测、定位与分类》
摘要 本文提出了一种实时的座舱检测、定位和分类解决方案，采用毫米波（mmWave）雷达系统芯片（SoC），CapterahCAL60S344-AE，支持微型机器学习（TinyML）。提出了波束距离-多普勒…...
----GPIO输入检测)
e2studio开发RA2E1(5)----GPIO输入检测
e2studio开发RA2E1.5--GPIO输入检测 概述视频教学样品申请硬件准备参考程序源码下载新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置GPIO口配置按键口配置按键口&Led配置R_IOPORT_PortRead()函数原型R_IOPORT_PinRead()函数原型代码 概述 本篇文章主要介绍如何…...
数据结构:队列篇
图均为手绘,代码基于vs2022实现 系列文章目录 数据结构初探: 顺序表 数据结构初探:链表之单链表篇 数据结构初探:链表之双向链表篇 链表特别篇:链表经典算法问题 数据结构:栈篇 文章目录 系列文章目录前言一.队列的概念和结构1.1概念一、动态内存管理优势二、操作效率与安全性…...
idea中git的简单使用
提交，推送直接合并 合到哪个分支就到先切到哪个分支...
Java中的object类
1.Object类是什么？ 🟪Object 是 Java 类库中的一个特殊类，也是所有类的父类(超类),位于类继承层次结构的顶端。也就是说，Java 允许把任何类型的对象赋给 Object 类型的变量。 🟦Java里面除了Object类，所有的…...
html2canvas绘制页面并生成图像 下载
1. 简介 html2canvas是一个开源的JavaScript库，它允许开发者在用户的浏览器中直接将HTML元素渲染为画布（Canvas），并生成图像。以下是对html2canvas的详细介绍： 2. 主要功能 html2canvas的主要功能是将网页中的HTML元…...
Certum OV企业型通配符SSL
随着网络攻击手段的不断演变，仅仅依靠HTTP协议已无法满足现代企业对数据安全的需求。SSL证书，特别是经过严格验证的组织验证型SSL证书，成为了保护网站数据传输安全、提升用户信任度的标配。 一、Certum OV企业型通配符SSL概述 Certum&#…...
-Java Lambda表达式入门_eclipse lambda(1)，面试必备)
2024年Web前端最新Java进阶(五十五)-Java Lambda表达式入门_eclipse lambda(1)，面试必备
对象篇 模块化编程-自研模块加载器 开源分享：【大厂前端面试题解析核心总结学习笔记真实项目实战最新讲解视频】 Arrays.sort(players, sortByName); // 1.3 也可以采用如下形式: Arrays.sort(players, (String s1, String s2) -> (s1.compareTo(s2))); ??其…...
JVM 四虚拟机栈
虚拟机栈出现的背景 由于跨平台性的设计，Java的指令都是根据栈来设计的。不同平台CPU架构不同，所以不能设计为基于寄存器的。优点是跨平台，指令集小，编译器容易实现，缺点是性能下降，实现同样的功能需要更多…...
V103开发笔记1-20250113
2025-01-13 一、应用方向分析 应用项目： PCBFLY无人机项目（包括飞控和手持遥控器）； 分析移植项目，应用外设资源包括： GPIO, PWM,USART,GPIO模拟I2C/SPI, ADC,DMA,USB等； 二、移植项目的基本…...
Page Assist - 本地Deepseek模型 Web UI 的安装和使用
Page Assist Page Assist是一个开源的Chrome扩展程序，为本地AI模型提供一个直观的交互界面。通过它可以在任何网页上打开侧边栏或Web UI，与自己的AI模型进行对话，获取智能辅助。这种设计不仅方便了用户随时调用AI的能力，还保护了…...
Cookie及Session---笔记
目录 Cookiecookie简介cookiesession的认证方式tpshop完整登录实现-cookie Sessionsession简介session自动管理cookietpshop完整登录实现-sessioncookie和session的区别获取响应结果指定内容 Cookie cookie简介 工程师针对HTTP协议是无连接无状态特性所设计的一种技术&#x…...
【Block总结】DASI，多维特征融合
论文信息 HCF-Net（Hierarchical Context Fusion Network）是一种新提出的深度学习模型，专门用于红外小目标检测。该论文于2024年3月16日发布，作者包括Shibiao Xu、ShuChen Zheng等，主要研究机构为北京邮电大学。该模型…...
LabVIEW的智能电源远程监控系统开发
在工业自动化与测试领域，电源设备的精准控制与远程管理是保障系统稳定运行的核心需求。传统电源管理依赖本地手动操作，存在响应滞后、参数调节效率低、无法实时监控等问题。通过集成工业物联网（IIoT）技术，实现电源设备…...
4.PPT：日月潭景点介绍【18】
目录 NO1、2、3、4 NO5、6、7、8 NO9、10、11、12 表居中或者水平/垂直居中单元格内容居中或者水平/垂直居中 NO1、2、3、4 新建一个空白演示文稿，命名为“PPT.pptx”（“.pptx”为扩展名）新建幻灯片 开始→版式“PPT_素材.doc…...
《迪拜AI展：探寻中东人工智能发展的璀璨新篇》
迪拜：AI 浪潮下的闪耀明珠 迪拜，这座位于阿拉伯半岛东部、波斯湾东南岸的城市，犹如一颗璀璨的明珠，在中东地区散发着独特的魅力。它是阿拉伯联合酋长国的第二大城市，也是迪拜酋长国的首府 ，凭借优越的地理位…...
axios如何利用promise无痛刷新token
目录 需求 需求解析 实现思路 方法一： 方法二： 两种方法对比 实现 封装axios基本骨架 instance.interceptors.response.use拦截实现 问题和优化 如何防止多次刷新token 同时发起两个或以上的请求时，其他接口如何重试 最后完整代…...
R语言 | 使用 ComplexHeatmap 绘制热图，分区并给对角线分区加黑边框
目的：画热图，分区，给对角线分区添加黑色边框 建议直接看0和4。 0. 准备数据 # 安装并加载必要的包 #install.packages("ComplexHeatmap") # 如果尚未安装 library(ComplexHeatmap)# 使用 iris 数据集 #data(iris)# 选择数值列&a…...
TensorFlow 简单的二分类神经网络的训练和应用流程
展示了一个简单的二分类神经网络的训练和应用流程。主要步骤包括： 1. 数据准备与预处理 2. 构建模型 3. 编译模型 4. 训练模型 5. 评估模型 6. 模型应用与部署 加载和应用已训练的模型 1. 数据准备与预处理 在本例中，数据准备是通过两个 Numpy 数…...
蓝桥杯备考：模拟算法之字符串展开
P1098 [NOIP 2007 提高组] 字符串的展开 - 洛谷 | 计算机科学教育新生态 #include <iostream> #include <cctype> #include <algorithm> using namespace std; int p1,p2,p3; string s,ret; void add(char left,char right) {string tmp;for(char ch left1;…...
[创业之路-282]：《产品开发管理-方法.流程.工具 》-1- 优秀研发体系的特征、IPD关注的4个关键要素、IPD体系的7个特点
目录 一、优秀研发体系的特征 二、IPD关注的4个关键要素 1. 组织管理 2. 市场管理 3. 流程管理 4. 产品管理 三、IPD体系的7个特点 1、产品开发是投资行为： 2、基于市场的产品研发： 3、平台化开发，大平台，小产品&#x…...
Node.js 与 PostgreSQL 集成：深入 pg 模块的应用与实践
title: Node.js 与 PostgreSQL 集成：深入 pg 模块的应用与实践 date: 2025/2/5 updated: 2025/2/5 author: cmdragon excerpt: 随着 JavaScript 在服务器端编程中的兴起，Node.js 已成为构建高性能网络应用程序的重要平台。PostgreSQL 则以其强大的特性以及对复杂数据结构的…...
【Uniapp-Vue3】从uniCloud中获取数据
需要先获取数据库对象： let db uniCloud.database(); 获取数据库中数据的方法： db.collection("数据表名称").get(); 所以就可以得到下面的这个模板： let 函数名 async () > { let res await db.collection("数据表名称…...
LeetCode 0090.子集 II：二进制枚举 / 回溯
【LetMeFly】90.子集 II：二进制枚举 / 回溯 力扣题目链接：https://leetcode.cn/problems/subsets-ii/ 给你一个整数数组 nums ，其中可能包含重复元素，请你返回该数组所有可能的 子集（幂集）。 解集 不能 …...
Pytest+selenium UI自动化测试实战实例
今天来说说pytest吧，经过几周的时间学习，有收获也有疑惑，总之最后还是搞个小项目出来证明自己的努力不没有白费。 环境准备 1 确保您已经安装了python3.x 2 配置python3pycharmselenium2开发环境 3 安装pytest库pip install p…...
黑马点评 - 商铺类型缓存练习题（Redis List实现）
首先明确返回值是一个 List<ShopType> 类型那么我们修改此函数并在 TypeService 中声明 queryTypeList 方法，并在其实现类中实现此方法 GetMapping("list")public Result queryTypeList() {return typeService.queryTypeList();}实现此方法首先需要…...
C++ 创建和配置dll与lib库
C简明教程（13）创建和配置dll与lib库_怎样生成lib库和dll库-CSDN博客 C 动态库与静态库详解 一、为什么要引入库的概念 在 C 编程中，随着项目规模的不断扩大，代码量也会急剧增加。如果将所有代码都写在一个源文件中，…...
深度剖析 Veo2 工具：解锁 AI 视频创作新境界
在当下这个 AI 技术日新月异的时代，各种 AI 工具如雨后春笋般涌现，让人目不暇接。今天，我就来给大家好好说道说道谷歌旗下的 Veo2，这可是一款在 AI 视频创作领域相当有分量的工具。好多朋友都在问，Veo2 到底厉害在哪？好不好上手？能在哪些地方派上用场？别着急，今天我就…...
LabVIEW自定义测量参数怎么设置?
以下通过一个温度采集案例，说明在 LabVIEW 中设置自定义测量参数的具体方法： 案例背景 假设使用 NI USB-6009 数据采集卡 和 热电偶传感器 监测温度，需自定义以下参数： 采样率：1 kHz 输入量程：0~10 V&a…...
JVM执行流程与架构（对应不同版本JDK）
直接上图（对应JDK8以及以后的HotSpot） 这里主要区分说明一下 方法区于 字符串常量池 的位置更迭： 方法区 JDK7 以及之前的版本将方法区存放在堆区域中的 永久代空间，堆的大小由虚拟机参数来控制。 JDK8 以及之后的版本将方法…...
数据治理项目为什么沦为了PPT工程？
数据治理项目为什么沦为了PPT工程？ 数据治理项目为什么沦为PPT工程数据治理项目面临的深层挑战数据治理项目的破局之道 "这个项目明明做了快一年了，怎么感觉还在原地踏步？"数据治理小张最近很烦恼。 整天泡在会议室里，写…...
module ‘matplotlib.cm‘ has no attribute ‘get_cmap‘
目录 解决方法1： 解决方法2，新版api改了： module matplotlib.cm has no attribute get_cmap 报错代码： cmap matplotlib.cm.get_cmap(Oranges) 解决方法1： pip install matplotlib3.7.3 解决方法2，新版…...
HTML5 教程之标签（3）
HTML5 <center> 标签 (已废弃) 定义和用法 <center> 标签对其包围的文本进行水平居中处理。HTML5不支持使用<center>标签，因此有关该标签的更多信息，请参考“HTML <center>标签”部分！ 示例: <center>这个…...
告别传统办公软件，这款编辑器让你事半功倍！
文章目录 1 界面的多样性2 性能优化3 文档编辑器的新功能4 外部文本支持5 体验感想 ONLYOFFICE最近发布了文档8.2版本，带来了众多新特性和性能改进。作为一名用户和开发者，我对这些更新进行了深入的体验，感受到了不少亮点。 新版本特别强调了…...