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

vue入门

news 来源：原创 2025/6/25 8:18:22

Vue入门

0.导入

0.1什么是Vue

Vue.js，通常称为Vue，是一个用于构建用户界面的渐进式JavaScript框架。Vue的设计目标是通过简单的API实现响应式的数据绑定和组合的视图组件。它的核心库专注于视图层，易于学习且易于与其他库或现有项目集成。同时，Vue也完全能够支持开发复杂的单页应用（SPA）。

0.2为什么要学Vue?

原生JS频繁的DOM操作，视图层和数据层混在一起，导致视图层渲染效率大大降低，代码可读性差。

Vue采用MVVM模型，数据和视图分离，视图渲染效率高，速率快。
Vue将数据和视图层分离。数据更新之后，视图会自动的刷新。
微信小程序等快应用，开发压缩包要求2M，脚本包越小越好！
Vue渐进式的框架：意思就是你不需要学习完Vue的全部知识。
现在企业里主流，一线大厂面试必会技术栈！

MVVM  是一种软件架构模式，用于将应用程序的用户界面（View）与数据和业务逻辑（Model）进行分离。MVVM  的核心思想是通过一个称为 ViewModel 的中间层来连接 View 和 Model。

M：Model（模型）代表应用程序的数据和业务逻辑。它负责数据的获取、处理和存储，以及定义应用程序的行为。
V：View（视图）代表应用程序的用户界面。它负责展示数据和与用户进行交互，通常由 HTML、XML 或其他类似的标记语言编写。
VM：ViewModel（视图模型）它是 View 和 Model 之间的连接层。ViewModel 处理用户界面上的事件和输入，并将它们转化为对 Model 的操作。它还负责从 Model 中获取数据，并将数据绑定到 View 中，使得数据的变化能够自动更新到用户界面上。

0.3面试题：vue特点

易用：在有HTMLCSSJavaScript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。
采用MVVM模型，数据和视图分离，视图渲染效率高，速率快。
代码可读性高。视图和数据逻辑耦合性低。

0.4 Vue要学习什么

了解Vue。
快速入门Vue，熟练的用Vue对象，操作属性和数据。
掌握Vue常用指令，并熟练用指令写一些案例。
掌握Element的基本使用，熟悉Element官网插件和样式，让我们的前端开发飞起来。
掌握用Element布局，编写学生列表网页综合案例。

1.快速入门

Vue的使用可以分为三步：

1.新建 HTML 页面，引入 Vue.js文件

<script src="js/vue.js"></script>

2.编写视图，创建带有id属性的标签

<div id="app"><input name="username" v-model="username" >{{username}}
</div>

{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

3.在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({el: "#app",data:{username: ""}，methods:{}
});

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
- el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值

data ：用来定义数据模型
- methods ：用来定义函数。这个我们在后面就会用到

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
//2.编写视图，创建带有id属性的标签
<div id="app"><input v-model="username"><!--插值表达式-->{{username}}
</div>
//1.新建 HTML 页面，引入 Vue.js文件
<script src="js/vue.js"></script>
<script>//3. 创建Vue核心对象,进行数据绑定new Vue({el:"#app",data{  // data() 是 ECMAScript 6 版本的新的写法return {username:""}}});</script>
</body>
</html>

2.Vue 常用指令

2.1 指令介绍

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
常用指令

指令						作用
v-html					把文本解析为HTML代码
v-bind					为HTML标签绑定属性值
v-if					条件性的渲染某元素，绑定为true时渲染，否则不渲染
v-else 					条件性的渲染某元素，绑定为true时渲染，否则不渲染
v-else-if				条件性的渲染某元素，绑定为true时渲染，否则不渲染
v-show					根据条件展示某元素，区别在于切换的是display属性的值
v-for					列表渲染，办理容器的元素或者对象的属性
v-on					为HTML标签绑定事件
v-model					在表单元素上创建双向数据绑定

2.2 表单绑定

表单绑定

v-model：在表单元素上创建双向数据绑定。
双向数据绑定

更新data数据，页面中的数据也会更新。
更新页面数据，data数据也会更新。
MVVM模型(ModelViewViewModel)：是MVC模式的改进版

在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。

2.3 文本插值

v-html：把文本解析为 HTML 代码。

<!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="div"><div>{{msg}}</div><div v-html="msg"></div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{msg:"<b>Hello Vue</b>"}});
</script>
</html>

效果：

<b>Hello Vue</b>
Hello Vue(有加粗效果)

2.4绑定属性

v-bind：为 HTML 标签绑定属性值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定属性</title><style>.my{border: 1px solid red;}</style>
</head>
<body><div id="div"><a v-bind:href="url">百度一下</a><br><a :href="url">百度一下</a><br><div :class="cls">我是div</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{url:"https://www.baidu.com",cls:"my"}});
</script>
</html>

效果：

2.5 条件渲染

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。

<!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="div"><!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 --><div v-if="num % 3 == 0">div1</div><div v-else-if="num % 3 == 1">div2</div><div v-else="num % 3 == 2">div3</div><div v-show="flag">div4</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{num:1,flag:false}});
</script>
</html>

2.6 列表渲染

v-for：列表渲染，遍历容器的元素或者对象的属性。

<!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="div"><ul><li v-for="name in names">{{name}}</li><li v-for="value in student">{{value}}</li></ul></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{names:["张三","李四","王五"],student:{name:"张三",age:23}}});
</script>
</html>

效果：

2.7 事件绑定

v-on：为 HTML 标签绑定事件。

<!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="div"><div>{{name}}</div><button v-on:click="change()">改变div的内容</button><button v-on:dblclick="change()">改变div的内容</button><button @click="change()">改变div的内容</button></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{name:"山东高合"},methods:{change(){this.name = "合齐天下"}}});
</script>
</html>

绑定事件：

@mouseenter=“enter(index)” 鼠标移入
@mouseleave="leave()"鼠标移出
@focus 获得焦点
@blur失去焦点
@keyupj键盘键入
…

注意：

小伙伴们，注意v-on:click="change()"与@click="change()"都是指绑定事件哟~
:class=“cla” 和 v-bind:class=“cla” 都是指绑定属性呦~

2.8 总结

指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
文本插值
v-html：把文本解析为HTML代码。
绑定属性
v-bind：为HTML标签绑定属性值。

:属性
条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。
列表渲染
v-for：列表渲染，遍历容器的元素或者对象的属性。
事件绑定
v-on：为HTML标签绑定事件。

@click
表单绑定
v-model：在表单元素上创建双向数据绑定。
M V VM模型

扩充

面试题：mvc和mvvm的区别和应用场景

答：MVC 是 Model View Controller 的缩写

Model：模型层，是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。

View：视图层，用户界面渲染w图是依据模型数据创建的。

Controller：控制器，数据模型和视图之间通信的桥梁，通常控制器负责从事图读取数据，控制用户输入，并向模型发送数据。

**MVC的特点：**实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。就是将模型和视图之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。

MVC的优点：

耦合度低，视图层和业务层分离
重用度高
生命周期成本低
可维护性高
部署快
MVC的缺点：

不适合小型项目的开发（架构分层复杂）
**MVC的应用：**主要用于中大型项目的分层开发。

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。

Model：模型，指的是后端传递的数据。
View：视图，指的是所看到的页面。
ViewModal：视图模型，mvvm模式的核心，它是连接view和model的桥梁。主要用来处理业务逻辑

MVVM的优点：

MVVM模式的主要目的是分离页面视图（View）和页面模型（Model）。

3. vue生命周期和钩子函数

3.1 什么是生命周期

一个Vue实例从开始创建一直到销毁的整个过程，称之为生命周期。
Vue框架的内置函数，随着组件的生命周期阶段的不同，会自动执行的函数，并且在特定的阶段做某件事，只需要调用相应的钩子函数即可。
我们可以通过使用生命周期（钩子）函数来判断Vue生命周期到达了什么阶段。

3.2 什么是生命周期钩子

生命周期分为4个阶段，8个方法。Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者在特定的阶段可以运行自己的代码。
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

vue对象创建前、后
挂载功能。先挂载标签元素、在挂载功能
更新。先更新数据层、把数据同步到渲染层
销毁

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 mounted 就行了。

Vue生命周期到达了什么阶段。

3.2 什么是生命周期钩子

生命周期分为4个阶段，8个方法。Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者在特定的阶段可以运行自己的代码。
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

vue对象创建前、后
挂载功能。先挂载标签元素、在挂载功能
更新。先更新数据层、把数据同步到渲染层
销毁

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

[外链图片转存中…(img-aXJhUKGX-1745572616209)]

看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 mounted 就行了。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。

vue入门

Vue入门目录: 导入快速入门什么是Vue为什么要学Vue面试题：Vue的特定Vue要学习什么 Vue常用指令指令介绍表单绑定文本插值绑定属性条件渲染列表渲染事件绑定总结 0.导入 0.1什么是Vue Vue.js，通常称为Vue，是一个用于构建用户界面的渐…...

编程日记 2025/6/25 8:18:22

Unity开发者快速认识Unreal 的BluePrint（二）

前言前一篇是通过UMG编辑器制作的一个简单ui功能，记录Unity开发者使用BluePrint需要特别注意的地方,这一篇是分析和理解对于场景中的3D物体交互的BluePrint怎么制作，以及需要注意的一些关键点！个人觉得最快的学习方式就是对比，入…...

编程日记 2025/6/3 13:32:12

APP和小程序需要注册域名吗？（国科云）

在移动互联网时代，APP和小程序已成为企业和个人提供服务、展示产品的重要渠道。那么APP和小程序的兴起是否对域名造成了冲击，APP和小程序是否需要注册域名呢？ APP是否需要注册域名？ 从技术上讲，没有域名的APP仍然可以…...

编程日记 2025/6/21 1:42:10

pandas读取MySQL中的数据

使用pandas读取MySQL中的数据 1、导入库 pip install pandas pip install sqlalchemy2、示例代码 # -*- coding: utf-8 -*-import pandas as pd import re from sqlalchemy import create_engine# 清洗文本 def clean_text(text):text...

编程日记 2025/6/25 7:47:05

算法设计与分析6（动态规划）

最长公共子序列和最长公共子串动态规划的思路与字符串匹配的编辑距离问题相似，对字符串最尾端字符分类讨论最长公共子序列可以是不连续出现的，只要出现顺序是一样的状态转移方程： 最长公共字串要求连续出现，中断了就归0…...

编程日记 2025/6/22 22:29:39

ubuntu 20.04 编译运行lio-sam,并保存为pcd

1.环境依赖 ubuntu 20.04 ROS1 gtsam sudo add-apt-repository ppa:borglab/gtsam-release-4.0 sudo apt install libgtsam-dev libgtsam-unstable-dev 其他依赖 sudo apt-get install ros-noetic-fake-localization sudo apt-get install ros-noetic-robot-localization…...

编程日记 2025/6/22 7:02:48

国标GB28181视频平台EasyGBS视频监控平台助力打造校园安防智能化

一、方案背景校园安全是教育管理中的重中之重。随着校园规模的不断扩大和安全管理要求的日益提高，传统的安防手段已难以满足现代校园的需求。EasyGBS作为一款基于国标GB/T28181协议的视频监控平台，能够实现对校园内各类视频监控设备的统一接入、管理和…...

编程日记 2025/6/21 13:48:46

深度解析 Java 泛型通配符 `＜? super T＞` 和 `＜? extends T＞`

Java 泛型中的通配符 ? 与 super、extends 关键字组合形成的 <? super T> 和 <? extends T> 是泛型系统中最重要的概念之一，也是许多开发者感到困惑的地方。本文将全面剖析它们的语义、使用场景和设计原理。一、基础概念回顾 1. 泛型通配符 ? ?…...

编程日记 2025/6/22 10:48:17

iphonex uniapp textarea标签兼容性处理过程梳理

嗨，我是小路。今天主要和大家分享的主题是“iphonex uniapp textarea标签兼容性处理过程梳理”。在uniapp项目中，经常会使用到uniapp原生的textarea标签，但在手机兼容性这块，textarea并不是很好用，会出现一些…...

编程日记 2025/6/24 9:09:07

SiSi Coin全球共识社区开创Meme币新纪元，通缩机制与社区自治引领Web3未来

SiSi Coin是独家首创新型MeMe币, 通过独特的“黑洞销毁零撸空投”机制打造社交裂变与价值捕获的去中心化生态模式，作为SiSi WEB3 的社区代币，它旨在通过创新的经济模型设计实现长期价值增长。《采用"黑洞机制"永久销毁加权分配》核心创新&…...

编程日记 2025/6/25 8:12:24

PCIe具体解释分析

参考文章 PCIe总线详解_STATEABC-GitCode 开源社区 https://zhuanlan.zhihu.com/p/652808759 PCI总线学习(一)：PCI总线结构-CSDN博客 PCI——第1章——PCI总线的基本知识-CSDN博客计算机中register、cache、memory的区别 - Lines Blog 什么是内存管理单元&#xff…...

编程日记 2025/6/3 13:31:16

OpenWrt 与 Docker：打造轻量级容器化应用平台技术分享

文章目录前言一、OpenWrt 与 Docker 的集成前提1.1 硬件与内核要求1.2 软件依赖二、Docker 环境部署与验证2.1 基础服务配置2.2 存储驱动适配三、容器化应用部署实践3.1 资源限制策略3.2 Docker Compose 适配四、性能优化与监控4.1 容器资源监控4.2 镜像精简策略五、典型问…...

编程日记 2025/6/25 7:13:20

sherpa-ncnn：Linux(x86/ARM32/ARM64)构建sherpa-ncnn --语音转文本大模型

更多内容：XiaoJ的知识星球目录 1.构建sherpa-ncnn2.运行2.1 运行sherpa-ncnn2.2 运行sherpa-ncnn-alsa 1.构建sherpa-ncnn x86构建： git clone https://github.com/k2-fsa/sherpa-ncnn cd sherpa-ncnn mkdir build cd build cmake -DCMAKE_BUILD_TYPE…...

编程日记 2025/6/24 9:11:08

nc工具！Netcat：TCP/IP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 Netcat 是一个简单的 Unix 实用程序，使用 TCP 或 UDP 协议跨网络连接读写数据。它被设计为一个可靠的“后端”工具，可以直接使用，也可以由其他程序和脚本轻松驱动。同时，它也是一个功能丰富的网络调试和探索工具&#xff0c…...

编程日记 2025/6/25 8:11:09

【持续更新】 CDC 跨时钟域处理

在之前的专栏《硬件架构的艺术》里，有讲过亚稳态以及多个时钟的处理办法，但是感觉还是太宽泛了些，不太好理解。在这篇博客里，将主要参考《Clock Domain Crossing (CDC) Design & Verification Techniques Using SystemVerilog…...

编程日记 2025/5/20 11:59:43

Mybatis-Plus，IDEA2024版本

目录 1、Mybatis-Plus介绍 2、Mybatis-Plus作用 3、Mybatis-Plus使用 1、引入依赖 2、配置数据库 3、生成代码 1、Mybatis-Plus介绍 Mybatis-Plus是在Mybatis的基础上进行的功能拓展，也就是Mybatis有的功能，Plus也有，而且比Mybatis更好用…...

编程日记 2025/6/25 8:02:59

LeNet5 神经网络的参数解析和图片尺寸解析

1.LeNet-5 神经网络以下是针对 LeNet-5 神经网络的详细参数解析和图片尺寸变化分析，和原始论文设计，通过分步计算说明各层的张量变换过程。经典的 LeNet-5架构简化版（原始论文输入为 32x32，MNIST 常用 28x28 需调整&#xff09…...

编程日记 2025/6/25 1:24:40

hadoop-3.3.5.tar.gz 镜像

清华大学镜像站 wget https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/hadoop-3.3.5/hadoop-3.3.5.tar.gz 阿里云镜像站 wget https://mirrors.aliyun.com/apache/hadoop/common/hadoop-3.3.5/hadoop-3.3.5.tar.gz 华为云镜像站 wget https://mirrors.huaweiclo…...

编程日记 2025/6/21 1:32:33

SD2351核心板：重构AI视觉产业价值链的“超级节点”

在AI视觉技术狂飙突进的当下，一个吊诡的现象正在浮现：一方面，学术界不断刷新着ImageNet等基准测试的精度纪录；另一方面，产业界却深陷“算法有、场景无，技术强、落地难”的怪圈。明远智睿SD2351核心板的问世…...

编程日记 2025/6/25 7:07:11

C++23中if consteval / if not consteval (P1938R3) 详解

文章目录引言基本概念consteval 回顾if consteval 和 if not consteval 的定义语法规则设计目的解决现有问题增强代码的可读性和可维护性提高代码的性能和安全性使用示例简单示例复杂示例与其他特性的对比与 if constexpr 的对比与 std::is_constant_evaluated() 的对比实…...

编程日记 2025/6/24 12:29:43

IPOF（Input-Process-Output-Feedback）方法学简介

一、背景知识：IPO与IPOF的基本概念 1. IPO（Input-Process-Output，输入-处理-输出） IPO是计算机科学、系统工程和设计领域中最基础的模型之一，用于描述系统如何将输入通过处理逻辑转换为输出。其核心是线性的单向流程…...

编程日记 2025/6/22 9:53:42

第十二天使用Unity Test Framework进行自动化测试性能优化：Profiler分析、内存管理

前言在完成游戏核心功能开发后，如何确保项目质量并成功发布到各大平台？本文将从自动化测试到商店上架，手把手教你构建完整的游戏开发闭环。使用Unity 2022 LTS版本进行演示，所有代码均经过实际项目验证。一、自动化测试实战&am…...

编程日记 2025/6/22 23:20:02

图解YOLO（You Only Look Once）目标检测（v1-v5）

1. YOLO系列整体介绍 YOLO属于深度学习经典检测方法中的单阶段（one - stage）类型，与两阶段（two - stage，如Faster - rcnn、Mask - Rcnn系列）方法相对。不同模型性能单阶段方法的最核心优势是速度非常快…...

编程日记 2025/6/20 23:33:57

U8G2在PC端模拟(C语言版本)

前提： 电脑已经准备好mingw编译器环境，已经加入环境变量. 测试方法： window下打开cmd,输入gcc -v 会有信息打印. u8g2 u8g2官方支持sdl2接口，已经做好了适配. 所以只需要在使用的开发环境配置好SDL2路径即可. sdl2和u8g2的适配…...

编程日记 2025/6/22 14:57:35

mac brew 无法找到php7.2 如何安装php7.2

mac brew 无法找到php7.2 如何安装php7.2 原因是升级过高版本的brew后已经不支持7.2了，但可以通过第三方工具来安装 brew tap shivammathur/php brew install shivammathur/php/php7.2标题安装完成后会提示以下信息： The php.ini and php-fpm.ini fil…...

编程日记 2025/6/22 1:51:02

苹果新规生效：即日起不再接受iOS 17 SDK编译的应用提交

今天（2025年4月25日），苹果公司正式实施了一项重要的开发者政策变更：所有提交至App Store Connect的应用必须使用iOS 18 SDK或更高版本编译，这意味着基于iOS 17.2及更早版本SDK构建的应用将无法再被提交审核。这一错误…...

编程日记 2025/6/22 22:46:23

OpenCv高阶（九）——背景建模

目录一、背景建模的核心目标与核心挑战 1. 核心目标 2. 核心挑战二、背景建模模型 1、帧差法原理 2. 概率模型（Parametric Models） （1）高斯混合模型（Gaussian Mixture Model, GMM） （…...

编程日记 2025/6/24 11:24:58

Docker Macvlan网络配置实战：解决“network already exists“错误

一、Macvlan网络的应用场景 Macvlan是Docker支持的多种网络驱动之一，它允许容器直接绑定到宿主机的物理接口，为每个容器分配独立的MAC地址。这种网络模式特别适合需要容器直接暴露在物理网络中的场景，例如： • IoT设备直接通信 …...

编程日记 2025/6/23 5:48:15

Android——Activity与Fragment通信

Activity向Fragment传递数据 Activity.java Bundle bundle new Bundle();bundle.putString("message", "wonima");BlankFragment bf new BlankFragment();bf.setArguments(bundle);Fragment.java Overridepublic View onCreateView(LayoutInflater infl…...

编程日记 2025/6/22 15:13:43

38 python random

在实际中，我们常常会用到随机的概念，比如模拟抽奖活动（如：月度优秀员工抽奖）生成测试数据（如：随机考勤时间、随机销售额）打乱数据顺序（如：随机分配任务到人）Python 的random模块就像你的 "随机事件生成器"，帮你轻松创建各种随机数据一、基础操作：从随…...

编程日记 2025/6/23 15:40:54

二叉树的遍历（广度优先搜索）

二叉树的第二种遍历方式，层序遍历，本质是运用队列对二叉树进行搜索。层序遍历是指将二叉树的每一层按顺序遍历，通过队列实现就是先将根节点push入队，统计此时的队列中的元素数量size，将size元素全部pop出去&#xff0…...

编程日记 2025/6/24 20:08:49

设备接入与APP（应用程序）接入华为云iotDA平台的详细操作步骤及获取方式

壹、设备登录 IoTDA 的通关清单详细操作路径及获取方式下面将之前整理的“设备登录 IoTDA 的通关清单”补充为带有详细操作路径的实用指南，逐项说明这些信息在哪里查、怎么查、怎么用，可以一步步操作落地，无需额外查文档。 ✅【完整版】设备…...

编程日记 2025/6/3 19:43:46

100个用户的聊天系统：轮询 vs WebSocket 综合对比

📊 对比表对比维度普通轮询（Polling）WebSocket实时性⏳ 一般（延迟轮询间隔）例如 5 秒轮询，平均延迟 2.5 秒⚡️ 高（消息可毫秒级送达）数据库压力🚨 高（每次…...

编程日记 2025/6/25 1:30:32

第四章第四节 Spark-Streaming核心编程（三）

打开kafka集群 Spark Streaming支持多种数据源接入方式，有两种典型场景基于Filebeat的目录监控：通过Filebeat实时监控指定目录（如日志目录），将新增文件内容采集并推送至Kafka消息队列。这种方式适用于需要持久化数据的…...

编程日记 2025/6/19 23:12:42

IDEA编写flinkSQL（快速体验版本，--无需配置环境）

相关资料文档内容链接地址datagen生成器https://nightlies.apache.org/flink/flink-docs-release-1.16/docs/connectors/table/datagen/print 生成器https://nightlies.apache.org/flink/flink-docs-release-1.16/docs/connectors/table/print/ 准备工作优点就是下载个ide…...

编程日记 2025/6/23 12:15:12

树莓派4B+Ubuntu24.04 电应普超声波传感器串口输出保姆级教程

1. 背景我的机器人上要用到超声波测距，因此就选了电应普的1拖4的超声波测距模块。用的是UART受控输出。这个模块的使用很简单，这里做一个笔记，也是对大家的一个参考。 2. 保姆级教程刚刚说了，这东西很简单，就是一…...

编程日记 2025/6/22 6:30:10

Aloudata Agent ：基于 NoETL 明细语义层的分析决策智能体

今天的分享包含四方面内容。首先，谈谈企业在数据分析智能体（Agent）探索时所面临的挑战；其次，介绍 Aloudata Agent 的关键技术创新点；第三，作为首次亮相，我们将通过产品演示揭晓产品 …...

编程日记 2025/6/23 19:20:48

C++学习-入门到精通-【1】C++编程入门，输入/输出和运算符

C学习-入门到精通-【1】C编程入门，输入/输出和运算符 C编程入门，输入/输出和运算符 C学习-入门到精通-【1】C编程入门，输入/输出和运算符第一个C程序：输出一行文本算术运算第一个C程序：输出一行文本 // 文本打印程序…...

编程日记 2025/6/3 19:42:17

力扣-234.回文链表

题目描述给你一个单链表的头节点 head ，请你判断该链表是否为回文链表。如果是，返回 true ；否则，返回 false 。 class Solution { public:bool isPalindrome(ListNode* head) {//快慢指针找到中间结点p1（偶数个结点…...

编程日记 2025/6/22 23:49:06

Electron从入门到入门

项目说明项目地址项目地址：https://gitee.com/ruirui-study/electron-demo 本项目为示例项目，代码注释非常清晰，给大家当做入门项目吧。其实很多东西都可以在我这基础上添加或修改、市面上有些已开源的项目，但是太臃肿了&am…...

编程日记 2025/6/21 20:05:12

【华为HCIP | 华为数通工程师】821—多选解析—第十七页

多选835、IS-IS协议所使用的NSAP地址主要由哪几个部分构成? A、AREA ID B、SEL C、DSCp D、SYSTEM ID 解析：NSAP地址：网络服务访问点（Network Service Access Point）是 OSI 协议中用于定位资源的地址。NSAP 的地址结构如图所示，它由 IDP（Initial Domain …...

编程日记 2025/6/22 7:01:07

electron-builder 打包安装与启动手动安装，最终解决方案，之前的文章与其他的人都不用看了。

介绍最近官网出了个electron-forge，但打包之后的软件包有问题会有个多余的遮罩物挡在软件的最前面，太恶心了。研究了很久硬是没法去掉。没办法只能重温electron-builder工具来进行打包。之前用过这个安装过一次，也是耗费了好几天。而且也做好了笔记，有资料的情况下，我万万…...

编程日记 2025/6/24 20:25:43

conda安装cuda+cudnn+pytorch【一条龙服务，以cuda12.1版本为例】

安装步骤在Windows和ubuntu系统中应该是一致的，建议浏览一遍文章再尝试配置环境一、创建新的虚拟环境这里以Anaconda为例，打开终端创建新的虚拟环境，test_torch可替换为别的名字（自定义），3.10也可以改…...

编程日记 2025/6/21 1:29:04

ElementUi的tabs样式太难修改，自定义tabs标签页

ElementUi的Tabs组件在某些情况下难以是自己想要的样式，这时候自定义 Tabs 会是一个更好的选择，可以根据自己想要而设置样式，如图： 一、ElementUi的Tabs样式链接：Tabs 标签页 | Element Plus 基础： 选…...

编程日记 2025/6/25 1:52:33

制作一款打飞机游戏23：编辑器ui

今天，我想重点介绍编辑器的实际用户界面（UI）。关于Excel的讨论很多人使用Excel来编辑他们程序的数据，因为大多数时候它都能很好地完成工作。Excel就像是一把瑞士军刀，可以修改各种数据。但是，在某些情况…...

编程日记 2025/6/24 10:24:31

课程9. 机器翻译，Seq2Seq与Attention

课程9. 机器翻译，Seq2Seq与Attention 机器翻译的任务. Seq2Seq 架构通过实战理解加载和预处理数据构建 Seq2Seq 模型编码器解码器Seq2Seq网络训练 Seq2Seq 架构问题注意力机制（Attention）注意选项Transformer 架构介绍——BERT 课程计划机器…...

编程日记 2025/6/3 19:43:18

ASP.NET MVC 入门指南二

9. 表单处理与提交 9.1 创建表单视图在视图文件夹下创建一个用于创建产品的视图，如 Create.cshtml： html model YourNamespace.Product{ViewBag.Title "创建产品"; }<h2>创建产品</h2>using (Html.BeginForm()) {Html.Anti…...

编程日记 2025/6/3 19:43:19

JavaWeb学习打卡-Day3-MyBatis相关

MyBatis 什么是MyBatis? MyBatis是一款优秀的持久层框架，用于简化JDBC的开发。MyBatis免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。 JDBC JDBC（Java DataBase Connectivity）：使用Java语言操作关系型数据库的…...

编程日记 2025/6/22 11:06:55

浅谈AI Agent 演进之路

1、了解下 AI Agent 的定义 AI Agent（人工智能代理）简单来说是一种能够感知环境、进行决策和执行动作的智能实体。与传统的人工智能相比，AI Agent 具备独立思考和调用工具逐步完成目标的能力。例如：当要求 AI Agent 帮助下单外…...

编程日记 2025/6/20 5:28:43

佳博票据和标签打印：Web网页端与打印机通信 | iOS

文章目录引言I Web网页端与打印机通信webSDK（包含示例页）打印测试II iOS与佳博打印机通信引言佳博工具下载ESC是票据打印指令，TSC是标签打印指令工业打印机：佳博GP-H430F工业机标签条码打印机物流快递电子面单条码机碳带机应用场景：打印商品价格标签、打印交易小票 I…...

编程日记 2025/6/24 22:45:14

Vue入门

目录:

0.导入

0.1什么是Vue

0.2为什么要学Vue?

0.3面试题：vue特点

0.4 Vue要学习什么

1.快速入门

2.Vue 常用指令

2.1 指令介绍

2.2 表单绑定

2.3 文本插值

2.4绑定属性

2.5 条件渲染

2.6 列表渲染

2.7 事件绑定

2.8 总结

扩充

面试题：mvc和mvvm的区别和应用场景

3. vue生命周期和钩子函数

3.1 什么是生命周期

3.2 什么是生命周期钩子

3.2 什么是生命周期钩子

相关文章：