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

2025.4.27 Vue.js 基础学习笔记

一、Vue.js 简介

Vue.js(简称 Vue)是一个用于构建用户界面的渐进式 JavaScript 框架。它具有以下特点:

  • 轻量级 :核心库体积小,性能优秀,不占用过多资源,加载速度快,适合各种规模的应用开发。

  • 易上手 :基于标准的 HTML、CSS 和 JavaScript 构建,对于有一定前端基础的开发者来说,学习成本较低,容易快速入门并应用到项目中。

  • 双向数据绑定 :通过数据双向绑定机制,使得视图和模型之间能够自动同步,当数据发生变化时,视图会自动更新,反之亦然,大大简化了数据与视图之间的交互开发流程。

  • 组件化架构 :支持将界面拆分成多个独立、可复用的组件,每个组件包含自己的模板、逻辑和样式,便于开发、维护和管理复杂的前端应用,提高代码的可复用性和可维护性。

二、Vue.js 环境搭建

1. 直接引入 Vue.js 文件

在 HTML 文件中,通过 CDN(内容分发网络)直接引入 Vue.js 库是最简单的方式,适合快速学习和小型项目。例如:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

这种方式无需安装额外的构建工具,但不适合大型项目或生产环境,因为它没有充分利用模块化和构建优化的优势。

2. 使用构建工具(如 Vue CLI)

Vue CLI 是一个官方提供的 Vue.js 项目脚手架工具,可以帮助快速搭建项目骨架,包含各种项目的配置和依赖管理。使用 Vue CLI 创建项目步骤如下:

  • 安装 Vue CLI:在终端输入 npm install -g @vue/cli 进行全局安装。

  • 创建项目:运行 vue create 项目名称,然后按照提示选择需要的配置选项,如 Vue 版本、预处理器(如 Sass、Less 等)、路由功能、状态管理(Vuex)等。

  • 进入项目目录并启动项目:使用 cd 项目名称 进入项目文件夹,然后执行 npm run serve 启动开发服务器,默认情况下会在本地 http://localhost:8080/ 地址打开项目。

使用构建工具可以更好地组织项目结构,进行代码分割、热重载、代码压缩等优化操作,适合中大型项目的开发需求。

三、Vue.js 基本概念

1. Vue 实例

Vue 应用程序是由 Vue 实例构成的,通过 new Vue() 创建。最基本的 Vue 实例代码结构如下:

var vm = new Vue({el: '#app',data: {message: 'Hello Vue!'}
});

其中:

  • el 选项:指定 Vue 实例挂载的 DOM 元素,通常是一个 CSS 选择器字符串,表示 Vue 将接管对应元素及其内部的所有 HTML 内容,进行数据绑定和编译处理。在上面的例子中,el 指向页面中带有 id="app" 的 HTML 元素。

  • data 选项:包含 Vue 实例所管理的数据对象,内部的数据属性可以在模板中使用双花括号语法进行绑定展示,如 {{ message }},当 data 中的数据发生变化时,视图会自动更新。

  • Vue 实例(vm):是整个 Vue 应用的核心对象,它管理着数据、视图以及各种生命周期和方法等,在开发过程中可以利用 vm 来访问和操作 Vue 应用的数据、方法和生命周期钩子等。

2. 模板语法

Vue.js 使用 HTML 模板语法来声明式地将数据渲染到 DOM 中,主要有以下两种方式:

  • 插值表达式(双花括号语法) :用于文本内容的动态绑定,如 {{ message }},它会将 data 中对应的 message 数据值插入到 HTML 元素的文本节点中。当 message 的值发生变化时,页面上的显示内容会自动更新。

  • 指令 :指令是带有 v- 前缀的特殊 HTML 属性,用于给 HTML 素添加动态行为,实现数据与视图之间的各种交互功能。常见的指令包括:

    • v-bind 指令:用于动态地绑定一个或多个属性到元素上,如绑定 idclassstyle 等属性。例如: <div v-bind:id="dynamicId"></div> 其中 dynamicId 是 Vue 实例 data 中的一个数据属性,其值会动态地绑定到 div 元素的 id 属性上。简写形式为 :,即 :id="dynamicId"

    • v-on 指令:用于监听 DOM 事件,如点击、鼠标悬停、键盘按键等事件,绑定对应的处理函数。例如: <button v-on:click="handleClick">点击我</button> 当点击该按钮时,会触发 Vue 实例中的 handleClick 方法。简写形式为 @,即 @click="handleClick"

3. 计算属性和侦听器

  • 计算属性 :通过定义计算属性,可以根据 Vue 实例中的一个或多个数据属性动态地计算出一个新的值,并且这个计算属性是响应式的。当依赖的数据发生变化时,计算属性会自动重新计算并更新视图。计算属性通过在 Vue 实例的 computed 选项中定义方法来实现,例如:

var vm = new Vue({el: '#app',data: {firstName: 'John',lastName: 'Doe'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName;}}
});

在模板中可以通过 {{ fullName }} 来显示计算后的完整姓名,当 firstNamelastName 发生变化时,fullName 会自动更新。

  • 侦听器 :如果需要在数据发生变化时执行一些自定义的逻辑,而不是仅仅计算出一个新值,可以使用侦听器。通过在 Vue 实例的 watch 选项中定义对应的侦听函数,可以监听指定数据属性的变化,并执行相应的回调处理函数。例如:

var vm = new Vue({el: '#app',data: {count: 0},watch: {count: function (newValue, oldValue) {console.log('count 从 ' + oldValue + ' 变为 ' + newValue);// 在这里可以添加 count 改变后的处理逻辑}}
});

count 的值发生变化时,控制台会输出变化前后的值,并可以执行其他相关的操作。

4. 条件渲染和列表渲染

  • 条件渲染 :使用 v-ifv-else-ifv-else 指令可以根据条件来动态地渲染 HTML 元素。例如:

<div v-if="isLoggedIn">用户已登录
</div>
<div v-else>用户未登录
</div>

isLoggedIn 是 Vue 实例 data 中的一个布尔值数据属性,根据其值的真假来决定显示对应的登录状态提示信息。

  • 列表渲染 :通过 v-for 指令可以基于一个数组或对象来渲染列表元素。例如,渲染一个数组:

var vm = new Vue({el: '#app',data: {items: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }]}
});

<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-for 指令会根据 items 数组中的每个元素生成一个 <li> 元素,并显示对应的 name 属性值。其中的 :key 属性用于为每个列表项提供一个唯一的标识,有助于 Vue 更高效地进行渲染和更新操作。

5. 表单输入绑定

Vue.js 提供了 v-model 指令用于实现表单输入和 Vue 实例数据之间的双向数据绑定。当用户在表单元素(如输入框、复选框、单选按钮、下拉选择框等)中输入数据时,绑定的数据属性会自动更新,同时视图中其他与该数据绑定的地方也会相应地进行更新。例如:

<input v-model="message" placeholder="输入内容">
<p>输入的内容是:{{ message }}</p>

当在输入框中输入文本时,message 数据属性的值会实时更新,同时下方的段落元素也会动态显示输入的内容。

四、Vue.js 组件

组件是 Vue.js 的核心概念之一,它使得我们可以将复杂的用户界面拆分成一个个独立、可复用的模块,每个模块专注于实现特定的功能。

1. 组件的注册和使用

  • 全局注册 :使用 Vue.component() 方法全局注册一个组件,这样在应用中的任何地方都可以使用这个组件。例如:

Vue.component('my-component', {template: '<div>这是一个全局组件</div>'
});

然后在 Vue 实例的模板中可以使用 <my-component></my-component> 来渲染该组件。

  • 局部注册 :如果只想在某个特定的 Vue 实例中使用某个组件,可以在 Vue 实例的 components 选项中进行局部注册。例如:

var vm = new Vue({el: '#app',components: {'local-component': {template: '<div>这是一个局部组件</div>'}}
});

在对应的 Vue 实例模板中可以使用 <local-component></local-component> 来渲染这个局部组件。

2. 组件的 props 和自定义事件

  • Props :是父组件向子组件传递数据的一种方式,子组件通过定义 props 选项来接收来自父组件的数据。例如:

Vue.component('child-component', {props: ['parentData'],template: '<div>子组件接收到的数据:{{ parentData }}</div>'
});

在父组件中使用该子组件时,可以通过绑定属性的方式将数据传递给子组件:

<child-component :parent-data="parentMessage"></child-component>

其中 parentMessage 是父组件中的一个数据属性,通过 v-bind 指令(简写为 :)将其绑定到子组件的 parent-data prop 上,子组件就可以接收到这个数据并在模板中使用。

  • 自定义事件 :子组件可以通过 $emit() 方法向父组件发送自定义事件,父组件可以监听这些事件并执行相应的处理函数。例如:

Vue.component('child-component', {props: ['parentData'],template: '<button @click="sendMessage">发送消息到父组件</button>',methods: {sendMessage: function () {this.$emit('child-event', this.parentData);}}
});

在父组件中使用该子组件并监听自定义事件:

<child-component :parent-data="parentMessage" @child-event="handleChildEvent"></child-component>

methods: {handleChildEvent: function (dataFromChild) {console.log('父组件接收到子组件发送的数据:', dataFromChild);// 在这里可以添加父组件接收到事件后的处理逻辑}
}

当子组件中的按钮被点击时,会触发 sendMessage 方法,该方法通过 $emit 发送一个名为 child-event 的事件,并将 parentData 作为事件参数传递给父组件。父组件通过 @child-event 监听该事件,并在 handleChildEvent 方法中处理接收到的数据。

五、Vue.js 生命周期

Vue 实例从创建到销毁的过程称为生命周期,在这个过程中有不同的生命周期钩子函数,它们允许我们在特定的时刻执行自定义的逻辑,如进行数据初始化、DOM 操作、清理资源等。主要的生命周期钩子包括:

  • beforeCreate :在实例初始化之后、数据观测和 DOM 编译之前调用。此时实例的挂载元素 eldata 都还没有进行初始化,无法访问到数据和 DOM。

  • created :实例创建完成后被调用,此时数据观测和事件系统已经初始化完成,可以访问到实例中的数据和方法,但挂载元素 el 还没有被编译,DOM 尚未生成,因此不能进行 DOM 操作。

  • beforeMount :在挂载开始之前被调用,相关的编译模板已经完成,此时挂载元素 el 已经被编译为虚拟 DOM,但还未渲染到页面上,还不能进行 DOM 查询等操作。

  • mounted :当 Vue 实例挂载到 DOM 后被调用,此时实例已经完成了编译和挂载,可以访问到最终的 DOM 元素,通常在这里进行 DOM 操作、与外部库的交互或者发送 API 请求获取初始数据等操作。

  • beforeUpdate :当数据发生变化,Vue 实例准备更新 DOM 时被调用,此时数据已经更新,但 DOM 还没有更新,可以在这个钩子中进行一些数据更新前的操作,比如取消未完成的异步请求等。

  • updated :在 DOM 更新完成后被调用,此时数据和 DOM 都已经更新完毕,可以在这里进行一些依赖最新 DOM 状态的操作,但要小心不要在这个钩子中触发新的更新,否则会导致无限循环。

  • beforeDestroy :在 Vue 实例销毁之前被调用,此时实例仍然完全可用,可以在这里进行一些资源的清理工作,如取消定时器、事件监听器等。

  • destroyed :在 Vue 实例销毁后被调用,此时所有的指令、事件监听器、子实例等都已经被解绑和销毁,实例不能再被使用。

在实际开发中,合理利用这些生命周期钩子可以在正确的时机执行合适的操作,确保应用的高效运行和正常工作。

相关文章:

2025.4.27 Vue.js 基础学习笔记

一、Vue.js 简介 Vue.js&#xff08;简称 Vue&#xff09;是一个用于构建用户界面的渐进式 JavaScript 框架。它具有以下特点&#xff1a; 轻量级 &#xff1a;核心库体积小&#xff0c;性能优秀&#xff0c;不占用过多资源&#xff0c;加载速度快&#xff0c;适合各种规模的应…...

基于用户场景的汽车行驶工况构建:数据驱动下的能耗优化革命

行业现状&#xff1a;标准工况与用户场景的割裂 全球汽车行业普遍采用WLTC工况进行能耗测试&#xff0c;但其与真实道路场景差异显著。据研究&#xff0c;WLTC工况下车辆能耗数据比实际道路低10%-30%&#xff0c;导致用户对续航虚标投诉激增&#xff08;数据来源&#xff1a;东…...

IoTDB集群部署中的网络、存储与负载配置优化

一、引言 在现代计算机系统和应用程序中&#xff0c;网络I/O性能是决定整体系统表现的关键因素之一。特别是在IoTDB集群环境中&#xff0c;网络I/O的重要性尤为突出&#xff0c;特别是在处理大量测点数据、客户端请求以及集群内部通信时。本文将介绍IoTDB数据库集群部署过程中…...

Unity URPShader:实现和PS一样的色相/饱和度调整参数效果(修复)

目录 前言&#xff1a; 一、问题原因 二、算法修复 三、全代码 前言&#xff1a; 在之前的文章我已经实现了标题所述的内容功能&#xff1a;Unity URPShader&#xff1a;实现和PS一样的色相/饱和度调整参数效果-CSDN博客 但在偶然测试的时候&#xff0c;发现当采样的图片为…...

告别手动时代!物联网软件开发让万物自动互联

清晨&#xff0c;智能窗帘随着阳光自动拉开&#xff1b;运动时&#xff0c;手表精准记录着健康数据&#xff1b;回到家&#xff0c;室温早已调节至最舒适状态...这些场景的实现&#xff0c;都离不开物联网软件开发的技术支撑。在智能家居软件开发、智能穿戴软件开发、医疗器械软…...

Vue ui初始化项目并使用iview写一个菜单导航

winR 输入命令 vue ui浏览器会自动打开http://localhost:8000/ 找到创建 image.png 选择一个目录创建vue项目 image.png 点击再此创建新项目 image.png 我一般都是再已经有git仓库的目录进行项目创建&#xff0c;所以这个勾去掉 点击下一步 image.png 这里可以选择默认&#x…...

函数调用及Chain——SQL+GLM

Langchainchain数据库操作_langchain 操作数据库-CSDN博客 本文和基于上述链接 进一步。 初始化数据库&模型 # temperature0&#xff0c;此处仅需要SQL语句&#xff0c;不需要多样化返回。 from langchain.chains.sql_database.query import create_sql_query_chain from …...

数据科学与计算

Seaborn的介绍 Seaborn 是一个建立在 Matplotlib 基础之上的 Python 数据可视化库&#xff0c;专注于绘制各种统计图形&#xff0c;以便更轻松地呈现和理解数据。 Seaborn 的设计目标是简化统计数据可视化的过程&#xff0c;提供高级接口和美观的默认主题&#xff0c;使得用户…...

【AI提示词】二八法则专家

提示说明 精通二八法则&#xff08;帕累托法则&#xff09;的广泛应用&#xff0c;擅长将其应用于商业、管理、个人发展等领域&#xff0c;深入理解其在不同场景中的具体表现和实际意义。 提示词 # Role: 二八法则专家## Profile - language: 中文 - description: 精通二八法…...

PostgreSQL Patroni集群组件作用介绍:Patroni、etcd、HAProxy、Keepalived、Watchdog

1. Watchdog 简介 1.1 核心作用 • 主节点故障检测 Watchdog 会定时检测数据库主节点&#xff08;或 Pgpool 主节点&#xff09;的运行状态。 一旦主节点宕机&#xff0c;它会发起故障切换请求。 • 协调主备切换 多个 Pgpool 节点时&#xff0c;Watchdog 保证只有一个 Pg…...

【计算机视觉】图像分割:Segment Anything (SAM):通用图像分割的范式革命

Segment Anything&#xff1a;通用图像分割的范式革命 技术突破与架构创新核心设计理念关键技术组件 环境配置与快速开始硬件要求安装步骤基础使用示例 深度功能解析1. 多模态提示融合2. 全图分割生成3. 高分辨率处理 模型微调与定制1. 自定义数据集准备2. 微调训练配置 常见问…...

改进系列(10):基于SwinTransformer+CBAM+多尺度特征融合+FocalLoss改进:自动驾驶地面路况识别

目录 1.代码介绍 1. 主训练脚本train.py 2. 工具函数与模型定义utils.py 3. GUI界面应用infer_QT.py 2.自动驾驶地面路况识别 3.训练过程 4.推理 5.下载 代码已经封装好&#xff0c;对小白友好。 想要更换数据集&#xff0c;参考readme文件摆放好数据集即可&#xff0c…...

大型连锁酒店集团数据湖应用示例

目录 一、应用前面临的严峻背景 二、数据湖的精细化构建过程 &#xff08;一&#xff09;全域数据整合规划 &#xff08;二&#xff09;高效的数据摄取与存储架构搭建 &#xff08;三&#xff09;完善的元数据管理体系建设 &#xff08;四&#xff09;强大的数据分析平台…...

element.scrollIntoView(options)

handleNextClick 函数详解 功能描述 该函数实现在一个表格中“跳转到下一行”的功能&#xff0c;并将目标行滚动至视图顶部。通常用于导航或高亮显示当前选中的数据行。 const handleNextClick () > {// 如果当前已经是最后一行&#xff0c;则不执行后续操作if (current…...

python查看指定的进程是否存在

import os class Paly_Install(object):"""项目根目录"""def get_path(self):self.basedir os.path.dirname(os.path.abspath(__file__))"""安装失败的txt文件"""def test_app(self):self.app["com.faceboo…...

HAproxy+keepalived+tomcat部署高可用负载均衡实践

目录 一、前言 二、服务器规划 三、部署 1、jdk18安装 2、tomcat安装 3、haproxy安装 4、keepalived安装 三、测试 1、服务器停机测试 2、停止haproxy服务测试 总结 一、前言 HAProxy是一个使用C语言编写的自由及开放源代码软件&#xff0c;其提供高可用性、…...

C++负载均衡远程调用学习之自定义内存池管理

目录 1.内存管理_io_buf的结构分析 2.Lars_内存管理_io_buf内存块的实现 3.buf总结 4.buf_pool连接池的单例模式设计和基本属性 5.buf_pool的初始化构造内存池 6.buf_pool的申请内存和重置内存实现 7.课前回顾 1.内存管理_io_buf的结构分析 ## 3) Lars系统总体架构 ​ …...

mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz的下载安装和使用

资源获取链接&#xff1a; mysql-5.7.24-linux-glibc2.12-x86-64.tar.gz和使用说明资源-CSDN文库 详细作用 数据库服务器的核心文件&#xff1a; 这是一个压缩包&#xff0c;解压后包含 MySQL 数据库服务器的可执行文件、库文件、配置文件模板等。 它用于在 Linux 系统上安装…...

Kafka Producer的acks参数对消息可靠性有何影响?

1. acks0 可靠性最低生产者发送消息后不等待任何Broker确认可能丢失消息&#xff08;Broker处理失败/网络丢失时无法感知&#xff09;吞吐量最高&#xff0c;适用于允许数据丢失的场景&#xff08;如日志收集&#xff09; 2. acks1 (默认值) Leader副本确认模式生产者等待Le…...

Linux-04-用户管理命令

一、useradd添加新用户: 基本语法: useradd 用户名:添加新用户 useradd -g 组名 用户:添加新用户到某个组二、passwd设置用户密码: 基本语法: passwd 用户名:设置用户名密码 三、id查看用户是否存在: 基本语法: id 用户名 四、su切换用户: 基本语法: su 用户名称:切换用…...

node爬虫包 pup-crawler,超简单易用

PUP Crawler 这是一个基于puppeteer的简单的爬虫&#xff0c;可以爬取动态、静态加载的网站。 常用于【列表-详情-内容】系列的网站&#xff0c;比如电影视频等网站。 github地址 Usage npm install pup-crawler简单用法&#xff1a; import { PupCrawler } from pup-craw…...

艺术与科技的双向奔赴——高一鑫荣获加州联合表彰

2025年4月20日,在由M.A.D公司协办的“智艺相融,共赴价值巅峰”(Academic and Artistic Fusion Tribute to the Summit of Value)主题发布会上,音乐教育与科技融合领域的代表人物高一鑫,因其在数字音乐教育与中美文化交流方面的杰出贡献,荣获了圣盖博市议员Jorge Herrera和尔湾市…...

React-Native Android 多行被截断

1. 问题描述&#xff1a; 如图所示&#xff1a; 2. 问题解决灵感&#xff1a; 使用相同的react-native代码&#xff0c;运行在两个APP&#xff08;demo 和 project&#xff09;上。demo 展示正常&#xff0c;project 展示不正常。 对两个页面截图&#xff0c;对比如下。 得出…...

Canvas基础篇:图形绘制

Canvas基础篇&#xff1a;图形绘制 图形绘制moveTo()lineTo()lineTo绘制一条直线代码示例效果预览 lineTo绘制平行线代码示例效果预览 lineTo绘制矩形代码示例效果预览 arc()arc绘制一个圆代码实现效果预览 arc绘制一段弧代码实现效果预览 arcTo()rect()曲线 结语 图形绘制 在…...

自定义实现elementui的锚点

背景 前不久有个需求&#xff0c;上半部分是el-step步骤条&#xff0c;下半部分是一些文字说明&#xff0c;需要实现点击步骤条中某个步骤自定义定位到对应部分的文字说明&#xff0c;同时滚动内容区域的时候还要自动选中对应区域的步骤。element-ui-plus的有锚点这个组件&…...

基于UNet算法的农业遥感图像语义分割——补充版

前言 本案例希望建立一个UNET网络模型&#xff0c;来实现对农业遥感图像语义分割的任务。本篇博客主要包括对上一篇博客中的相关遗留问题进行解决&#xff0c;并对网络结构进行优化调整以适应个人的硬件设施——NVIDIA GeForce RTX 3050。 本案例的前两篇博客直达链接基于UNe…...

分布式数字身份:迈向Web3.0世界的通行证 | 北京行活动预告

数字经济浪潮奔涌向前&#xff0c;Web3.0发展方兴未艾&#xff0c;分布式数字身份&#xff08;Decentralized Identity&#xff0c;简称DID&#xff09;通过将分布式账本技术与身份治理相融合&#xff0c;在Web3.0时代多方协作的分布式应用场景中发挥核心作用&#xff0c;是构建…...

CentOS网络之network和NetworkManager深度解析

文章目录 CentOS网络之network和NetworkManager深度解析1. CentOS网络服务发展历史1.1 传统network阶段&#xff08;CentOS 5-6&#xff09;1.2 过渡期&#xff08;CentOS 7&#xff09;1.3 新时代&#xff08;CentOS 8&#xff09; 2. network和NetworkManager的核心区别3. ne…...

【XR】MR芯片 和 VR芯片之争

【XR】MR芯片 和 VR芯片之争 1. MR芯片 和 VR芯片 之间的最大差异是什么2. MR芯片 和 VR芯片 之间的最大差异是什么,国内外市场上有哪些芯片,价格如何,市场怎么样,芯片价格怎么样1. MR芯片 和 VR芯片 之间的最大差异是什么 MR芯片(混合现实芯片)与VR芯片(虚拟现实芯片)…...

关于安卓自动化打包docker+jenkins实现

背景 安卓开发过程中&#xff0c;尤其是提测后&#xff0c;会有一个发包的流程。这个流程简单来说&#xff0c;一般都是开发打包&#xff0c;然后发群里&#xff0c;测试再下载&#xff0c;发送到分发平台&#xff0c;然后把分发平台的应用主页发出来&#xff0c;最后群里面的…...

如何使用CAN分析仪验证MCU CAN错误机制

本文通过实验验证CAN控制器的错误处理机制是否符合相关标准。具体而言&#xff0c;我们使用ZPS-CANFD设备&#xff08;ZPS-CANFD介绍&#xff09;作为测量工具&#xff0c;USBCANFD-200U作为被测设备&#xff08;DUT&#xff09;&#xff0c;通过注入特定类型的错误&#xff0c…...

Centos 7安装 NVIDIA CUDA Toolkit

下载 # 查看操作系统信息 uname -m && cat /etc/redhat-release # 查看显卡信息 lspci | grep -i nvidia从NVIDIA CUDA Toolkit官网下载符合你需求的版本&#xff0c;我这里选择的是runfile(local)的方式。 安装 现在完成后进行安装 chmod x cuda_12.4.0_550.54.1…...

软件测试52讲学习分享:深入理解单元测试

课程背景 最近我在学习极客时间的《软件测试52讲》课程&#xff0c;这是由腾讯TEG基础架构部T4级专家茹炳晟老师主讲的认证课程。作为数字化转型与人工智能(DTAI)产业人才基地建设中心的认证课程&#xff0c;内容非常专业实用。今天想和大家分享第3讲"什么是单元测试&…...

90.如何将Maui应用安装到手机(最简) C#例子 Maui例子

今天我来分享一下如何将Maui应用安装到手机上进行测试。 首先&#xff0c;创建一个新的Maui应用项目。 点击运行 在Visual Studio中&#xff0c;点击“运行”按钮&#xff0c;预览应用的初始效果&#xff0c;确保一切正常。 连接设备 使用数据线将手机连接到电脑。确保手机已…...

“100% 成功的 PyTorch CUDA GPU 支持” 安装攻略

#工作记录 一、总述 在深度学习领域&#xff0c;PyTorch 凭借其灵活性和强大的功能&#xff0c;成为了众多开发者和研究者的首选框架。而 CUDA GPU 支持能够显著加速 PyTorch 的计算过程&#xff0c;大幅提升训练和推理效率。然而&#xff0c;安装带有 CUDA GPU 支持的 PyTor…...

如何在Dify沙盒中安装运行pandas、numpy

如何在Dify沙盒中安装运行pandas、numpy 1. 创建python-requirements.txt文件2. 创建config.yaml文件3. 重启 docker-sandbox-14. 为什么要这样改的一些代码解析&#xff08;Youtube视频截图&#xff09; 1. 创建python-requirements.txt文件 在 Dify 的 Docker 目录下面&…...

ES集群搭建及工具类

文章说明 本文主要记录Windows下搭建ES集群的过程&#xff0c;并提供了一个通用的ES工具类&#xff1b;工具类采用http接口调用es功能&#xff0c;目前仅提供了简单的查询功能&#xff0c;可在基础上额外扩展 集群搭建 ES的下载安装非常简单&#xff0c;只需要下载软件的 zip 压…...

抓取工具Charles配置教程(mac电脑+ios手机)

mac电脑上的配置 1. 下载最新版本的Charles 2. 按照以下截图进行配置 2.1 端口号配置&#xff1a; 2.2 https配置 3. mac端证书配置 4. IOS手机端网络配置 4.1 先查看电脑上的配置 4.2 配置手机网络 连接和电脑同一个wifi&#xff0c;然后按照以下截图进行配置 5. 手机端证书…...

JavaScript 代码搜索框

1. 概述与需求分析 功能&#xff1a;在网页中实时搜索用户代码、关键字&#xff1b;展示匹配行、文件名&#xff1b;支持高亮、正则、模糊匹配。非功能&#xff1a;大文件集&#xff08;几十万行&#xff09;、高并发、响应 <100ms&#xff1b;支持增量索引和热更新。 2. …...

ESP32开发-作为TCP服务端接收数据

​​ESP32 ENC28J60 仅作为TCP服务端​​ &#xff08;电脑通过 ​​网络调试助手​​ 连接ESP32&#xff0c;实现双向通信&#xff09; ​​完整代码​​ #include <SPI.h> #include <EthernetENC.h> // 或 UIPEthernet.h// 网络配置 byte mac[] {0xDE, 0xAD…...

数智化招标采购系统针对供应商管理解决方案(采购如何管控供应商)

随着《优化营商环境条例》深化实施&#xff0c;采购领域正通过政策驱动和技术赋能&#xff0c;全面构建供应商全生命周期管理体系&#xff0c;以规范化、数智化推动采购生态向透明、高效、智能方向持续升级。 郑州信源数智化招标采购系统研发商&#xff0c;通过供应商管理子系…...

服务端字符过滤 与 SQL PDO防注入

注入示例 # step 1 SQL SELECT * FROM users WHERE username admin AND password e10adc3949ba59abbe56e057f20f883e # step 2 SQL SELECT * FROM users WHERE username admin# AND password 96e79218965eb72c92a549dd5a330112 关键点是这2个SQL的区别.其中第二步由于前台传…...

章越科技赋能消防训练体征监测与安全保障,从传统模式到智能跃迁的实践探索

引言&#xff1a;智能化转型浪潮下&#xff0c;消防训练的“破局”之需 2021年《“十四五”国家消防工作规划》的出台&#xff0c;标志着我国消防救援体系正式迈入“全灾种、大应急”的全新阶段。面对地震、洪涝、危化品泄漏等复杂救援场景&#xff0c;消防员不仅需要更强的体…...

RSYSLOG收集深信服log

RSYSLOG收集深信服ATRUST日志配置一直不成功&#xff0c;没有生成log文件&#xff0c;网上搜索到&#xff1a;如果你想要接收所有来自特定 IP 的日志&#xff0c;可以使用更通用的模式&#xff1a; 参考着修改配置 if $fromhost-ip 172.18.1.13 then /data/logs/network-devi…...

Golang - 实现文件管理服务器

先看效果&#xff1a; 代码如下&#xff1a; package mainimport ("fmt""html/template""log""net/http""os""path/filepath""strings" )// 配置根目录&#xff08;根据需求修改&#xff09; //var ba…...

在原生代码(非webpack)里使用iview的注意事项

最近公司在做一个项目&#xff0c;使用的框架是iview,使用过程中同事遇到一些问题&#xff0c;这些问题对于有些同学来说根本就不是问题&#xff0c;但总会有同学需要&#xff0c;为了帮助不太会用的同学快速找到问题&#xff0c;做了如下整理&#xff1a; 下载vue,iview.min.j…...

基于go的简单管理系统(增删改查)

package mainimport ("database/sql""fmt"_ "github.com/go-sql-driver/mysql" )var db *sql.DBtype user struct {id intname stringage int }// 建立连接 func initDB() (err error) {dsn : "root:123456tcp(127.0.0.1:3306)/mysqltes…...

Python 用一等函数重新审视“命令”设计模式

引言 在软件开发中&#xff0c;设计模式是解决常见问题的有效方法。“命令”设计模式旨在解耦调用操作的对象&#xff08;调用者&#xff09;和提供实现的对象&#xff08;接收者&#xff09;。本文将深入探讨“命令”模式&#xff0c;并介绍如何使用一等函数对其进行简化。 …...

pycharm导入同目录下文件未标红但报错ModuleNotFoundError

此贴仅为记录debug过程&#xff0c;为防后续再次遇见 问题 问题情境 复现文章模型&#xff0c;pycharm项目初次运行 问题描述 在导入同目录下其它文件夹中的python文件时&#xff0c;未标红&#xff0c;但运行时报错ModuleNotFoundError 报错信息 未找到该模块 Traceback …...

BOSS的收入 - 华为OD机试(A卷,Java题解)

华为OD机试题库《C》限时优惠 9.9 华为OD机试题库《Python》限时优惠 9.9 华为OD机试题库《JavaScript》限时优惠 9.9 代码不懂有疑问欢迎留言或私我们的VX&#xff1a;code5bug。 题目描述 一个 XX 产品行销总公司&#xff0c;只有一个 boss&#xff0c;其有若干一级分销&…...