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

个人vue3-学习笔记

news 来源：原创 2025/6/16 17:30:32

声明：这只是我个人的学习笔记（黑马），供以后复习用。一天学一点，随时学随时更新。明天会更好的！

这里只给代码，不给运行结果，看不出来代码的作用我也该进厂了。。。。。

Day1 使用create-vue创建项目。

1.检查版本。

node -v

2.创建项目

npm init vue@latest

可以用这个切回国内镜像源

npm config set registry https://registry.npmmirror.com

3. 安装依赖，启动项目

npm install
npm run dev

4.1写法

原始复杂写法setup写法：必须return

<!-- 开关：写组合式组件 -->
<script>
export default {setup() {console.log('setup')const message = 'hello world'const logMessage = () => {console.log(message)}return {//只有return返回一个对象，对象中的属性和方法，都可以在模板中使用message,logMessage,}},beforeCreate() {console.log('beforeCreate')},
}
</script><template><!-- 不再要求唯一的根元素 --><div>{{ message }}<button @click="logMessage">log</button></div>
</template><style scoped></style>

简单的语法糖写法

<script setup>
const message = 'hello world'
const logMessage = () => {console.log(message)
}
</script>
<template><!-- 不再要求唯一的根元素 --><div>{{ message }}<button @click="logMessage">log</button></div>
</template><style scoped></style>

注：1.setup选项在beforeCreate钩子之前自动执行

2.setup中的this不指向组件实例了,指向undefined

4.2 函数调用返回响应式数据

reactive()接受对象类型数据的参数传入并返回一个响应式的对象

<script setup>
// 1.导入函数
import { reactive } from 'vue'
//  2.执行函数 传入一个对象类型的函数 变量接受
const state = reactive({count: 0
})
const setCount = () => {state.count++
}
</script>
<template><!-- 不再要求唯一的根元素 --><div><button @click='setCount'>{{ state.count }}</button></div>
</template><style scoped></style>

ref()接受简单类型或对象类型数据的参数传入并返回一个响应式的对象

脚本区域修改ref的响应式数据必须通过value属性

<script setup>
// // 1.导入函数
// import { reactive } from 'vue'
// //  2.执行函数 传入一个对象类型的函数 变量接受
// const state = reactive({
//   count: 0
// })
// const setCount = () => {
//   state.count++
// }//1.导入ref 函数
import { ref } from 'vue'
//2.执行函数 传入一个简单类型或者对象类型的参数 变量接受
const count = ref(0)
console.log(count)const setCount = () => {//脚本区域修改ref的响应式数据 必须通过value属性count.value++
}
</script>
<template><!-- 不再要求唯一的根元素 --><div><button @click='setCount'>{{ count }}</button></div>
</template><style scoped></style>

4.3计算属性函数

computed 返回计算后的数据（不应该有副作用）

<script setup>
// 1.导入computed
import { computed } from 'vue'
import { ref } from 'vue'
const list = ref([1, 2, 3, 4, 5, 6, 7, 8])// 2.使用computed return计算后的值 变量接受
const computedList = computed(() => {return list.value.filter(item => item > 2)
})setTimeout(() => {list.value.push(9, 10)
}, 3000);
</script>
<template><!-- 不再要求唯一的根元素 --><div>原始响应式数据-{{ list }}</div><div>计算后的响应式数据-{{ computedList }}</div>
</template><style scoped></style>

4.4watch函数

侦听一个或多个数据的变化，数据变化时执行回调函数（参数：immediate(立即执行)，deep(深度侦听)）

<script setup>
// import {ref,watch} from 'vue'
// const count = ref(0)
// const setCount = () => {
//   count.value++
// }
// //调用watch方法，监听count的变化
// //watch 里面ref对象不需要加.value属性
// watch(count, (newValue, oldValue) => {
//   console.log(`count发生了变化，老值是${oldValue}，新值是${newValue}`);
// })import { ref, watch } from 'vue'
const count = ref(0)
const changeCount = () => {count.value++
}
const name = ref('cp')
const changeName = () => {name.value = 'pc'
}watch([count,name], ([newValue,newName], [oldValue,oldName]) => {console.log(`count或者name发生了变化，老值是${[oldValue,oldName]}，新值是${[newValue,newName]}`);
})
</script>
<template><!-- 不再要求唯

个人vue3-学习笔记

声明：这只是我个人的学习笔记（黑马），供以后复习用。一天学一点，随时学随时更新。明天会更好的！这里只给代码，不给运行结果，看不出来代码的作用我也该进厂了。。。。。 Day1 使用create-vue创建项目。 1.检查版本。 node -v 2.创建项目 npm init vue@latest 可…...

编程日记 2025/6/1 17:01:50

Ubuntu安装搜狗输入法

Ubuntu安装搜狗输入法官网完整安装步骤调整默认输入法官网搜狗输入法 - 官网：https://shurufa.sogou.com/ 搜狗输入法Linux版 - 首页：https://shurufa.sogou.com/linux 搜狗输入法Linux版 - 安装指南：https://shurufa.sogou.com/linux/gu…...

编程日记 2025/6/2 7:18:46

leetcode链接https://leetcode.cn/problems/reverse-linked-list/description/https://leetcode.cn/problems/reverse-linked-list/description/https://leetcode.cn/problems/reverse-linked-list/description/https://leetcode.cn/problems/reverse-linked-list/description/…...

编程日记 2025/6/2 7:17:51

1.7 ChatGPT：引领AI对话革命的致胜之道

ChatGPT：引领AI对话革命的致胜之道随着人工智能（AI）技术的迅猛发展，特别是在自然语言处理（NLP）领域，OpenAI 的 ChatGPT 已经成为了举世瞩目的技术突破。从普通的自动化客服到深入的创作与协作，ChatGPT 通过其卓越的语言理解和生成能力，改变了人们与计算机交互的方式…...

编程日记 2025/5/30 5:13:19

当设置dialog中有el-table时，并设置el-table区域的滚动，看到el-table中多了一条横线

问题：当设置dialog中有el-table时，并设置el-table区域的滚动，看到el-table中多了一条横线； 原因：el-table有一个before的伪元素作为表格的下边框下，初始的时候已设置，在滚动的时候并没有重新设置…...

编程日记 2025/6/4 0:09:01

如何使用 useMemo 和 memo 优化 React 应用性能？

使用 useMemo 和 memo 优化 React 应用性能在构建复杂的 React 应用时，性能优化是确保应用流畅运行的关键。React 提供了多种工具来帮助开发者优化组件的渲染和计算逻辑，其中 useMemo 和 memo 是两个非常有用的 Hook。本文将详细介绍这两个工具的使用方…...

编程日记 2025/6/2 23:41:24

turtle教学课程课堂学习考试在线网站

完整源码项目包获取→点击文章末尾名片！...

编程日记 2025/5/29 10:21:19

spark任务优化参数整理

以下参数中有sql字眼的一般只有spark-sql模块生效，如果你看过spark的源码，你会发现sql模块是在core模块上硬生生干了一层，所以反过来spark-sql可以复用core模块的配置，例外的时候会另行说明，此外由于总结这些参数是在不…...

编程日记 2025/6/4 11:47:47

TCP TIME-WAIT 状态为什么要坚持 2MSL

经常有人问这个问题，这种问题问我就对了。我准备了下面的一幅时序图来解释这个问题： 简单点说就是两个目的： 正常处理被动关闭方的重传 FIN；确保当前连接的所有报文全部消失。也就是说，无论任何情况下，…...

编程日记 2025/6/2 7:17:17

如何在Ubuntu上安装Cmake

前言本文主要阐述如何在Ubuntu22.04上面安装cmake，具体可看下面的操作。正文一、环境 Ubuntu22.04 cmake-3.31.4.tar.gz 二、步骤参考这个方案： 【运维】Ubuntu如何安装最新版本的Cmake，编译安装Cmake，直接命令安装…...

编程日记 2025/5/30 5:01:58

1.17学习

crypto nssctf-[SWPUCTF 2021 新生赛]crypto8 不太认识这是什么编码，搜索一下发现是一个UUENCODE编码，用在线工具UUENCODE解码计算器—LZL在线工具解码就好 misc buuctf-文件中的秘密下载附件打开后发现是一个图片，应该是一个图片隐写&…...

编程日记 2025/5/30 20:43:47

力扣搜索二维矩阵

二分查找，闭区间与开区间的不同解法。题目乍一看，不是遍历一下找到元素就可以了。 class Solution {public boolean searchMatrix(int[][] matrix, int target) {for (int[] ints : matrix) {for (int ans : ints) {if (ans target) return true;}}…...

编程日记 2025/6/4 15:42:46

RabbitMQ基础篇

文章目录 1 RabbitMQ概述1.1 消息队列1.2 RabbitMQ体系结构 2 RabbitMQ工作模式2.1 简单模式（Simple Queue）2.2 工作队列模式（Work Queues）2.3 发布/订阅模式（Publish/Subscribe）2.4 路由模式（R…...

编程日记 2025/6/1 20:25:10

【springboot】Spring 官方抛弃了 Java 8！新idea如何创建java8项目

解决idea至少创建jdk17项目问题 idea现在只能创建最少jdk17，不能创建java8了吗?解决问题 idea现在只能创建最少jdk17，不能创建java8了吗我本来以为是 IDEA 版本更新导致的 Bug，开始还没在意。直到我今天自己初始化项目时才发现&am…...

编程日记 2025/5/27 17:22:36

[BrainShadow-V1] VR头戴设备统计报告

Brain-Shadow-V1 EventVR headsetsReported byXiao enDate2025/01/15Version1.0 HTC Vive Pro 2 Pro HTC Vive Pro 2 是一款高端虚拟现实头显，配备双 2.5K 显示屏，组合分辨率达到 48962448，提供 120 的视场角和 120Hz 的刷新率。该设备支持…...

编程日记 2025/5/30 2:29:11

RK3568 Android11 锁屏界面屏蔽下拉状态栏

参考文章： Android R锁屏界面屏蔽下拉状态栏_pulseexpansionhandler-CSDN博客前提增加状态栏控制显隐属性，以下面文章为前提补充功能 RK3568 Android11 状态栏和导航栏增加显示控制功能-CSDN博客修改文件位置： frameworks/base/package…...

编程日记 2025/6/3 22:25:51

53，【3】BUUCTF WEB october 2019 Twice SQLinjection

题目得到信息，2次注入，进入靶场登录页面，很自然想到SQL 第一次注入应该是这个可以登录，注册，提交简介的页面第二次注入应该是在info处注入，信息显示在简介处我真的纯脑子有病，人家二次注入不…...

编程日记 2025/6/2 4:29:02

利用硬盘虚拟内存解决华为手机模拟器运行内存不足问题

在进行鸿蒙开发时，华为手机模拟器是必不可少的工具。然而，对于只有 8GB 物理内存的电脑来说，运行模拟器可能会遇到 "系统内存不足" 的提示，导致模拟器无法正常启动。这时，我们可以通过硬盘虚拟出额外的内存来…...

编程日记 2025/6/3 20:41:11

探秘Shortest与Stagehand：开启高效测试与自动化新篇

探秘Shortest与Stagehand：开启高效测试与自动化新篇在数字化浪潮的推动下，网页自动化工具如同繁星般涌现，为众多行业带来了效率的变革。在这些工具中，Shortest和Stagehand凭借其出色的表现，成为了众多开发者、测试人…...

编程日记 2025/6/3 5:00:16

网络安全构成要素

一、防火墙组织机构内部的网络与互联网相连时，为了避免域内受到非法访问的威胁，往往会设置防火墙。使用NAT（NAPT）的情况下，由于限定了可以从外部访问的地址，因此也能起到防火墙的作用。二、IDS入侵检…...

编程日记 2025/6/3 10:04:45

家政服务小程序，打造智慧家政新体验

春节即将来临，家政市场呈现出了火热的场景，大众对家政服务的需求持续增加。近年来，家政市场开始倾向数字化、智能化，借助科学技术打造家政数字化平台，让大众在手机上就可以预约家政服务，减少传统家政市场…...

编程日记 2025/6/2 18:32:16

2.使用Spring BootSpring AI快速构建AI应用程序

Spring AI 是基于 Spring Boot3.x 框架构建，Spring Boot官方提供了非常便捷的工具Spring Initializr帮助开发者快速的搭建Spring Boot应用程序,IDEA也集成了此工具。本文使用的开发工具IDEASpring Boot 3.4Spring AI 1.0.0-SNAPSHOTMaven。 1.创建Spring Boot项目 …...

编程日记 2025/6/2 20:37:09

OpenCV实战-全景图像拼接

代码地址见文末实现效果 1. 项目背景随着计算机视觉技术的不断发展，图像拼接技术已被广泛应用于虚拟现实、地图生成、全景摄影等领域。图像拼接（Image Stitching）旨在将多张部分重叠的图像无缝拼接成一幅完整的全景图像。此任务要求图像处…...

编程日记 2025/6/3 12:23:27

h5使用video播放时关掉vant弹窗视频声音还在后台播放

现象： 1、点击遮罩弹窗关闭，弹窗的视频已经用v-if销毁，但是后台会自己从头开始播放视频声音。但是此时已经没有视频dom 2、定时器在打开弹窗后3秒自动关闭弹窗，则正常没有问题。原来的代码： //页面 <a click&quo…...

编程日记 2025/6/3 22:45:05

解决leetcode第3418题机器人可以获得的最大金币数

3418.机器人可以获得的最大金币数难度：中等问题描述： 给你一个mxn的网格。一个机器人从网格的左上角(0,0)出发，目标是到达网格的右下角(m-1,n-1)。在任意时刻，机器人只能向右或向下移动。网格中的每个单元格包含一个值coin…...

编程日记 2025/6/4 1:49:47

anaconda安装和环境配置

文章目录一、Anaconda下载1.从官网直接下载：2.从镜像站中下载： 二、Anaconda安装三、检测是否有Anaconda配置anaconda环境四、 Anaconda创建多个python环境（方便管理项目环境）1.查看conda有哪些环境2.创建python3.6的环境3.激活…...

编程日记 2025/6/2 19:32:32

Lora理解QLoRA

Parameter-Efficient Fine-Tuning (PEFT) ：节约开销的做法，fine-tune少量参数，而不是整个模型； Low-Rank Adaptation (LoRA) ：是PEFT的一种；冻结原参数矩阵，只更新2个小参数矩阵。原文经过对比…...

编程日记 2025/6/1 22:06:53

嵌入式杂谈——什么是DMA？有什么用？

什么是DMA？——直接内存访问技术详解在嵌入式系统和计算机体系结构中，DMA（Direct Memory Access，直接内存访问） 是一种重要的数据传输技术。它允许外设（如UART、SPI、ADC等）直接与内存进行数据…...

编程日记 2025/5/30 23:28:47

超标量处理器设计2-cache

1. cache 介绍影响Cache缺失的情况有3种： Compulsory: 第一次被访问的指令或者数据肯定不会在cache中，需要通过预取来减少这种缺失Capcity: Cache容量越大，缺失就可以更少, 程序频繁使用的三个数据来源于3个set， 但是&#xff…...

编程日记 2025/6/2 14:22:43

使用Nginx正向代理让内网主机通过外网主机访问互联网

目录环境概述流程说明在外网服务器上安装部署nginx? 安装前准备下载nginx ?编译安装nginx 开始配置正向代理创建systemd服务单元文件，用于管理Nginx服务的启动、停止和重新加载启动nginx ?代理服务器本地验证 ?内网服务器验证 ?将代理地址添…...

编程日记 2025/6/3 1:30:56

蓝桥杯刷题第二天——背包问题

题目描述有N件物品和一个容量是V的背包。每件物品只能使用一次。第i件物品的体积是Vi价值是Wi。求解将哪些物品装入背包，可使这些物品的总体积不超过背包容量，且总价值最大。输出最大价值。输入格式第一行两个整数，N，V&am…...

编程日记 2025/6/4 4:44:01

DM达梦启用及收集AWR报告

1.创建DBMS_WORKLOAD_REPOSITORY系统包查看DBMS_WORKLOAD_REPOSITORY系统包启用状态 SQL> SELECT SF_CHECK_AWR_SYS;LINEID SF_CHECK_AWR_SYS ---------- ---------------- 1 0SF_CHECK_AWR_SYS 返回值 0：未启用；1：已启…...

编程日记 2025/6/4 9:38:45

【git】如何删除本地分支和远程分支？

1.如何在 Git 中删除本地分支本地分支是您本地机器上的分支，不会影响任何远程分支。 （1）在 Git 中删除本地分支 git branch -d local_branch_name git branch 是在本地删除分支的命令。-d是一个标志，是命令的一个选项&#x…...

编程日记 2025/6/1 8:29:53

pix2pix mmgeneration通用场景黑白图片上色模型训练，Docker

https://www.dong-blog.fun/post/1924 对于机器学习和深度学习感兴趣的读者来说，OpenMMLab 提供的 MMGeneration 库是一个绝佳的选择。最近我在阅读一篇关于 MMGeneration 的博客文章，尤其是在使用 Docker 环境进行模型和算法测试方面，受益匪浅。以下是我对目标博客内容的概…...

编程日记 2025/6/3 16:12:35

【Redis入门到精通六】在Spring Boot中集成Redis（含配置和操作演示）

目录 Spring Boot中集成Redis 1.项目创建和环境配置 2.基本操作演示 Spring Boot中集成Redis Spring社区也自定义了一套Redis的客户端，与jedis的操作方式有所差异，Spring中把每个类型的操作都单独封装了起来。下面就让我来带大家了解如何在Spring Bo…...

编程日记 2025/6/3 13:59:10

js使用qrcode与canvas生成带logo的二维码

qrcode库文档 https://www.npmjs.com/package/qrcode 安装 npm i qrcode 使用 errorCorrectionLevel: H // 容错率（H是最高，其它看文档） width: 200 // 大小 margin: 2 // 边距 import QRCode from qrcodeconst testFn async () > {c…...

编程日记 2025/5/29 21:45:48

【STM32】LED状态翻转函数

1.利用状态标志位控制LED状态翻转在平常编写LED状态翻转函数时，通常利用状态标志位实现LED状态的翻转。如下所示： unsigned char led_turn_flag; //LED状态标志位，1-点亮，0-熄灭/***************************************函…...

编程日记 2025/5/28 3:44:07

FreeRTOS 简介

FreeRTOS 是一个小型、实时操作系统内核，专为嵌入式设备设计。它支持多任务操作、任务优先级、互斥机制和队列管理，是轻量级嵌入式开发中的热门选择。以下是其主要特点： 特点实时性能：提供确定性的任务调度，适用于对…...

编程日记 2025/6/3 8:03:17

Java并发编程中的synchronized和volatile：用途解析与使用场景

目录一、synchronized关键字：互斥与同步的保障二、volatile关键字：轻量级的变量可见性保证三、synchronized与volatile的区别与选择四、总结在Java并发编程中，synchronized和volatile是两个非常重要的关键字，它们在多线程…...

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

将 AzureBlob 的日志通过 Azure Event Hubs 发给 Elasticsearch（1）

问题项目里使用了 AzureBlob 存储了用户上传的各种资源文件，近期 AzureBlob 的流量费用增长很快，想通过分析Blob的日志，获取一些可用的信息，所以有了这个需求：将存储账户的日志（读写，审计&…...

编程日记 2025/6/3 15:27:07

程序设计：排版、检验报告的上下标解决几种办法

【啰嗦两句】本文重点在于提供几个针对排版文档、各种检验报告系统等程序设计时，遇到的上下标录入、绘制展示等问题的应对办法，但是准确地说，并没有非常优秀的方案。【上下标难题】一般的行业或许对上下标并没有严格要求，多数…...

编程日记 2025/6/2 13:58:04

【2024年华为OD机试】 (C卷,100分)- 求字符串中所有整数的最小和（Java JS PythonC/C++）

一、问题描述题目解析题目描述输入字符串 s，输出 s 中包含所有整数的最小和。说明字符串 s 只包含 a-z、A-Z、、-。合法的整数包括： 正整数：一个或多个 0-9 组成，如 0、2、3、002、102。负整数：负号 - 开头&…...

编程日记 2025/6/3 4:13:58

MBox20网关：数字化工厂的智能加速器

在当今这个日新月异的数字化时代，企业对于生产效率、数据管理和网络安全的追求已经达到了前所未有的高度。特别是在制造业领域，随着“工业4.0”和“智能制造”概念的深入实践，数字化工厂已成为产业升级的必然趋势。在这场深刻的变革中&#x…...

编程日记 2025/5/29 6:40:04

NodeJS | 搭建本地/公网服务器 live-server 的使用与安装

目录介绍安装 live-server 安装方法安装后的验证环境变量问题 Node.js 环境变量未配置正确全局安装的 live-server 路径未添加到环境变量运行测试默认访问主界面访问文件报错信息与解决问题一：未知命令问题二：拒绝脚本公网配置…...

编程日记 2025/6/4 1:49:52

用C++实现一个基于模板的观察者设计模式

观察者模式定义观察者模式（Observer Pattern）是一种行为型设计模式，用于定义对象间的一对多依赖关系，使得当一个对象状态发生变化时，其所有依赖它的对象都会收到通知并自动更新。核心概念角色定义 Subject（被观察者）：持有观察者列表，维护观察者的注册和移除。 …...

编程日记 2025/6/2 13:54:05

LabVIEW开发X光图像的边缘检测

在医疗影像处理中，X光图像的分析对于骨折、肿瘤等病变的检测非常重要。X光图像中包含许多关键信息，然而，由于图像噪声的干扰，直接从图像中提取有用的特征（如骨折的边缘）变得非常困难。边缘检测作为图像处理…...

编程日记 2025/6/4 16:12:20

GitEE

版本控制 cvs svn git 等等一、团队开发过程中的问题 1、备份【Release】 2、代码还原 3、协同修改 4、多版本文件管理 5、追溯问题代码的编写人和编写时间 6、权限控制二、版本控制版本控制就是维护工程蓝图标准做法，能追踪工程蓝图从诞生一直到定案的过程…...

编程日记 2025/6/3 12:53:21

Ubuntu配置python环境

前言 Ubuntu22.04自带python3，仅需要安装pip3即可。也可以安装Anaconda使用虚拟环境。本地Python环境查看python3是否已安装： python3 -V若已安装python3，继续安装pip3： sudo apt install python3-pip查看pip版本&#xf…...

编程日记 2025/5/30 3:58:21

数据库的DML

1.insert 数据库于表创建成功后，需要向数据库的表中插入数据。在MySQL中可以使用insert语句向数据库已有的表中插入一行或者多行元组数据基本语法： insert 语句有两种语法形式，分别是insert…values语句和insert…set语句 insert into&l…...

编程日记 2025/6/1 19:24:18

什么是SSL及SSL的工作流程

什么是 SSL SSL（Secure Sockets Layer，安全套接层）是一种保护互联网通信安全的加密协议，用于确保数据在客户端和服务器之间传输时的保密性、完整性和身份验证。它已被TLS（Transport Layer Security，传输层安全协议）取代，但很多场景仍习惯称其为SSL。 SSL/TLS 的主要目…...

编程日记 2025/6/3 10:27:09