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

Vue 中，使用模板（Template） 和 Render 函数编写组件的区别

news 来源：原创 2025/9/12 16:39:50

在 Vue 2 中，模板（Template） 和 Render 函数 是两种不同的组件编写方式，它们各有特点和适用场景。以下是它们的核心区别和实际应用场景分析：

1. 基本区别

特性模板（Template）Render 函数
语法形式HTML-like 的声明式语法（类似常规 HTML）JavaScript/JSX 的编程式语法（需返回虚拟 DOM 节点）
灵活性有限（依赖 Vue 的模板语法规则）极高（可利用 JS 的全部能力动态生成结构）
编译过程模板会被 Vue 编译器转换为 Render 函数直接编写 Render 函数，无需模板编译步骤
动态控制通过 v-if、v-for 等指令实现直接使用 JS 的条件判断、循环等语法
组件引用通过 <ComponentName /> 标签引用通过 h(ComponentName) 或 JSX 语法引用
学习成本较低（对前端开发者更友好）较高（需熟悉虚拟 DOM 和 JSX 或 h() 函数）

2. 代码示例对比

模板写法（Template）
<template><div><h1 v-if="showTitle">{{ title }}</h1><ChildComponent :data="list" @click="handleClick" /></div>
</template><script>
export default {data() {return { showTitle: true, title: "Hello Vue", list: [1, 2, 3] };},methods: {handleClick() { /* ... */ }}
};
</script>
Render 函数写法（JSX）
export default {data() {return { showTitle: true, title: "Hello Vue", list: [1, 2, 3] };},methods: {handleClick() { /* ... */ }},render(h) {return (<div>{this.showTitle && <h1>{this.title}</h1>}<ChildComponent data={this.list} on-click={this.handleClick} /></div>);}
};

3. 核心场景分析

模板（Template）的适用场景

  1. 常规 UI 开发
    适合大多数静态或简单动态的 UI 布局，如表单、列表、卡片等。
    示例：固定结构的页面布局、表单控件。

  2. 快速原型开发
    直观的 HTML 语法便于快速编写和调试，降低开发心智负担。

  3. 团队协作
    对前端新手或团队更友好，无需深入理解虚拟 DOM 和 JSX。

  4. 与 CSS 集成
    模板中可直接结合 <style> 标签编写作用域 CSS，开发体验更连贯。

Render 函数的适用场景

  1. 高度动态的组件
    当组件的结构需要根据复杂逻辑动态生成时（如动态标签名、动态子组件）。
    示例：根据权限动态渲染按钮，或根据配置生成表单字段。

    render(h) {const tag = this.useCustomButton ? 'CustomButton' : 'button';return h(tag, { on: { click: this.handleClick } }, 'Submit');
}

  2. 性能敏感场景
    需要手动优化渲染性能时（如避免不必要的子组件重渲染）。
    示例：大数据量表格的单元格渲染优化。

  3. 跨平台渲染
    当需要将组件渲染到非 DOM 环境（如 Canvas、Native 应用）时，Render 函数更灵活。

  4. JSX 的高级用法
    适合熟悉 React 或偏好 JSX 的开发者，可以利用 JS 的全部能力。
    示例：在循环中动态计算属性并生成结构：

    render(h) {return (<div>{this.items.map(item => (<Item key={item.id} data={item} style={{ color: this.getColor(item) }} />))}</div>);
}

  5. 底层库/组件库开发
    需要更细粒度控制渲染逻辑时（如实现高阶组件或抽象功能）。

4. 关键技术细节

模板的编译过程

Vue 的模板会在构建时（通过 vue-loader）被编译为 Render 函数。例如：

<template><div v-if="show">Hello {{ name }}</div>
</template>

会被编译为：

function render(h) {return this.show ? h('div', 'Hello ' + this.name) : h();
}
Render 函数中的 h()
  • h() 是 createElement 的别名，用于创建虚拟 DOM 节点。
  • JSX 需通过 Babel 插件（如 @vue/babel-preset-jsx）转换为 h() 调用。

5. 如何选择？

决策因素选择模板选择 Render 函数
项目复杂度简单到中等复杂、高度动态
团队技术栈熟悉 HTML/CSS熟悉 JS/React 或需要跨平台
性能需求一般优化（Vue 自动处理）需要手动优化渲染逻辑
开发效率快速迭代，直观编写需要灵活控制渲染细节

总结

  • 模板：是 Vue 的“默认开发模式”，适合大多数场景，强调声明式和可维护性。
  • Render 函数：是 Vue 的“底层编程接口”，适合需要动态性、灵活性或性能优化的场景。

在实际项目中，可以混合使用两者：

  • 用模板编写大部分 UI，仅在复杂动态部分使用 Render 函数或 JSX。
  • 组件库或底层工具库通常更依赖 Render 函数实现灵活性。

相关文章：

Vue 中，使用模板（Template） 和 Render 函数编写组件的区别

在 Vue 2 中&#xff0c;模板&#xff08;Template&#xff09; 和 Render 函数 是两种不同的组件编写方式&#xff0c;它们各有特点和适用场景。以下是它们的核心区别和实际应用场景分析&#xff1a; 1. 基本区别 特性模板&#xff08;Template&#xff09;Render 函数语法形…...

编程日记 2025/9/12 16:39:50

【笔记】论文阅读方法（AI大模型）

1 为什么读论文 构建知识体系&#xff1a;通过Related Works快速了解该方向研究现状&#xff0c;追踪经典论文 紧跟前沿技术&#xff1a;了解领域内新技术及效果&#xff0c;快速借鉴到自身项目 培养科研逻辑&#xff1a;熟悉论文体系&#xff0c;了解如何创造新事物&#x…...

编程日记 2025/9/13 16:04:03

JWT+redis实现令牌刷新优化方案

令牌刷新优化方案的详细实现步骤&#xff1a; 1. 令牌服务层改造 1.1 JWT工具类增强 // JwtUtils.java 新增方法 public class JwtUtils {// 生成带动态过期时间的令牌public static String createToken(String subject, String userId, String username, long expirationMi…...

编程日记 2025/9/13 16:07:26

安全面试5

文章目录 sql的二次注入在linux下&#xff0c;现在有一个拥有大量ip地址的txt文本文档&#xff0c;但是里面有很多重复的&#xff0c;如何快速去重&#xff1f;在内网渗透中&#xff0c;通过钓鱼邮件获取到主机权限&#xff0c;但是发现内网拦截了tcp的出网流量&#xff0c;聊一…...

编程日记 2025/9/13 16:02:15

vim临时文件泄露

##解题思路 感觉ctfshow的题目都挺有意思的&#xff0c;大家可以去做做 首先题目提示vim临时文件泄露&#xff0c;一般在vim编辑的时候&#xff0c;会有个swp的中间文件生成&#xff0c;根据这个特性&#xff0c;从而可以猜测&#xff0c;我们可以通过访问一个swp文件路径&am…...

编程日记 2025/8/28 0:10:06

使用Docker将ros1自定义消息通过rosjava_bootstrap生成jar包

文章目录 预准备环境rosjava_bootstrap坏消息好消息 环境安装docker安装rosjava_bootstrap仓库rosjava_center仓库修改rosjava_bootstrap代码拉取docker镜像放置自己的自定义消息 启动docker编译 预准备环境 rosjava_bootstrap rosjava_bootstrap是将自定义的ROS消息生成java…...

编程日记 2025/9/10 1:41:34

本地快速搭建一套AI人脸识别技术研究学习的实验环境

如果你想在本地搭建一套学习和研究AI人脸识别技术的框架&#xff0c;建议使用开源工具和框架进行实验&#xff0c;因为它们通常提供了较为丰富的文档和社区支持&#xff0c;能够帮助你深入理解人脸识别的核心原理。以下是一套可行性强且综合性的方案&#xff0c;涵盖了人脸检测…...

编程日记 2025/9/13 16:02:11

SpringBoot项目连接Oracle视图报错整理

在若依框架中增加连接Oracle视图报错 工具测试连接 通过使用plsql连接数据库测试&#xff0c;连接成功 1. 相关配置内容 连接配置 url: jdbc:oracle:thin:192.168.0.210:1521:HIS username: portal_his password: XXXXXX driver-class-name: oracle.jdbc.driver.OracleDr…...

编程日记 2025/9/13 0:14:13

【我的 PWN 学习手札】House of Husk

House of Husk House of Husk是利用格式化输出函数如printf、vprintf在打印输出时&#xff0c;会解析格式化字符如%x、%lld从而调用不同的格式化打印方法&#xff08;函数&#xff09;。同时C语言还提供了注册自定义格式化字符的方法。注册自定义格式化字符串输出方法&#xf…...

编程日记 2025/9/7 21:48:21

面试-JVM：JVM的组成及作用

JVM包含两个子系统和两个组件&#xff1a; 两个子系统&#xff1a; 类加载子系统&#xff08;ClassLoader Subsystem&#xff09; 作用&#xff1a;根据给定的全限定类名&#xff08;如&#xff1a;java.long.Object&#xff09;来装载class文件至运行时数据区的方法区。 核心…...

编程日记 2025/9/13 16:04:00

Node.js项目启动流程以及各个模块执行顺序详解

Node.js项目启动流程以及各个模块执行顺序的问题。首先&#xff0c;我需要仔细阅读并理解我搜索到的资料&#xff0c;从中提取关键信息&#xff0c;然后综合这些信息组织成一个结构化的回答。 首先&#xff0c;根据我搜索到的资料都详细描述了Node.js的启动流程&#xff0c;涉及…...

编程日记 2025/9/13 1:43:01

obj离线加载（vue+threejs）+apk方式浏览

demo需求&#xff1a;移动端&#xff0c;实现obj本地离线浏览 结合需求&#xff0c;利用&#xff08;vue2threejs173&#xff09;进行obj的加载&#xff0c;然后采用apk方式&#xff08;hbuilderX打包发布&#xff09;移动端浏览&#xff1b; https://github.com/bianbian886/…...

编程日记 2025/9/12 13:01:56

【Python 语法】Python 数据结构

线性结构&#xff08;Linear Structures&#xff09;1. 顺序存储列表&#xff08;List&#xff09;元组&#xff08;Tuple&#xff09;字符串&#xff08;String&#xff09; 2. 线性存储栈&#xff08;Stack&#xff09;队列&#xff08;Queue&#xff09;双端队列&#xff08…...

编程日记 2025/9/13 16:07:22

Flutter - 布局Widget

Flutter的布局主要分为 单子组件 和 多子组件 两大类&#xff1a; Container、Padding、Align这些属于单子组件&#xff0c;而Row、Column、ListView这些则是多子组件。 单子组件 Align组件 Align 是一个用于控制子组件位置的单子布局组件。它通过指定对齐方式&#xff08…...

编程日记 2025/9/11 12:17:41

AD从原理图到PCB超详细教程

AD超详细教程 前言一、建立一个工程模板二、原理图1.设计原理图。2.使用AD自带库和网上开源原理图库3.画原理图库4.编译原理图三、PCB1.确定元器件尺寸大小2.绘制PCB Library①使用元器件向导绘制元件库②原理图与PCB的映射3.绘制PCB①更新PCB②调整元件位置③布线④漏线检查⑤…...

编程日记 2025/9/7 15:54:22

视频级虚拟试衣技术在淘宝的产品化实践

作为一种新的商品表现形态&#xff0c;内容几乎存在于手淘用户动线全流程&#xff0c;例如信息流种草内容、搜索消费决策内容、详情页种草内容等。通过低成本、高时效的AIGC内容生成能力&#xff0c;能够从供给端缓解内容生产成本高的问题&#xff0c;通过源源不断的低成本供给…...

编程日记 2025/9/13 7:26:22

Redis安装及其AnotherRedisDesktopManagera安装使用

一、Redis安装 1. 下载Redis安装包 通过网盘分享的文件&#xff1a;Redis 链接: https://pan.baidu.com/s/1elAT8mk3EIoYQQ3WoVVoNg?pwd7yrz 提取码: 7yrz 2. 解压Redis安装包 下载完成后&#xff0c;将Redis安装包解压到一个指定的目录&#xff0c;例如&#xff1a;C:\Re…...

编程日记 2025/9/10 3:56:21

2025系统架构师（一考就过）：案例之四：架构复用、架构评估、特定架构（DSSA）、架构开发方法（ABSD）

二、软件架构复用 ◆软件产品线是指一组软件密集型系统&#xff0c;它们共享一个公共的、可管理的特性集&#xff0c;满足某个特定市场或任务的具体需要&#xff0c;是以规定的方式用公共的核心资产集成开发出来的。即围绕核心资产库进行管理复用、集成新的系统。 ◆软件架构…...

编程日记 2025/9/9 3:45:54

软件工程应试复习（考试折磨版）

针对学校软件工程考试&#xff0c;参考教材《软件工程导论&#xff08;第6版&#xff09;》1-8章 学习的艺术&#xff1a;不断地尝试&#xff0c;我一定会找到高效用的方法&#xff0c;让学习变成一门艺术&#xff0c;从应试备考中解救出我的时间同胞们。 好嘞&#xff01;既然…...

编程日记 2025/9/12 14:36:15

Kafka可视化工具EFAK(Kafka-eagle)安装部署

Kafka Eagle是什么&#xff1f; Kafka Eagle是一款用于监控和管理Apache Kafka的开源系统&#xff0c;它提供了完善的管理页面&#xff0c;例如Broker详情、性能指标趋势、Topic集合、消费者信息等。 源代码地址&#xff1a;https://github.com/smartloli/kafka-eagle 前置条件…...

编程日记 2025/9/12 23:06:02

本地部署SenseVoice（包括离线设备操作）

Anaconda3 Anaconda Installers and Packages SenseVoice 魔搭社区 FFmpeg FFmpeg 安装Anaconda3&#xff08;Windows&#xff09; 下载完成后&#xff0c;自定义路径后安装。在开始菜单中出现Anaconda Prompt说明安装成功。 安装Anaconda3&#xff08;Linux&#xff…...

编程日记 2025/9/13 3:24:26

sql server 复制从备份初始化数据

参考 &#xff1a; 从备份初始化订阅&#xff08;事务&#xff09; - SQL Server | Microsoft Learn sql server 复制默认是用快照初始化数据的&#xff0c;也支持从备份初始化数据&#xff0c;参考如上...

编程日记 2025/8/25 20:39:24

MySQL 复合索引

MySQL 复合索引详解 引言 在实际业务场景中&#xff0c;多条件组合查询是最常见的操作之一。例如&#xff0c;根据“用户ID 时间范围”查询订单&#xff0c;或根据“商品分类 价格区间”筛选商品。此时&#xff0c;单列索引可能无法满足性能需求&#xff0c;而**复合索引&am…...

编程日记 2025/9/12 11:16:07

蓝桥杯备赛（C/C++组）

README&#xff1a; 本笔记是自己的备考笔记&#xff0c;按照官网提纲进行复习&#xff01;适合有基础&#xff0c;复习用。 一、总考点 试题考查选手解决实际问题的能力&#xff0c;对于结果填空题&#xff0c;选手可以使用手算、软件、编程等方法解决&#xff0c;对于编程大…...

编程日记 2025/9/6 15:34:22

人类驾驶的人脑两种判断模式（反射和预判）--＞自动驾驶两种AI模式

一种模式是直觉模式&#xff0c;判断是基于条件反射&#xff0c;视觉感知 触发到 直接条件反射&#xff08;从经历中沉淀形成的神经信息闭环&#xff09;&#xff0c;类似现在自动驾驶技术的传统AI模式。 另一种模式是物理时空图式推理模式&#xff0c;判断是基于预判预测&…...

编程日记 2025/9/11 11:05:58

C语言机试编程题

编写版本&#xff1a;vc2022 1.求最大/小值 #include<stdio.h> int main(){int a[50],n;int max, min;printf("请输入您要输入几个数");scanf_s("%d", &n);printf("请输入您要比较的%d个数\n",n);for (int i 0; i<n; i) {scanf_…...

编程日记 2025/9/11 13:59:19

SmartMediakit之音视频直播技术的极致体验与广泛应用

引言 在数字化时代&#xff0c;音视频直播技术已经深入到各个行业和领域&#xff0c;成为信息传递和交流的重要手段。视沃科技自2015年成立以来&#xff0c;一直致力于为传统行业提供极致体验的音视频直播技术解决方案&#xff0c;其旗下的大牛直播SDK凭借强大的功能和卓越的性…...

编程日记 2025/9/8 21:36:22

NVIDIA GEFORCE GTX1050显卡如何搭建AI人脸识别技术环境

NVIDIA GEFORCE GTX1050显卡如何搭建AI人脸识别技术环境！实际上，这个显卡虽然是入门级的，但是依然可以满足你的入门学习要求。 你的显卡是 NVIDIA GTX 1050，显存为 2GB，虽然它的性能不如高端显卡（如RTX 3060、3090等），但对于学习和研究 人脸识别技术，尤其是进行基础的…...

编程日记 2025/9/11 21:48:31

华为数通Datacom认证体系详解：从HCIA到HCIE的进阶路径

华为数通Datacom&#xff08;Data Communication&#xff09;课程是华为认证体系中的核心方向之一&#xff0c;聚焦企业网络通信与数据通信技术&#xff0c;适合从事网络规划、部署和运维的人员。 一、数通Datacom课程体系 华为数通Datacom认证分为 三个级别&#xff0c;逐级递…...

编程日记 2025/9/13 4:32:05

【运维】内网服务器借助通过某台可上外网的服务器实现公网访问

背景&#xff1a; 内网服务器无法连接公网,但是办公电脑可以连接内网服务器又可以连接公网。 安装软件 1、frp 2、ccproxy 配置 1、内网服务器 # 内网服务器启动frp服务配置文件参考vi frps.ini# frps.ini [common] bind_port 7000# 备注: bind_port端口可以随意配置。配置完…...

编程日记 2025/9/10 18:46:45

Spring之Bean的生命周期过程中调用的方法

1。这个部分除了6,9都在这了 package com.example.springbootdemo3.lifebeean;import org.springframework.beans.BeansException; import org.springframework.beans.factory.*; import org.springframework.beans.factory.annotation.Value; import org.springframework.con…...

编程日记 2025/9/9 15:50:26

Vue 中动态实现进度条

在 Vue 中动态实现进度条&#xff0c;基本上有两种常见的方法&#xff1a;直接通过 Vue 数据绑定控制样式&#xff0c;或者利用外部库来实现更复杂的功能。我们会深入探讨这两种方式&#xff0c;并且详细说明每种方法的实现步骤、优缺点以及使用场景。 1. 使用 Vue 数据绑定来…...

编程日记 2025/9/8 21:12:44

Qt互斥锁(QMutex)的使用、QMutexLocker的使用

Qt互斥锁【QMutex】的使用、QMutexLocker的使用 Chapter1 Qt互斥锁(QMutex)的使用、QMutexLocker的使用一、QMutexLocker和QMutex实现示例图二、QMutex和QMutexLocker的关系&#xff08;个人理解&#xff09;三、QMutex使用和QMutexLocker使用1.QMutex的使用2.QMutexLocker的使…...

编程日记 2025/9/10 6:18:19

Python开发 Flask框架面试题及参考答案

目录 Flask 的核心设计理念是什么？与 Django 相比有哪些显著差异？ 解释 Flask 框架的核心理念及其作为 “微框架” 的优缺点 Flask 的依赖库有哪些？简述 Werkzeug 和 Jinja2 的作用 什么是 WSGI？Flask 如何基于 WSGI 实现服务端与应用的交互 解释 RESTful API 的设计原…...

编程日记 2025/9/11 3:23:50

DeepSeek模型昇腾部署优秀实践

2024年12月26日&#xff0c;DeepSeek-V3横空出世&#xff0c;以其卓越性能备受瞩目。该模型发布即支持昇腾&#xff0c;用户可在昇腾硬件和MindIE推理引擎上实现高效推理&#xff0c;但在实际操作中&#xff0c;部署流程与常见问题困扰着不少开发者。本文将为你详细阐述昇腾 De…...

编程日记 2025/9/10 23:56:25

【cv】vs2022配置opencv

release下配置包含目录和库目录 E:\sdk\sdk_cuda12.3\opencv490\include E:\sdk\sdk_cuda12.3\opencv490\include\opencv2 E:\sdk\sdk_cuda12.3\opencv490\lib release下配置包含链接器输入的依附依赖项 opencv_world490.lib release编译文件夹下需手动复制opencv_world49…...

编程日记 2025/9/13 0:48:04

RabbitMQ系列（五）基本概念之Queue

在 RabbitMQ 中&#xff0c;Queue&#xff08;队列&#xff09; 是存储消息的容器&#xff0c;也是消息传递的核心载体。以下是其核心特性与作用的全方位解析&#xff1a; 一、Queue 的定义与核心作用 消息存储容器 Queue 是 RabbitMQ 中实际存储消息的实体&#xff0c;生产者…...

编程日记 2025/9/13 5:02:16

从二维随机变量到多维随机变量

二维随机变量 设 X X X和 Y Y Y是定义在同一样本空间 Ω \varOmega Ω上的两个随机变量&#xff0c;称由它们组成的向量 ( X , Y ) (X, Y) (X,Y)为二维随机变量&#xff0c;亦称为二维随机向量&#xff0c;其中称 X X X和 Y Y Y是二维随机变量的分量。 采用多个随机变量去描述…...

编程日记 2025/9/10 3:40:49

IP-----动态路由OSPF

这只是IP的其中一块内容&#xff0c;IP还有更多内容可以查看IP专栏&#xff0c;前一章内容为GRE和MGRE &#xff0c;可通过以下路径查看IP-------GRE和MGRE-CSDN博客,欢迎指正 注意&#xff01;&#xff01;&#xff01;本部分内容较多所以分成了两部分在下一章 5.动态路由OS…...

编程日记 2025/9/12 0:18:02

RabbitMQ操作实战

1.RabbitMQ安装 RabbitMQ Windows 安装、配置、使用 - 小白教程-腾讯云开发者社区-腾讯云下载erlang&#xff1a;http://www.erlang.org/downloads/https://cloud.tencent.com/developer/article/2192340 Windows 10安装RabbitMQ及延时消息插件rabbitmq_delayed_message_exch…...

编程日记 2025/9/11 0:59:36

python-leetcode-不同路径

62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; class Solution:def uniquePaths(self, m: int, n: int) -> int:dp [1] * n # 仅保留一行for i in range(1, m):for j in range(1, n):dp[j] dp[j-1]return dp[-1]...

编程日记 2025/9/12 20:25:23

【react】快速上手基础教程

目录 一、React 简介 1.什么是 React 2.React 核心特性 二、环境搭建 1. 创建 React 项目 2.关键配置 三、核心概念 1. JSX 语法 表达式嵌入 样式处理 2. 组件 (Component) 3. 状态 (State) 与属性 (Props) 4. 事件处理 合成事件&#xff08;SyntheticEvent) 5. …...

编程日记 2025/9/12 3:45:59

【愚公系列】《Python网络爬虫从入门到精通》033-DataFrame的数据排序

标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度…...

编程日记 2025/9/12 5:04:54

一周一个Unity小游戏2D反弹球游戏 - 移动的弹板（触屏版）

前言 上文中实现了用鼠标移动控制弹板的移动&#xff0c;本文将实现手指触屏时弹板跟随手指移动的功能&#xff0c;并通过使用Unity自带的Device Simulator Devices Package来验证和模拟触屏设备的使用场景。 安装Device Simulator Devices Package 打开Unity Package Manager&…...

编程日记 2025/9/9 18:16:29

深度学习-11.用于自然语言处理的循环神经网络

Deep Learning - Lecture 11 Recurrent Networks for Natural Language Processing 介绍文本表示用数字表示单词词嵌入(word embedding) 机械翻译编码器 - 解码器循环模型&#xff08;Encoder-decoder recurrent models&#xff09;双向循环网络 注意力机制&#xff08;方法&am…...

编程日记 2025/9/12 7:25:31

2025年软考报名费用是多少?全国费用汇总!

软考报名时间终于确定了&#xff01;想要参加2025年软考的同学们注意啦&#xff01;特别是那些一年只有一次考试机会的科目&#xff0c;千万不要错过哦&#xff01;这里为大家整理了各地的报名时间、科目、费用等信息&#xff0c;快来看看吧&#xff01; 一、2025年软考时间安…...

编程日记 2025/9/8 19:54:58

el-input实现金额输入

需求&#xff1a;想要实现一个输入金额的el-input&#xff0c;限制只能输入数字和一个小数点。失焦数字转千分位&#xff0c;聚焦转为数字&#xff0c;超过最大值&#xff0c;红字提示 效果图 失焦 聚焦 报错效果 // 组件limitDialog <template><el-dialog:visible.s…...

编程日记 2025/9/6 19:45:48

C++11相较于C++98的新特性介绍:列表初始化，右值引用与移动语义

一&#xff0c;列表初始化 1.1C98中传统的{} C98中一般数组和结构体可以使用{}进行初始化&#xff1a; struct Date {int _year;int _month;int _day; };int main() {int a[] { 1,2,3,4,5 };Date _date { 2025,2,27 };return 0; } 1.2C11中的{} C11以后想统一初始化方式&…...

编程日记 2025/9/9 17:38:05

ISIS（中间系统到中间系统）——基础

ISIS是一项通用的动态路由协议&#xff0c;其隶属于链路状态路由协议&#xff0c;最初运行与OSI七层的网络层&#xff0c;采用组播地址224.0.0.14和224.0.0.15两个组波段&#xff0c;由于其较高的拓展性与高速收敛&#xff0c;被大多数运营商网络所使用 起源 ISIS最初是由国际…...

编程日记 2025/9/9 3:47:40

如何使用useContext进行全局状态管理？

在 React 中&#xff0c;使用 useContext 进行全局状态管理是一种有效的方法&#xff0c;尤其在需要在多个组件之间共享状态时。useContext 允许你在组件树中传递数据&#xff0c;而无需通过每个组件的 props 逐层传递。以下是关于如何使用 useContext 进行全局状态管理的详细指…...

编程日记 2025/9/8 13:37:37