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

vue3基础，小白从入门到精通

news 来源：原创 2025/7/12 21:05:56

一、vue.js 简述

二、下载 vue.esm-browser.js 这个模块文件

三、创建第一个Vue程序

3.1创建代码过程

四、v-on

五、循环遍历(v-for)

六、判断语法(v-if和v-show)

6.1节点的动态属性v-bind

6.2 用v-bind实现CSS样式绑定

一、vue.js 简述

Vue 3 是一款流行的 JavaScript 前端框架，以下是其基础内容介绍

二、下载 vue.esm-browser.js 这个模块文件

三、创建第一个Vue程序

3.1创建代码过程

   <!-- {{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染如: Vue 实例中定义一个 msg 变量, 值为 "Hello world", 在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world" --><div id="app"><p>{{ msg }}</p><p>{{ web.title }}</p><p>{{ web.url }}</p><p>{{ func() }}</p></div>
<script>//创建一个 Vue 应用程序Vue.createApp({// 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等// 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。setup(){// 定义数据let msg = "成功创建第一个Vue应用程序!";const web = {title: "百度一下，你就知道",url: "www.baidu.com"}// 定义方法（函数）const func = ()=> console.log("方法func被调用");// 返回一个对象类型的数据return { msg,   web,func}}}).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上</script>

运行结果：

四、v-on

用于绑定事件监听器，如v-on:click，可简写为@。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定事件</title>
</head><body><div id="app"><h3>{{ msg }}</h3><h3>{{ web.url }}</h3><h3>{{ web.user }}</h3><h3>{{ sub(100, 20) }}</h3><!-- v-on:click 表示在 button 元素上监听 click 事件 --><button v-on:click="edit">修改</button> <br><!-- @click 简写形式 --><button @click="add(20, 30)">加法</button> <br><!-- enter space tab 按键修饰符keyup是在用户松开按键时才触发keydown是在用户按下按键时立即触发--><!-- 回车 <input type="text" @keyup.enter="add(40, 60)"> <br>空格 <input type="text" @keyup.space="add(20, 30)"> <br>Tab <input type="text" @keydown.tab="add(10, 20)"> <br>w <input type="text" @keyup.w="add(5, 10)"> <br> --><!-- 组合快捷键 --><!-- Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)"> --></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {let msg = "成功启动!!!";const web = reactive({title: "百度",url: "baidu.com",user: 0});const edit = () => {web.url = "www.baidu.com"msg = "云中医" //错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据console.log(`msg修改为: ${msg}`); //从控制台打印信息可以知道确实改变了，但是模板没有响应更新（非响应式数据）    }const add = (a, b) => {web.user += a + b}const sub = (a, b) => {return a - b}return {msg, //普通变量, 非响应式数据, 在模板中普通变量不会自动更新web, //响应式数据edit, //方法add,sub,}}}).mount("#app")</script></body>
</html>

五、循环遍历(v-for)

语法：

v-for="item in items"
v-for="(item,index) in items"

items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历指令</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><!-- 遍历对象的值 --><h4>遍历对象的值。</h4><ul><li v-for="value in data.user">{{ value }}</li></ul><!-- 遍历对象的值和索引。 注意：写指令时，先值后索引 --><h4>遍历对象的值和索引。 注意：写指令时，先值后索引</h4><ul><li v-for="(value, index) in data.number">{{ index }} : {{ value }}</li></ul><!-- 遍历对象的值和键。 注意：写指令时，先值后键 --><h4>遍历对象的值和键。 注意：写指令时，先值后键</h4><ul><li v-for="(value, key) in data.user">{{ key }} : {{ value }}</li></ul><!-- 遍历对象的值，键和索引。 注意：写指令时，先值再键后索引 --><h4>遍历对象的值，键和索引。 注意：写指令时，先值再键后索引</h4><ul><li v-for="(value, key, index) in data.user">{{ index }} : {{ key }} : {{ value }}</li></ul><h4>指令嵌套： 先用v-for指令遍历对象，然后展示符合v-if条件的节点</h4><ul><!--注： <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染  --><template v-for="(value, key, index) in data.user"><li v-if="index == 1">  {{ index }} : {{ key }} : {{ value }}</li>           </template></ul></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//数组number: ["十",  "十一",  "十二"], //对象user: { name: "李雷",   gender: "女" }});return {data}}}).mount("#app")</script></body>
</html>

六、判断语法(v-if和v-show)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节点的条件渲染</title>
</head><body><div id="app"><h3>显示状态: {{ web.show }}</h3><!-- Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none） --><p v-show="web.show">广东云浮中医药职业学院计算机学院v-show</p>   <!-- Vue处理v-if变化时，是通过删除节点实现隐藏的（可以通过F12检查源代码，当点击时，源码会删除节点） 。当遇到需要频繁显示和隐藏的场景时，不是合使用v-if， 因为频繁增删节点，会导致渲染效率下降 --><p v-if="web.show">广东云浮中医药职业学院基础学院v-if</p><button @click="toggle">切换显示状态</button><hr><h3>{{ web.user }}</h3><p v-if="web.user < 100">新网站</p><p v-else-if="web.user >= 100 && web.user < 1000">优秀网站</p><p v-else-if="web.user >= 1000 && web.user < 10000">资深网站</p><p v-else>超级网站</p><button @click="add_user">增加用户</button></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据show: true,user: 500});const toggle = () => {web.show = !web.show;   // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获}const add_user = () => {web.user += 1000;}return {web,toggle,add_user}}}).mount("#app");</script></body>
</html>

六、v-bind 设置元素属性

v-bind 用来为元素绑定属性，例如 src、title、class.

用法：v-bind:属性名=表达式.

简写：:属性名

Ps：通过 v-bind 增删属性是动态的.

6.1节点的动态属性v-bind

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节点的动态属性(单向绑定)</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><h3>  iuput标签动态属性绑定    v-bind:value </h3><input type="text" v-bind:value="web.str"><h3>  iuput标签动态属性绑定(简写形式)   :str </h3><input type="text" :value="web.str"><h3>  img标签动态属性绑定(简写形式)    :src </h3><img :src="web.img"><br><button @click="change">修改</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({str: "w",img: "./img_src/logo0.png",})const change = () => {web.str += "w";web.img=`./img_src/logo1.png`;}return {web,change}}}).mount("#app")</script></body>
</html>

6.2 用v-bind实现CSS样式绑定

v-if与v-show可以根据条件的结果,来决定是否显示指定内容.

v-if: 条件不满足时, 元素不会存在.

v-show: 条件不满足时, 元素不会显示(但仍然存在).

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节点的动态属性(单向绑定)</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><!-- 【CSS样式的绑定，有以下两种常用方式】 --><!-- 【方案1：通过布尔值控制某个类名是否存在，进而控制对应的CSS样式是否被选中生效】 --><!-- v-bind指令虽然可以直接对class属性进行数据绑定，但如果将绑定的值设置为一个对象，其就会产生一种新的语法规则，设置的对象中可以指定对应的class样式是否被选用。 --><h5 :class="{textColor:web.fontStatus}">广东云浮中医药职业学院</h5><button @click="change_color">修改颜色</button><!-- 【方案2：直接将标签的style属性和响应式对象绑定起来（较常用）】 --><h5 :style="b_style">我爱你中国，字号{{b_style.fontSize}}</h5><button @click="add_fontsize">加大字号</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({fontStatus: false})const change_color = () => {web.fontStatus = !web.fontStatus;}const b_style = reactive({color: "green",fontSize: "10px"})let p = 10;const add_fontsize = () => {p += 5;b_style.fontSize = `${p}px`;}return {web,b_style,change_color,add_fontsize}}}).mount("#app")</script></body>
</html>

vue3基础，小白从入门到精通

目录一、vue.js 简述二、下载 vue.esm-browser.js 这个模块文件三、创建第一个Vue程序 3.1创建代码过程四、v-on 五、循环遍历(v-for) 六、判断语法(v-if和v-show) 6.1节点的动态属性v-bind 6.2 用v-bind实现CSS样式绑定一、vue.js 简述 Vue 3 是一款流行的 J…...

编程日记 2025/7/12 21:05:56

Go 如何优雅退出进程

优雅退出设计步骤在 Go 项目中，设计优雅退出（Graceful Shutdown）时，通常需要确保在收到退出信号时，程序能够安全地清理资源并优雅地退出。以下是常见的优雅退出设计步骤： 步骤 1：创建 contex…...

编程日记 2025/7/12 20:18:38

#Vue3篇：无感刷新token的原理JSESSIONID无感刷新和JWT接口刷新

基于这个后端是怎么更新token的为了理解后端是如何更新 Token 的，我们需要考虑一个典型的基于 Token 的身份验证流程，特别是涉及 JSESSIONID 和自定义 Token（如 JWT, JSON Web Token）的情况。下面我将介绍两种常见的更新 Token …...

编程日记 2025/7/12 9:44:26

从零开始学桶排序：Java 示例与优化建议

目录一、桶排序的工作原理二、适用场景三、桶排序的时间复杂度四、Java 实现桶排序桶排序（Bucket Sort）是一种基于分桶的排序算法，适用于输入数据分布较均匀的场景。它通过将元素分配到不同的“桶”中，然后对每个桶内的元…...

编程日记 2025/7/12 20:35:17

自定义luacheck校验规则

安装运行环境安装环境及源码解析，参考：LuaCheck校验原理解析自定义校验规则从代码中可以看出，定义一条规则有以下关键点： 需要定义告警信息：由键值对组成，key为告警编码（不一定为纯数字&…...

编程日记 2025/7/12 21:00:58

Mac连接云服务器工具推荐

文章目录前言步骤1. 下载2. 安装3. 常用插件安装4. 连接ssh测试5. 连接sftp测试注意：ssh和sftp的区别注意：不同文件传输的区别解决SSL自动退出前言 Royal TSX是什么： Royal TSX 是一款跨平台的远程桌面和连接管理工具，专为 mac…...

编程日记 2025/7/9 23:19:15

【react】Redux的设计思想与工作原理

Redux 的设计理念 Redux 的设计采用了 Facebook 提出的 Flux 数据处理理念在 Flux 中通过建立一个公共集中数据仓库 Store 进行管理，整体分成四个部分即: View （视图层）、Action （动作）、Dispatcher (派发器)、Stor…...

编程日记 2025/7/10 21:22:41

深入解析Android JNI：以Visualizer为例

深入解析Android JNI：以Visualizer为例引言 Java Native Interface (JNI) 是Java平台提供的一种机制，允许Java代码与本地代码（如C/C++）进行交互。在Android开发中，JNI被广泛用于性能优化、访问底层系统API、以及复用现有的C/C++库。本文将通过Android中的Visualizer类，…...

编程日记 2025/7/1 1:15:20

Java基于SpringBoot的甘肃非物质文化网站的设计与实现，附源码

博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...

编程日记 2025/7/6 2:27:41

Unity小白工作心得（无限记录）

24届毕业，11月才找到工作在一家小公司。工作两个月了，遇到最大的问题就是探索新知识，每天都是摸索式前进，因为工作面临着交付，你不得不想尽办法解决问题然后交给上面，但其他程序员用的引擎不一样&#xff0…...

编程日记 2025/7/10 7:55:41

STC单片机内部常见寄存器及其作用

STC单片机内部常见寄存器及其作用 STC单片机是基于8051架构的增强型单片机，广泛应用于嵌入式系统中。其内部有多个特殊功能寄存器（SFR, Special Function Register），用于控制硬件模块（如定时器、串口、中断等&#xf…...

编程日记 2025/7/8 20:37:10

【亚马逊云】基于Amazon EC2实例部署 NextCloud 云网盘并使用 Docker-compose 搭建 ONLYOFFICE 企业在线办公应用软件

文章目录 1. 部署EC2实例2. 安装 Docker 服务3. 安装docker-compose4. 创建Docker-compose文件5. 创建nginx.conf文件6. 运行docker-compose命令开始部署7. 访问ONLYOFFICE插件8. 访问NextCloud云盘9. 下载并启用ONLYOFFICE插件10. 上传文件测试11. 所遇问题12. 参考链接 1. 部…...

编程日记 2025/7/7 7:54:34

vim、watch、cp和mv

一、vim使用技巧 vim主配置文件：/etc/vimrc （对所有用户都生效） vim子配置文件：vim ~/.vimrc (只对当前用户生效） 可写入： set nu 显示行号 ts2 tab键长度为两个空格（默认为8个空格…...

编程日记 2025/7/12 6:46:01

【Linux】：线程安全 + 死锁问题

📃个人主页：island1314 🔥个人专栏：Linux—登神长阶 ⛺️ 欢迎关注：👍点赞 👂🏽留言 😍收藏 💞 💞 💞 1. 线程安全和重入问题&…...

编程日记 2025/7/11 15:10:53

HarmonyOS Next 应用元服务开发-应用接续动态配置迁移保持迁移连续性

保证迁移连续性，由于迁移加载时，目标端拉起的应用可能执行过自己的迁移状态设置命令（如：冷启动时目标端在onCreate中设置了INACTIVE；热启动时对端已打开了不可迁移的页面，迁移状态为INACTIVE等情况&#xf…...

编程日记 2025/7/12 13:21:19

重装操作系统后 Oracle 11g 数据库数据还原

场景描述： 由于SSD系统盘损坏，更换硬盘后重装了操作系统，Oracle数据库之前安装在D盘(另一个硬盘)，更换硬盘多添加一个盘符重装系统后盘符从D变成E，也就是之前的D:/app/... 变成了现在的 E:/app/...，重新安装…...

编程日记 2025/7/10 23:44:49

《Vue3实战教程》39：Vue3无障碍访问

如果您有疑问，请观看视频教程《Vue3实战教程》无障碍访问 Web 无障碍访问 (也称为 a11y) 是指创建可供任何人使用的网站的做法——无论是身患某种障碍、通过慢速的网络连接访问、使用老旧或损坏的硬件，还是仅处于某种不方便的环境。例如，…...

编程日记 2025/7/12 17:16:09

Linux-Redis哨兵搭建

环境资源准备主机名IP端口号角色vm1192.168.64.156379/26379mastervm2192.168.64.166379/26379slavevm3192.168.64.176379/26379slave 6379为redis服务暴露端口号、26379为sentinel暴露端口号。安装Redis # 包文件下载 wget https://github.com/redis/redis/archive/7.2.2…...

编程日记 2025/7/7 22:52:53

数据分析思维（六）：分析方法——相关分析方法

数据分析并非只是简单的数据分析工具三板斧——Excel、SQL、Python，更重要的是数据分析思维。没有数据分析思维和业务知识，就算拿到一堆数据，也不知道如何下手。推荐书本《数据分析思维——分析方法和业务知识》，本文内容就是提取…...

编程日记 2025/7/8 22:05:30

Go基础之环境搭建

文章目录 1 Go1.1 简介1.1.1 定义1.1.2 特点用途 1.2 环境配置1.2.1 下载安装1.2.2 环境配置1.2.2.1 添加环境变量1.2.2.2 各个环境变量理解 1.2.3 验证环境变量 1.3 包管理工具 Go Modules1.3.1 开启使用1.3.2 添加依赖包1.3.3 配置国内包源1.3.3.1 通过 go env 配置1.3.3.2 修…...

编程日记 2025/7/11 16:11:33

Flume的安装和使用

一、安装Flume 1. 下载flume-1.7.0 http://mirrors.shu.edu.cn/apache/flume/1.7.0/apache-flume-1.7.0-bin.tar.gz 2. 解压改名 tar xvf apache-flume-1.7.0-bin.tar.gz mv apache-flume-1.7.0-bin flume 二、配置Flume 1. 配置sh文件 cp conf/flume-env.sh.template …...

编程日记 2025/7/12 15:43:17

原生js封装ajax请求以及css实现提示效果和禁止点击效果

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0,user-scalableno"><title>本地模式网络切换</title>&l…...

编程日记 2025/7/10 14:45:40

idea 的 springboot项目spring-boot-devtools 自动编译配置热部署

1，设置一 2，设置二设置二（旧版本） CtrlShiftAlt/ 点击弹出框中Registry... 引入（如果报错，换不同的版本） <dependency><groupId>org.springframework.boot</groupId><a…...

编程日记 2025/6/28 15:46:18

算法 class 005 （对数器C语言实现）

对数器的概念： 用来测试你的算法是否正确。怎么做呢？ 1：比如，写个冒泡排序，作为对比的对象 2：生成一个随机数数组，用来测试 3：用冒泡排序和你想要验证的那个排序算法，同…...

编程日记 2025/7/12 1:54:36

靶场搭建问题(技巧)总结

目录 DVWA靶场问题待续、更新中...... DVWA靶场问题错误信息 Parse error: syntax error, unexpected ‘[’, expecting ‘)’ in C:\Softwares\phpstudy\PHPTutorial\WWW\dvwa\dvwa\includes\dvwaPage.inc.php on line 52 原因 phpstudy2018所使用的php版本过低&#xff0c…...

编程日记 2025/7/9 5:28:01

Elasticsearch DSL版

文章目录 1.索引库操作创建索引库：删除索引库：查询索引库：修改索引库：总结 2.文档操作创建文档：查询文档：删除文档：全量修改文档：增量修改文档：总结 3.DSL查询语法&#…...

编程日记 2025/7/9 10:34:43

在K8S中，Pod请求另一个Pod偶尔出现超市或延迟，如何排查？

在Kubernetes中，当Pod请求另一个Pod时偶尔出现超时或延迟，可能是由于多种原因造成的。以下是一些建立的排查步骤： 1. 检查网络配置和插件： 确认你的kubernetes集群使用了合适的网络插件（如Calico、Flannel等&#xf…...

编程日记 2025/7/9 5:34:05

Echarts实现大屏可视化2

目录一、效果展示二、说明 2.1 销售额统计图表 2.2 全国热榜模块三、边框图片【border-image】 3.1 使用场景 3.2 边框图片切图原理 3.3 边框图片语法【重要】四、代码展示 4.1 展示页面 4.2 数据概览区域 4.3 监控区域 4.4 点位分布统计区域 4.5 设备数据统…...

编程日记 2025/7/8 23:38:09

HarmonyOS NEXT 应用开发练习：智能视频推荐

一、整体思路本DEMO展示了如何在HarmonyOS NEXT平台上开发一个智能视频推荐应用。应用通过模拟的用户偏好数据，为用户推荐可能感兴趣的视频。用户可以通过滑动屏幕查看推荐的视频列表，并点击视频封面进入播放页面，本例中仅模拟点击效果&…...

编程日记 2025/7/10 11:37:13

FPGA（二）组成结构基础内容

1. FPGA的基本结构 FPGA主要由以下部分组成： （1）可编程逻辑单元（CLB）：CLB是FPGA中最基本的逻辑单元，由查找表（LUT）和触发器组成，可实现任意逻辑功能。查找表…...

编程日记 2025/7/8 11:25:13

linux中执行命令

1.1 命令格式命令格式： 主命令选项参数（操作对象） 命令分为两类： 内置命令（ builtin ）：由 shell 程序自带的命令外部命令：有独立的可执行程序文件，文件名即命令…...

编程日记 2025/7/10 1:18:06

《Java 数据结构》

《Java 数据结构》 1. 概述 Java 数据结构是计算机科学中的一种基础概念，它涉及到数据的组织和存储方式，以便能够高效地访问和修改数据。在 Java 中，数据结构通常通过类和接口来实现，这些类和接口提供了用于操作数据的各种方法。…...

编程日记 2025/7/7 2:28:25

C# 设计模式（结构型模式）：装饰器模式

C# 设计模式（结构型模式）：装饰器模式在软件开发中，面对需要扩展功能但又不想修改已有代码的情况时，装饰模式（Decorator Pattern）是一个非常有用的设计模式。装饰模式允许我们在不改变对象自身…...

编程日记 2025/7/7 23:24:06

ubuntu初始配置

ubuntu初始配置 vm下ubuntu安装vmtools安装常用工具ubuntu终端美化安装ssh使用apt安装时出现错误解决办法 vm下ubuntu安装vmtools //安装vmtools sudo apt-get install open-vm-tools //桌面组件提供了更好的集成体验，包括拖放文件和共享剪贴板等功能 sudo apt-get…...

编程日记 2025/7/10 1:25:29

Spark Runtime Filter

Runtime Filter 参考链接： https://docs.google.com/document/d/16IEuyLeQlubQkH8YuVuXWKo2-grVIoDJqQpHZrE7q04/edit?tabt.0https://www.modb.pro/db/557718https://issues.apache.org/jira/browse/SPARK-32268https://github.com/apache/spark/pull/35789https…...

编程日记 2025/7/8 8:29:21

《Vue3实战教程》42：Vue3TypeScript 与组合式 API

如果您有疑问，请观看视频教程《Vue3实战教程》 TypeScript 与组合式 API 这一章假设你已经阅读了搭配 TypeScript 使用 Vue 的概览。为组件的 props 标注类型使用 <script setup> 当使用 <script setup> 时，defineProps() 宏函数支…...

编程日记 2025/7/11 17:57:42

【Hadoop】Hadoop安全之Knox网关

目录一、概述 2.1 knox介绍 2.2 版本信息二、部署三、验证Knox网关 3.1 Hdfs RESTFULL 3.2 HDFSUI 3.3 YARNUI 3.4 HBASEUI 一、概述 2.1 knox介绍 Apache Knox网关是一个用于与Apache Hadoop部署的REST api和ui交互的应用程序网关。Knox网关为所有与Apache Hadoop…...

编程日记 2025/7/10 15:03:58

UML之关联

关联指两个类之间的各种联系。UML使用各种单实线表示关联，这个单实线可以是直线（垂直的、水平的或者倾斜的）、折线甚至曲线。事实上，关联也是展示类的属性的另一外的一种形式。例如在下图中，我们通过一条实线连接类B…...

编程日记 2025/7/7 22:36:59

大数据面试笔试宝典之大数据运维面试

1.大数据集群节点规划 1.HDFS 集群节点规划假如业务系统数据量每天增量 50T ，保留周期为 30 天，那么...

编程日记 2025/7/5 8:10:25

Matlab全局变量用法及其实例分析

⭕⭕ 目录 ⭕⭕ 一、全局变量使用说明二、全局变量的用法实例演示2.1 实例演示2.2 修改global 一、全局变量使用说明全局变量是指在不同的工作空间以及基本的工作空间中可以共享的变量。用户只需要在主程序或者任何子程序中声明一个或多个全局变量，则函数和主程序…...

编程日记 2025/7/10 15:06:35

leetcode hot 100 跳跃游戏

55. 跳跃游戏已解答中等相关标签相关企业给你一个非负整数数组 nums ，你最初位于数组的第一个下标。数组中的每个元素代表你在该位置可以跳跃的最大长度。判断你是否能够到达最后一个下标，如果可以，返回 true ；否则…...

编程日记 2025/7/11 17:56:23

CG顶会论文阅读｜《科技论文写作》硕士课程报告

文章目录一、基本信息1.1 论文基本信息1.2 课程基本信息1.3 博文基本信息二、论文评述（中英双语）2.1 研究问题（Research Problem）2.2 创新点（Innovation/Contribution）2.3 优点（Why this pape…...

编程日记 2025/7/12 6:30:36

短视频矩阵系统搭建开发指导

在数字化营销的广阔天地中，抖音短视频已迅速崛起为一个拥有巨大影响力的社交媒体平台。随着其受众范围的日益扩大，采用有效的搜索引擎优化（SEO）策略以增强视频的曝光度和吸引流量变得至关重要。本文旨在阐述一种专为抖音短视频量身…...

编程日记 2025/7/8 21:53:35

LeetCode热题100-移动零【JavaScript讲解】

题目： 根据本题想思路： 快指针和慢指针同时移动，当遍历的值不为0的时候，将快指针的值赋给慢指针，如果遍历到0，快指针继续移动，慢指针不动等待被覆盖。之后使用fill方法填充0。具体答案放在最后…...

编程日记 2025/7/12 14:07:50

MarkDown 的 mermaid gantt（甘特图）、mermaid sequenceDiagram （流程图）语法解析和应用

简简单单 Online zuozuo：简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo ：本心、输入输出、结果简简单单 Online zuozuo ：文章目录 MarkDown 的 mermaid gantt、mermaid sequenceDiagram 语法解析和应用前言mermaid gan…...

编程日记 2025/7/9 8:16:51

Flask 与 SocketIO 正确初始化及最佳实践调试

1、问题我使用Flask和Flask-SocketIO 来做 Websocket 链接。前期正常使用，但是后期布置修改什么导致Websocket连接失败。排查需求，才发现初始化不正常导致。 SocketIO 和 Flask 应用的初始化顺序和引用循环的问题 2、环境 python-engineio4.11.1 py…...

编程日记 2025/7/10 9:44:23