Vue3苦逼的学习之路
从一名测试转战到全栈是否可以自学做到,很多朋友肯定会说不可能,或就算转了也是个一般水平,我很认同,毕竟没有经过各种项目的摧残,但是还是得踏足一下这个领域。所以今天和大家分享vue3中的相关内容,大佬勿喷。
一:计算属性
案例1:计算属性,且是只读
<script lang="ts" setup name="Person">
import { ref, computed } from 'vue'
let firstName = ref('张')
let lastName = ref('三')// 计算属性,且是只读
let fullName = computed(() => {return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value.slice(0, 1)
})
</script>
案例2:计算属性,可读可写
<script lang="ts" setup name="Person">
import { ref, computed } from 'vue'
let firstName = ref('张')
let lastName = ref('三')// 计算属性,可读可写
let fullName_rw = computed({get() {return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value.slice(0, 1)},set(val) {const [str1, str2] = val.split('-')firstName.value = str1lastName.value = str2}
})
function changeName() {fullName_rw.value = '李-四'
}
</script>
对于计算属性,一般与get()和set()一起使用
二:watch属性
作用:监视数据的变化,和vue2的watch租用一致
特点:vue3中的watch只能监视以下四种数据
1、ref定义的数据【一个是基本类型,一个是对象类型】
2、reactive定义的数据
3、函数返回一个值(getter函数)
4、一个包含上述内容的数组
关于watch一共有五种情况:
情况一:监视ref定义的基本数据类型
<template><div class="person"><h2>当前求和为:{{ sum }}</h2><button @click="changeSum">点我sum+1</button></div>
</template><script lang="ts" setup name="Person1">
import { ref, watch } from 'vue'
// 定义数据
let sum = ref(0)function changeSum() {sum.value++
}
//监视ref定义的基本数据,这里监视的就是sum
const stopwatch = watch(sum, (newvalue, oldvalue) => {console.log(newvalue, oldvalue);//解除监视,当sum的值大于等于10时运行解除if (sum.value >= 10) {stopwatch()}
})</script>
情况二:监视ref定义的对象类型的数据
<template><div class="person"><h1>情况2:监视ref定义的对象类型</h1><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改按钮</button><button @click="changePerson">修改整个人</button></div>
</template><script lang="ts" setup name="Person1">
import { ref, watch } from 'vue'
// 监视ref定义的对象类型,直接写数据名,监视的是对象的【地址值】,若想见识对象内部的数据,要手动开启深度监视
// immediate: true, 立即执行
// deep: true, 深度监视
let person = ref({name: 'alex',age: 18
})
// 方法
function changeName() {person.value.name += '~'
}
function changeAge() {person.value.age++
}
function changePerson() {person.value = {name: '李四',age: 20}
}
//监视ref定义的【对象类型】数据,监视的是对象的地址值
watch(person, (newvalue, oldvalue) => {console.log(newvalue, oldvalue);
}, { deep: true, immediate: true })
/*
注意:
1、如果修改的是ref定义的对象中的属性,newvalue和oldvalue都是新值,因为它们是同一个对象
2、如果修改整个ref定义的对象,newvalue是新值,oldvalue是旧值,因为不是同一个对象了
*/
</script>
情况三:监视reactive定义的对象类型
<template><div class="person"><h2>情况3:监视reactive定义的对象类型</h2><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="changeName1">修改名字</button><button @click="changeAge1">修改按钮</button><button @click="changePerson1">修改整个人</button></div>
</template><script lang="ts" setup name="Person1">
import { ref, watch, reactive } from 'vue'//情况三:监视reactive定义的对象类型数据,且默认开启深度监视
function changeName1() {person1.name += '~'
}
function changeAge1() {person1.age++
}
//reactive不能整体修改,所以下面是无法执行的
function changePerson1() {// person1 = {// name: '李四',// age: 20// }//下面是强制修改,但是不是把整个对象修改Object.assign(person1, {name: '李四111',age: 28})
}
//监视,情况三:监视【reactive】定义的【对象类型】数据,且默认是开启深度监视的
watch(person1, (newvalue, oldvalue) => {console.log('person1变化了');console.log(newvalue, oldvalue);
})
</script>
情况四:监视ref或reactive定义的【对象类型】数据中的某个属性
1、若该属性值不是【对象类型】,需要写成函数形式
2、若该属性值依然是【对象类型】,可直接编,也可写成函数,不过建议写成函数
<template><div class="person"><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><h2>车:{{ person.car.C1 }}-{{ person.car.C2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeCar1">修改第一台车</button><button @click="changeCar2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person1">
import { reactive, watch } from 'vue'
//数据
let person = reactive({name: "张三",age: 18,car: {C1: '奔驰',C2: '宝马'}
})
// 监视响应式对象中的某个属性,且该属性是基本类型,要写成函数式
watch(() => person.name, (newvalue, oldvalue) => {console.log('person.name变化了', newvalue, oldvalue);
},{deep:true})
</script>
情况五:监视多个数据
<template><div class="person"><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><h2>车:{{ person.car.C1 }}-{{ person.car.C2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeCar1">修改第一台车</button><button @click="changeCar2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person1">
import { reactive, watch } from 'vue'
//数据
let person = reactive({name: "张三",age: 18,car: {C1: '奔驰',C2: '宝马'}
})
// 如果是对象之类的,就不用改为函数式了,比如:person.car
watch([() => person.name, () => person.car.C1, person.car], (newvalue, oldvalue) => {console.log('改动了', newvalue, oldvalue);}, { deep: true })
相关文章:
Vue3苦逼的学习之路
从一名测试转战到全栈是否可以自学做到,很多朋友肯定会说不可能,或就算转了也是个一般水平,我很认同,毕竟没有经过各种项目的摧残,但是还是得踏足一下这个领域。所以今天和大家分享vue3中的相关内容,大佬勿…...
github提交不上去,网络超时问题解决
问题出现的原因: DNS服务器数据不同步,github的服务器发送迁移,在本地缓存的ip地址现在无效了。 解决方案: 1)点击这里,查询github.com最新的ip地址 2.0)编辑linux系统地址缓存文件&#x…...
SAP物料主数据界面增加客制化字段、客制化页签的方式
文章目录 前言一、不增加页签,只增加客制化字段二、增加物料主数据页签 前言 【SAP系统MM模块研究】 #SAP #MM #物料 #客制化 #物料主数据 项目上难免会遇到客户要在物料主数据的界面上,增加新字段的需求。 实现方式有: (1&…...
56.在 Vue 3 中使用 OpenLayers 通过 moveend 事件获取地图左上和右下的坐标信息
前言 在现代 Web 开发中,地图应用越来越成为重要的组成部分。OpenLayers 是一个功能强大的 JavaScript 地图库,它提供了丰富的地图交互和操作功能,而 Vue 3 是当前流行的前端框架之一。在本篇文章中,我们将介绍如何在 Vue 3 中集…...
DDoS攻击防御方案大全
1. 引言 随着互联网的迅猛发展,DDoS(分布式拒绝服务)攻击成为了网络安全领域中最常见且危害严重的攻击方式之一。DDoS攻击通过向目标网络或服务发送大量流量,导致服务器过载,最终使其无法响应合法用户的请求。本文将深…...
OLED的显示
一、I2C I2C时序:时钟线SCL高电平下:SDA由高变低代表启动信号,开始发送数据;SCL高电平时,数据稳定,数据可以被读走,开始进行读操作,SCL低电平时,数据发生改变࿱…...
BP神经网络的反向传播算法
BP神经网络(Backpropagation Neural Network)是一种常用的多层前馈神经网络,通过反向传播算法进行训练。反向传播算法的核心思想是通过计算损失函数对每个权重的偏导数,从而调整权重,使得网络的预测输出与真实输出之间…...
CS·GO搬砖流程详细版
说简单点,就是Steam买了然后BUFF上卖,或许大家都知道这点,但就是一些操作和细节问题没那么明白。我相信,你看完这篇文章以后,至少会有新的认知。 好吧,废话少说,直接上实操! 首先准…...
ElasticSearch系列(一)
一.了解ES、倒排索引、es的一些概念、安装es、kibana 二.DSL;索引库操作 三.Java RestClient:索引库操作 一、了解ES、倒排索引、es的一些概念、安装es、kibana kibana、logstash、beats Elasticserach 存储,计算 ,搜索数据 –…...
vue字符串的数字比较大小有问题
问题代码 this.money 9999 //支付金额this.balance 678 //余额if (this.money > this.balance) {this.$message(余额不足,请更换支付方式);}问题原因 this.money和 this.balance不是数值类型而是字符串类型 解决方案 使用parseFloat将变量转换成统一的类…...
Java:缓存:LinkedHashMap实现Lru
文章目录 Lru源码分析 LinkedHashMap维护一个LinkedHashMapEntry<K,V>的双向链表对LinkedHashMap的增删查操作,也会对链表进行相同的操作并改变链表的链接顺序小结使用方法应用总结Lru Least Recently Used,…...
Jetpack Compose 学习笔记(一)—— 快速上手
本篇主要是对 Jetpack Compose 有一个宏观上的了解。 1、Jetpack Compose 是什么与优势 Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API,可以帮助您简化并加快 Android 界面开发。 Compose 的优势&am…...
【大模型】7 天 AI 大模型学习
7 天 AI 大模型学习 Day 2 今天是 7 天AI 大模型学习的第二天 😄,今天我将会学习 Transformer 、Encoder-based and Decoder-Based LLMs 等 。如果有感兴趣的,就和我一起开始吧 ~ 课程链接 :2025年快速吃透AI大模型&am…...
JVM对象创建过程
1 类加载检查 jvm通过new指令开始创建对象jvm执行new指令时,首先通过指令参数从常量池中取到需要创建的类名检查该类是否被加载,解析,和初始化过如果没有,则执行类的加载过程new指令对应到java语言具体的操作为 new 关键字创建对象…...
OSPF - SPF算法简述
SPF全称最短路径树算法,相信学过数据结构朋友应该看起来很熟悉 在一个区域内的路由器都会产生描述自己网络连接信息的LSA,包括两种信息,有路由信息和拓扑信息,简单的来说拓扑信息就是我连着谁,路由信息就是链路的地址…...
[实用指南]如何将视频从iPhone传输到iPad
概括 将视频从 iPhone 传输到 iPad 时遇到问题?您可能知道一种方法,但不知道如何操作。此外,您要传输的视频越大,完成任务就越困难。那么如何将视频从 iPhone 传输到 iPad,特别是当您需要发送大视频文件时?…...
如何二次封装组件(vue3版本)
在开发 Vue 项目中我们一般使用第三方组件库进行开发,如 Element-Plus, 但是这些组件库提供的组件并不一定满足我们的需求,这时我们可以通过对组件库的组件进行二次封装,来满足我们特殊的需求。 对于封装组件有一个大原则就是我们应该尽量保…...
基于XGBoost算法的集成学习
目录 一、XGBoost原理1.1 提升方法(Boosting)1.2 提升决策树 (BDT)1.3 梯度提升决策树 (GBDT)1.4 极限梯度提升(XGBoost)1.4.1 XGBoost改进1.4.2 XGBoostcsklearn实现1.4.3 XGBoost回…...
数据库系列之分布式数据库下误删表怎么恢复?
数据的完整性是数据库可用性的基本功能,在实际应用数据库变更操作过程中可能因为误操作导致误删表或者truncate操作影响业务的正常访问。本文介绍了分布式数据库中在误删表场景下的数据恢复方案,并进行了对比。 1、数据库误删表恢复方案 应用数据的完整…...
Beamer-LaTeX学习(教程批注版)【1】
该文档总体由beamer-latex的教程而来,由耳东小白以自身学习路径整理。因其中要点基本按照教程的顺序和结构整理,故而不能称之为完全原创,但也不是翻译,更不是抄袭,是个人自学笔记和批注,其中添加了小白个人…...
数据挖掘——关联规则挖掘
数据挖掘——关联数据挖掘 关联数据挖掘关联规则关联规则挖掘问题:具体挖掘过程Apriori 产生关联规则 关联数据挖掘 关联分析用于发现隐藏在大型数据集中的令人感兴趣的联系,所发现的模式通常用关联规则或频繁项集的形式表示。 关联规则反映一个事物与…...
六种主流服务器的选择与使用
网络的运行离不开各种服务器,它们各司其职,为我们提供稳定的网络服务。本文带大家了解6种常见服务器类型。 服务器的六大种类 第一种:Web服务器 Web服务器是互联网的核心。当你打开一个网站,比如百度或淘宝,浏览器会…...
springboot3 redis 常用操作工具类
在 Spring Boot 3 中,操作 Redis 通常使用 Spring Data Redis 提供的工具类,如 RedisTemplate 和 StringRedisTemplate。以下是一个详细的 Redis 操作工具类的实现,涵盖了常用功能。 完整的 Redis 工具类 以下工具类可以实现基本的 Redis 操…...
OJ随机链表的复制题目分析
题目内容: 138. 随机链表的复制 - 力扣(LeetCode) 分析: 这道题目,第一眼感觉非常乱,这是正常的,但是我们经过仔细分析示例明白后,其实也并不是那么难。现在让我们一起来分析分析…...
如何不修改模型参数来强化大语言模型 (LLM) 能力?
前言 如果你对这篇文章感兴趣,可以点击「【访客必读 - 指引页】一文囊括主页内所有高质量博客」,查看完整博客分类与对应链接。 大语言模型 (Large Language Model, LLM, e.g. ChatGPT) 的参数量少则几十亿,多则上千亿,对其的训…...
Win11+WLS Ubuntu 鸿蒙开发环境搭建(二)
参考文章 penHarmony南向开发笔记(一)开发环境搭建 OpenHarmony(鸿蒙南向开发)——标准系统移植指南(一) OpenHarmony(鸿蒙南向开发)——小型系统芯片移植指南(二&…...
Qemu配置QXL显卡支持分辨率
默认情况下,创建的vm的视频RAM限制为16MB。在win操作系统中分辨率最高就只能调到1024x768。 <video><model typecirrus vram16384 heads1 primaryyes/><address typepci domain0x0000 bus0x00 slot0x02 function0x0/> </video>单单修改ram…...
Hack The Box-Starting Point系列Three
答案 How many TCP ports are open?(靶机开了几个TCP端口) 2What is the domain of the email address provided in the “Contact” section of the website?(网站的“CONTACT”部分提供的电子邮件地址的域是什么?)…...
人工智能-Python多任务编程-进程、线程
多任务的实现方式 多进程 多线程 1 多任务的两种表现形式 并发: 在一段时间内交替去执行多个任务(任务数大于CPU核心数)并行: 在一段时间内真正的同时一起执行多个任务(任务数小于等于CPU核心数) 2 进程 进程(Proc…...
智能工厂的设计软件 应用场景的一个例子:为AI聊天工具添加一个知识系统 之9 重新开始 之2
本文要点 对程序设计而言:前者基于一个自上而下的 分类体系--(生物遗传基因),后者者需要一个收集差异的自下而上的差异继承路径--(系统继承源流) 就是 广义和狭义 分类学。 共性对齐 和 差异收集 正是两者…...
Postman[7] 内置动态参数及自定义的动态参数
postman 内置动态参数和自定义的动态参数 1.内置动态参数 格式:{{$参数名}} 1.1时间戳 {{$timestamp}} //生成当前时间的时间戳 1.2随机整数 {{$randomint}} //生成0-1000之间的随机数 1.3GUID字符串 {{$guid}} //生成随机GUID字符串 2.自定义动态参数 格式…...
04-c++类和对象(下)
一、友元 前面学习的类中,只能通过该类的公共方法访问私有数据。而如果将某个函数设置为类的友元,那么这个函数就可以直接访问该类的私有数据,破坏了类的封装性,只在某些特定的情况下使用。 友元的分类:普通全局函数…...
《解密奖励函数:引导智能体走向最优策略》
在强化学习领域,奖励函数是核心要素,它决定了智能体如何学习和决策。设计一个恰当的奖励函数,能让智能体在复杂环境中不断探索、优化,最终实现最优策略。 奖励函数的重要性 奖励函数就像是一个引导者,它告诉智能体什…...
AF3 AtomAttentionEncoder类的init_pair_repr方法解读
AlphaFold3 的 AtomAttentionEncoder 类中,init_pair_repr 方法方法负责为原子之间的关系计算成对表示(pair representation),这是原子转变器(atom transformer)模型的关键组成部分,直接影响对蛋白质/分子相互作用的建模。 init_pair_repr源代码: def init_pair_repr(…...
VScode 格式化代码空格记录
点击 -> “文件” -> “首选项" -> “设置” -> 按下图操作: 怎么格式化代码空格,先看下: 保存代码后,这代码自动格式化发,如下图: 你可以试试看就即可...
28.Marshal.PtrToStringAnsi C#例子
//怎么说呢,这个代码Marshal的英文意思有将军,控制等等, //我的理解是类似于console控制台。 //然后后面这个Ansi是一种ASCII的扩展,还有其他编码方式可选 就是一个把后面的指针转化为字符串的一个代码 这是用法…...
Git的使用流程(详细教程)
目录 01.Git是什么? 1.1 Git简介 1.2 SVN与Git的最主要的区别 1.3 GIt主要特点 02.Git是干什么的? 2.1.Git概念汇总 2.2 工作区/暂存区/仓库 2.3 Git使用流程 03.Git的安装配置 3.1 Git的配置文件 3.2 配置-初始化用户 3.3 Git可视化…...
第R3周:RNN-心脏病预测
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 文章目录 一、前言二、代码流程1、导入包,设置GPU2、导入数据3、数据处理4、构建RNN模型5、编译模型6、模型训练7、模型评估 电脑环境:…...
clickhouse Cannot execute replicated DDL query, maximum retries exceeded报错解决
报错信息 在clickhouse中执行DDL命令对表进行改动时,出现报错Cannot execute replicated DDL query, maximum retries exceeded 解决方案 一、官方解决方案 官方说这是一个特定版本的bug,但是实际我自己用的22.9.34版本,也存在这个问题&a…...
【时时三省】(C语言基础)常见的动态内存错误
山不在高,有仙则名。水不在深,有龙则灵。 ----CSDN 时时三省 对NULL指针的解引用操作 示例: malloc申请空间的时候它可能会失败 比如我申请一块非常大的空间 那么空间可能就会开辟失败 正常的话要写一个if(p=&#x…...
【JVM】总结篇-字节码篇
字节码篇 Java虚拟机的生命周期 JVM的组成 Java虚拟机的体系结构 什么是Java虚拟机 虚拟机:指以软件的方式模拟具有完整硬件系统功能、运行在一个完全隔离环境中的完整计算机系统 ,是物理机的软件实现。常用的虚拟机有VMWare,Visual Box&…...
二十三种设计模式-抽象工厂模式
抽象工厂模式(Abstract Factory Pattern)是一种创建型设计模式,它提供了一种方式,用于创建一系列相关或相互依赖的对象,而不需要指定它们具体的类。这种模式主要用于系统需要独立于其产品的创建逻辑时,并且…...
【docker】Dockerfile 中使用宿主机代理的方式
在Dockerfile中配置代理主要有这几种方式,让我系统地整理一下: 构建参数方式(BUILD ARG) # 方式1:在Dockerfile顶部定义 ARG HTTP_PROXYhttp://proxy:7890 ARG HTTPS_PROXYhttp://proxy:7890# 方式2:在构…...
现代无线通信接收机架构:超外差、零中频与低中频的比较分析
写在前面:本博客是对三种接收机架构的学习笔记,仅供个人学习记录使用。内容主要是上网查阅的资料,以及个人的一些理解。如有错误的地方请指出! 文章目录 一、通信机基本架构 1、射频发射级的基本组成及完成功能2、射频接收级的基…...
CSS 图片廊:网页设计的艺术与技巧
CSS 图片廊:网页设计的艺术与技巧 引言 在网页设计中,图片廊是一个重要的组成部分,它能够以视觉吸引的方式展示图片集合,增强用户的浏览体验。CSS(层叠样式表)作为网页设计的主要语言之一,提供…...
Gemini和ChatGPT全面对比分析,有什么区别和优势?
当 AI 聊天机器人首次出现时,每个人都在竞相发布自己的足够好的第一版 AI 聊天机器人,很容易在 Gemini 与 ChatGPT 等应用程序之间进行比较。但随着 Google 和 OpenAI 不断添加新功能、模型和访问其聊天机器人的方式,差异变得不那么明显。 现…...
Ansys Discovery 中的网格划分方法:探索模式
本篇博客文章将介绍 Ansys Discovery 中可用于在探索模式下进行分析的网格划分方法。我们将在下一篇博客中介绍 Refine 模式下的网格划分技术。 了解 Discovery Explore 模式下的网格划分 网格划分是将几何模型划分为小单元以模拟系统在不同条件下的行为的过程。这是通过创建…...
前 5 名 IPhone 解锁工具/软件
设备已禁用并且您无法访问它?如果您无法通过密码解锁,尝试 iPhone 解锁软件可能是最好的解决方案。 虽然市场上有很多免费或付费的 iPhone 解锁工具,但您可能不知道它们之间的区别以及如何选择最适合您的工具。 本文将介绍 5 款iPhone 解锁…...
富士通 自动进纸 扫描仪 scan 按钮 触发设置
附赠光盘里的驱动和软件都先装好,然后3步, 1,控制面板,对着设备右键,详细设置,触发对应,选择stream capture软件。(差不多就这意思,懂的自然懂) 2ÿ…...
SpringCloud系列教程:微服务的未来 (五)枚举处理器、JSON处理器、分页插件实现
在现代 Java 开发中,我们常常需要处理各种通用的功能和需求,诸如枚举的处理、JSON 数据处理,以及分页查询等。这些功能虽然看似简单,但在实际开发中往往涉及到许多细节和优化。为了提高开发效率、减少重复代码的编写,我…...