Vue3（一）
1.Vue3概述
Vue3的API由Vue2的选项式API改为了组合式API。但是，也是Vue2中的选项式API也是兼容的。
2.创建Vue3项目
create-vue 是 Vue 官方新的脚手架工具，底层切换到了 vite。使用create-vue创建项目的步骤如下：
安装 create-vue
npm init vue@latest
项目中关键文件的含义
3.组合式API
3.1.setup选项
setup 函数是在 beforeCreate 钩子之前执行。并且，在setup函数中写的数据和方法需要在末尾以对象的方式 return，才能给模版使用。
<script>export default {setup(){const message = 'this is message'const logMessage = ()=>{console.log(message)}// 必须return才可以return {message,logMessage}}}
</script>也可以给 script 标签添加 setup 标记，这样 script 标签内部所有的代码相当于都是在 setup 函数内，导出语句也会被默认添加上。
<script setup>const message = 'this is message'const logMessage = ()=>{console.log(message)}
</script>3.2.reactive和ref函数
reactive：用来接受对象类型数据的传入并返回一个响应式的对象。
<script setup>// 导入import { reactive } from 'vue'// 执行函数 传入参数 变量接收const state = reactive({msg:'this is msg'})const setSate = ()=>{// 修改数据更新视图state.msg = 'this is new msg'}
</script><template>{{ state.msg }}<button @click="setState">change msg</button>
</template>ref：接收简单类型或者对象类型的数据传入并返回一个响应式的对象。基本用的都是这种。
<script setup>// 导入import { ref } from 'vue'// 执行函数 传入参数 变量接收const count = ref(0)const setCount = ()=>{// 修改数据更新视图必须加上.valuecount.value++}
</script><template><button @click="setCount">{{count}}</button>
</template>3.3.computed
会基于现有的数据，计算出来的新属性。依赖的数据发生了变化，计算属性也会自动重新计算。
<script setup>
// 导入
import {ref, computed } from 'vue'
// 原始数据
const count = ref(0)
// 计算属性
const doubleCount = computed(()=>count.value * 2)// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList = computed(() => {return list.value.filter(item => item > 2)
})
</script>3.4.watch
侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听。
1.侦听单个数据
<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue)=>{console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)})
</script>2.侦听多个数据
<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)const name = ref('cp')// 2. 调用watch 侦听变化watch([count, name], ([newCount, newName],[oldCount,oldName])=>{console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])})
</script>3.immediate和deep参数
<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const count = ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue)=>{console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)},{immediate: true, // 侦听器创建出来之后立即执行一次deep: true // watch默认是浅层监听，对象内部的属性发生变化时不会触发，开启deep后即可监听内部属性})
</script>3.5.生命周期函数
1.选项式对比组合式
2.生命周期函数的使用
<scirpt setup>
// 1.导入生命周期函数
import { onMounted } from 'vue'
// 2.定义生命周期函数，编写自定义逻辑
onMounted(()=>{// 自定义逻辑
})
</script>相同的生命周期函数可以定义多个，会按照定义的顺序执行
<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{// 自定义逻辑
})onMounted(()=>{// 自定义逻辑
})
</script>3.6.父子组件的通信
1.父传子
2.子传父
3.7.模版引用
<script setup>
import { ref } from 'vue'
// 1.调用ref函数得到ref对象
const h1Ref = ref(null)
</script><template><!--- 2.通过ref标识绑定ref对象 --><h1 ref="h1Ref">我是dom标签</h1>
</template>3.8.defineExpose
默认情况下在 <script setup> 语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过 defineExpose 编译宏指定哪些属性和方法容许访问。
3.9.provide和inject
相关文章：
Vue3（一）
1.Vue3概述 Vue3的API由Vue2的选项式API改为了组合式API。但是，也是Vue2中的选项式API也是兼容的。 2.创建Vue3项目 create-vue 是 Vue 官方新的脚手架工具，底层切换到了 vite。使用create-vue创建项目的步骤如下： 安装 create-vue npm i…...
php命名空间
什么是命名空间 从广义上来说，命名空间是一种封装事物的方法，在很多地方都可以见到这种抽象概念。 例如，在操作系统中目录用来将相关文件分组，对于目录中的文件来说，它就扮演了命名空间的角色。 具体举个例子…...
AI也会犯错
一、缘起 1.1 问题的发现 AI模型在处理数值比较问题时，出现了一个有趣的现象：当被问到“9.9”和“9.11”哪个更大时，一些AI模型给出了错误的答案，认为“9.9”大于“9.11”。这一问题最初是由 Riley Goodside 发现的，…...
Android NDK开发入门2之适应idm环境
环境搭建 Android NDK开发实战之环境搭建篇(so库,Gemini ai)-CSDN博客 初始配置 前面已经运行了一个简单的初始程序，现在我们来往初始程序添加类和函数，并成功运行的实验。 一级配置 第一层配置主要是cmake文件环境和一些编译选项。 build配置 可参…...
HTML-多媒体标签
除了图像，网页还可以放置视频和音频。 1.<video> <video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。 <video src"example.…...
[Linux]生产消费者模型
目录 一、生产消费者模型概念 1.概念 2.模块构成 3.协作机制 二、基于BlockingQueue的多CP问题 1.BlockQueue模块 2.Task任务模块 3.创建多线程以及整合模块 三、基于信号量的环形队列CP模型 1.POISX信号量接口 初始化信号量 PV操作 信号量销毁 2.模型简述 3.…...
从零用java实现 小红书 springboot vue uniapp （9）消息推送功能
前言 移动端演示 http://8.146.211.120:8081/#/ 前面的文章我们主要完成了个人资料修改 消息页优化 这篇文章我们讲解消息推送 推送页面 因为我们的推送消息都在一个页面 所以我们可以复用消息的websokcet推送 首先需要在 点赞表 收藏表 关注表 回复表 都添加未读字段 MESSAG…...
zookeeper监听机制（Watcher机制）
文章目录 引言I zookeeper监听机制Watcher机制实现分布式的通知功能触发事件种类Watcher的三个过程II watch机制特点一次性触发事件封装event异步发送先注册再触发常见的通知状态和事件类型III 应用案例（Kafka）Kafka的消息模型Kafka在Zookeeper中保存的元数据Kafka 基于Contr…...
企业开通部署 Azure OpenAI 流程：如何创建一个AI聊天机器人
由于众所周知的原因，国内没法直接调用 OpenAI 接口。 下面我将演示企业如何开通 Azure OpenAI 服务，以及如何使用 C# 调用 Azure OpenAI 接口创建一个 Console 应用程序并实现聊天机器人功能。 1开通 Azure OpenAI 服务 要开通 Azure OpenAI 服务&…...
【Linux基础指令】第一期
一、Linux的介绍 Linux是一个开源的操作系统，性能、稳定性、安全性方面上都是很优秀的，所以它一直是企业后端系统的首选。所以其图形化界面并不是Linux的必需品，所以我们避免不了要使用命令行的形式来使用Linux，也就离不开…...
使用 Rust 和 WASM 打造高性能 Web 应用
在现代 Web 开发中，前端性能是衡量用户体验的重要指标之一。随着 WebAssembly (WASM) 的崛起，它为开发者提供了一种在浏览器中运行高性能代码的方式。而 Rust，作为一门以性能和安全性著称的编程语言，与 WASM 的结合使得构建高效的…...
SQL Server中可以通过扩展事件来自动抓取阻塞
在SQL Server中可以通过扩展事件来自动抓取阻塞，以下是详细流程： 开启阻塞跟踪配置： • 执行以下SQL语句来启用相关配置： EXEC sp_configureshow advanced options, 1; RECONFIGURE; EXEC sp_configure blocked process thresh…...
无网络时自动切换备用网络环境
目录 背景目标为什么需要做自动网络切换网络切换手段 网络环境实现思路和代码部署脚本开机自动执行附录连接两个网络时的路由问题 背景 目标 学校实验室有两个网络环境，我电脑使用网线连接稳定但低速的网络A，使用WiFi连接高速但不稳定的网络B。因此&am…...
回顾2024年重磅AI发布汇总
2024年在人工智能领域出现了不少值得关注的发布和进展，以下是根据时间线索，对一些亮点突破进行了总结： 二月 Stability AI 宣布推出Stable Diffusion 3。 Google 升级了 Bard 中的人工智能聊天功能，基于新的Gemini Pro模型&…...
基类指针指向派生类对象，基类指针的首地址永远指向子类从基类继承的基类首地址
文章目录 基类指针指向派生类对象，基类指针的首地址永远指向子类从基类继承的基类起始地址。代码代码2 基类指针指向派生类对象，基类指针的首地址永远指向子类从基类继承的基类起始地址。 代码 #include <iostream> using namespace std;class b…...
Postman接口测试02|接口用例设计
目录 六、接口用例设计 1、接口测试的测试点（测试维度） 1️⃣功能测试 2️⃣性能测试 3️⃣安全测试 2、设计方法与思路 3、单接口测试用例 4、业务场景测试用例 1️⃣分析测试点 2️⃣添加员工 3️⃣查询员工、修改员工 4️⃣删除员工、查询…...
负载均衡服务器要怎么配置？
目录 一、概述： 二、硬件配置： 三、操作系统配置： 四、负载均衡软件： 五、网络配置： 六、软件安装步骤： 6.1 安装 Nginx 6.2 安装 LVS 6.3 安装 HAProxy 6.4 安装 Keepalived 一、概述࿱…...
技术速递｜通过 .NET Aspire 使用本地 AI 模型
作者：Aaron Powell 排版：Alan Wang 使用本地 AI 模型是无需将资源部署到云中即可在自己的机器上进行实验的好方法。在本文中，我们将探讨如何使用 .NET Aspire 与 Ollama 来本地运行 AI 模型，同时利用 Microsoft.Extensions.AI 抽象…...
esp32开发笔记之一：esp32开发环境搭建vscode+ubuntu
最近想用esp32做一个物联网项目，踩坑N个终于有点心得，写下来避免和我一样的小白踩无谓的坑。 写在前面： 第一，大家一定要用linux系统作为编译工具，速度上是windows无法比的，不要因为不熟悉linux而选择win…...
vue el-table 数据变化后，高度渲染问题
场景：el-table设置了height属性，但是切换查询条件后再次点击查询重新获取data时，el-table渲染的高度会有问题，滚动区域变矮了。 解决办法：使用doLayout方法，在表格数据渲染后调用doLayout方法可以重新布局…...
unity学习15：预制体prefab
目录 1 创建多个gameobject 2 创建prefab 2.1 创建prefab （类） 2.2 prefab 是一个文件 2.3 prefab可以导出 3 创建prefab variant （子类） 3.1 除了创建多个独立的prefab， 还可以创建 prefab variant 3.2 他…...
Harbor 安装教程
一、安装 Docker 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2添加 Docker 软件源信息 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo修改软件源配置 sudo sed -i sdow…...
HTML5 波动动画（Pulse Animation）详解
HTML5 波动动画（Pulse Animation）详解 波动动画是一种动态效果，使元素周期性地放大和缩小，给人一种脉动的感觉。以下是如何使用 CSS 和 HTML5 创建波动动画的详细说明。 1. 基本概念 波动动画：通过改变元素的大小来…...
【运维】如何检查电脑正常异常和关机日志？ 1074正常关机或重启 6006正常关机 41非正常关机 6008异常关机
事件 ID 1074：正常关机或重启，由用户或程序请求触发。 事件 ID 6006：正常关机，表示系统已正确关闭。 事件 ID 41：非正常关机，可能是由于电源问题、硬件故障或系统崩溃导致。 事件 ID 6008：异常关…...
解决后端控制台报错Error updating database
数据库字段 对应实体类字段 private BigDecimal maths; private BigDecimal chinese; private BigDecimal english; 新增数据时后端控制台报错 Error updating database. Cause: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Out of range value for…...
（2023|NIPS，LLaVA-Med，生物医学 VLM，GPT-4 生成自指导指令跟随数据集，数据对齐，指令调优）
LLaVA-Med: Training a Large Language-and-Vision Assistant for Biomedicine in One Day 目录 LLaVA-Med: Training a Large Language-and-Vision Assistant for Biomedicine in One Day 0. 摘要 1. 简介 2. 相关工作 3. 生物医学视觉指令数据 4. 将多模态对话模型适配…...
I2C学习笔记
前言 我一直不是特别喜欢读文档，习惯了通过视频学习，因为视频能更直观地展现信息，给人一种更生动、形象的感觉。然而，随着学习的内容逐渐增多，我发现并不是所有的知识点都能在视频中找到，或者视频中展示的…...
JetPack——ViewModel
前提阅读 JetPack——Lifecycle Jetpack——LiveData ViewModel是什么？ ViewModel 类是一种业务逻辑或屏幕级状态容器。它用于将状态公开给界面，以及封装相关的业务逻辑。 它的主要优点是，它可以缓存状态，并可在配置更改后持久…...
【Java 学习】对象赋值的艺术：Java中clone方法的浅拷贝与深拷贝解析，教你如何在Java中实现完美复制
💬 欢迎讨论：如对文章内容有疑问或见解，欢迎在评论区留言，我需要您的帮助！ 👍 点赞、收藏与分享：如果这篇文章对您有所帮助，请不吝点赞、收藏或分享，谢谢您的支持&#x…...
【计算机网络】课程 实验四 配置快速生成树协议（RSTP）
实验四 配置快速生成树协议（RSTP） 一、实验目的 1．理解快速生成树协议RSTP的工作原理。 2．掌握如何在交换机上配置快速生成树。 二、实验分析与设计 【背景描述】 某学校为了开展计算机教学和网络办公，建立了一个计…...
SpringBootWeb案例-1（day10）
准备工作 需求 & 环境搭建 需求说明 环境搭建 步骤： 准备数据库表(dept、emp)创建 springboot 工程，引入对应的起步依赖（web、mybatis、mysql 驱动、lombok）配置文件 application.properties 中引入 mybatis 的配置信息&…...
攻防世界 Web_php_wrong_nginx_config
打开题目地址，显示为登录页面。尝试用御剑扫描一下，发现了admin页面，点进去显示如下 点开控制台，发现如下 isLogin参数为0。尝试抓包并该islogin参数为1，返回依旧不变。 再扫描，发现robots.txtÿ…...
【VUE+ElementUI】通过接口下载blob流文件设置全局Loading加载进度
下载Blob流文件，并以服务形式显示文件下载进度 1、下载接口 增加 config参数，并用...config将该属性加入到请求中； xxapi.js文件中设置downloadFile下载接口 // 下载文件 export function downloadFile(data, config) {return request({ur…...
行为树详解（6）——黑板模式
【动作节点数据共享】 行为树中需要的参数可以来自游戏中的各个模块，如果仅需从多个模块获取少量参数，那么可以直接在代码中调用其他模块的单例继而层层调用获取数据。 如果获取的参数量很大，从架构上看，我们需要通过加一个中间…...
【prometheus】Pushgateway安装和使用
目录 一、Pushgateway概述 1.1 Pushgateway简介 1.2 Pushgateway优点 1.3 pushgateway缺点 二、测试环境 三、安装测试 3.1 pushgateway安装 3.2 prometheus添加pushgateway 3.3 推送指定的数据格式到pushgateway 1.添加单条数据 2.添加复杂数据 3.SDk-prometheus-…...
耗时一天，我用AI开发了AI小程序
小码哥从事前后端开发近十年，但是随着技术的更新迭代，有时候没有时间和精力去优化UI、实现一些前后端功能，以及解决一些bug。特别是我想开发小码哥AI的移动端，但觉得自己没有那么多时间去研究移动端了，准备放弃了&…...
Java 日期时间格式化标准
文章目录 Java日期时间格式化符号ISO 8601中的日期时间ISO 8601标准的定义ISO 8601日期时间格式 周数年份ISO 8601中的周数年份Java中的周数年份 Java跨年日期格式化BUG注意事项 Java日期时间格式化符号 JDK官网截图： 格式化符号梳理： 符号描述符号用…...
undolog,redolog,binlog分别是做什么的?
在数据库系统中（尤其是 MySQL），Undo log、Redo log 和 Binlog 是用于实现数据持久性和一致性的重要日志机制。 1. Undo Log（回滚日志） 功能： 用于事务回滚：记录事务开始前的状态，以…...
NRF24L01模块STM32-接收端
前言 在调试接收端时,建议先看下下篇文章NRF24L01调试心得 环境： 芯片：STM32F103C8T6 Keil：V5.24.2.0 一、接收端初始化 void NRF24l01_rx_mode(void) {NRF24L01_CE(0);NRF24l01_write_buf(NRF_WRITE_REG TX_ADDR, (uint8_t *)TX_ADDRE…...
核磁机器学习 | 机器学习和深度学习算法在fMRI中的应用
摘要 功能磁共振成像(fMRI)是目前应用最广泛的脑图像动态分析技术之一，通常结合多种算法来分析复杂的动态数据。近年来，机器学习和深度学习算法在分析fMRI数据方面的应用呈指数级增长。然而，由于文献中存在大量算法，选择合适的机器…...
【数据结构-堆】力扣3296. 移山所需的最少秒数
给你一个整数 mountainHeight 表示山的高度。 同时给你一个整数数组 workerTimes，表示工人们的工作时间（单位：秒）。 工人们需要 同时 进行工作以 降低 山的高度。对于工人 i : 山的高度降低 x，需要花费 workerTimes…...
web前端-html
HTML部分 HTML：超文本标记语言。是万维网web编程的基础，web是建立在超文本基础上的。HTML 是万维网的基石 打开www.baidu.com的页面源代码可见 超文本标记超的含义 1.最重要的标签，超链接标签，可跳转页面，关联所有页…...
单片机-定时器中断
1、相关知识 振荡周期1/12us; //振荡周期又称 S周期或时钟周期（晶振周期或外加振荡周期）。 状态周期1/6us; 机器周期1us; 指令周期1~4us; ①51单片机有两组定时器/计数器，因为既可以定时，又可以计数，故称之为定时器…...
计算机网络 （31）运输层协议概念
一、概述 从通信和信息处理的角度看，运输层向它上面的应用层提供通信服务，它属于面向通信部分的最高层，同时也是用户功能中的最低层。运输层的一个核心功能是提供从源端主机到目的端主机的可靠的、与实际使用的网络无关的信息传输。它向高层用…...
【学Rust开发CAD】2 创建第一个工作空间、项目及库
文章目录 一、 创建工作空间二、新建项目（可执行文件）三、 新建库（库文件）四、更新项目依赖五、编写代码七、总结 在 Rust 中，工作空间（workspace）允许你管理多个相关的包（crate&…...
使用GitLab+Jenkins搭建CICD执行环境
使用GitLabJenkins搭建CI\CD执行环境 前言什么是DevOps？什么是CI/CD？使用GitLabJenkins搭建CI\CD执行环境GitLab安装1. 安装和配置所需的依赖2. 下载并安装极狐GitLab3. 登录极狐GitLab 实例4.常用gitlab指令5.修改密码 Jenkins安装1.Jenkins 的主要特点…...
微信小程序——创建滑动颜色条
在微信小程序中，你可以使用 slider 组件来创建一个颜色滑动条。以下是一个简单的示例，展示了如何实现一个颜色滑动条，该滑动条会根据滑动位置改变背景颜色。 步骤一：创建小程序项目 首先，使用微信开发者工具创建一个…...
Mac中配置vscode（第一期：python开发）
1、终端中安装 xcode-select --install #mac的终端中安装该开发工具 xcode-select -p #显示当前 Xcode 命令行工具的安装路径注意：xcode-select --install是在 macOS 上安装命令行开发工具(Command Line Tools)的关键命令。安装的主要组件包括：C/C 编…...
：浅谈 Layout 布局的嵌套设计模式)
Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
业务场景 在目前常见的中后台管理系统中，比较常见的是固定的布局方式包裹页面，但一些特殊页面，比如：登录页面、注册页面、忘记密码页面这些页面是不需要布局包裹的。 但在 Next.js AppRouter 中，必须包含一个根布局文…...
Linux环境下确认并操作 Git 仓库
在软件开发和版本控制中，Git 已成为不可或缺的工具。有时，我们需要确认某个目录是否是一个 Git 仓库，并在该目录中运行脚本。本文将详细介绍如何确认 /usr/local/src/zcxt/backend/policy-system-backend 目录是否是一个 Git 仓库，…...