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 })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/66362.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++单例模式跨DLL调用问题梳理

问题案例&#xff1a; 假设有这样一个单例模式的代码 //test.h header class Test { public:static Test &instance() {static Test ins;return ins;}void foo(); };void testFoo();//test.cpp source #include "test.h"void Test::foo() {printf("%p\n&q…

ESP32-S3系统级芯片支持烧录的编程语言

ESP32-S3作为一款功能强大的MCU系统级芯片&#xff0c;支持多种编程语言的烧录和开发。以下是对ESP32-S3支持的主要编程语言的详细介绍&#xff1a; 一、C/C ESP-IDF框架&#xff1a;ESP32-S3支持使用乐鑫官方的ESP-IDF&#xff08;Espressif IoT Development Framework&…

Redis 数据库源码分析

Redis 数据库源码分析 我们都知道Redis是一个 <key,value> 的键值数据库&#xff0c;其实也就是一个 Map。如果让我来实现这样一个 Map&#xff0c;我肯定是用数组&#xff0c;当一个 key 来的时候&#xff0c;首先进行 hash 运算&#xff0c;接着对数据的 length 取余&…

我的nvim的init.lua配置

nvim的配置文件路径在&#xff5e;/.config/nvim路径下&#xff1a; 一、目录如下&#xff1a; coc-settings.json文件是配置代码片段路径的文件init.lua配置文件的启动脚本lua/config.lua 全局配置文件lua/keymaps.lua 快捷键映射键文件lua/plugins.lua 插件的安装和配置文件…

权限掩码umask

1 、 设置新建文件或目录的默认权限 在 Linux 系统中&#xff0c;当用户创建一个新的文件或目录时&#xff0c;系统都会为新建的文件或目录分配默认的权限&#xff0c;该默认权限与umask 值有关&#xff0c;其具体关系是&#xff1a; 新建文件的默认权限 0666-umask 值 新建…

Kubernetes Gateway API-5-后端协议和网关基础设置标签

1 后端协议 自 v1.2.0 开始支持 并非所有网关API实现都支持自动协议选择。在某些情况下&#xff0c;协议在没有明确选择加入的情况下被禁用。 当 Route 的后端引用Kubernetes Service 时&#xff0c;应用程序开发人员可以使用 ServicePort appProtocol 字段指定协议。 例如…

C++语言的网络编程

C语言的网络编程 引言 随着互联网的迅猛发展&#xff0c;网络编程已成为软件开发的重要组成部分。C作为一种高效的编程语言&#xff0c;因其出色的性能和灵活性&#xff0c;广泛应用于网络编程领域。本文将介绍C网络编程的基本概念、常用的网络库&#xff0c;以及一些具体的应…

考试座位号(PTA)C语言

每个 PAT 考生在参加考试时都会被分配两个座位号&#xff0c;一个是试机座位&#xff0c;一个是考试座位。正常情况下&#xff0c;考生在入场时先得到试机座位号码&#xff0c;入座进入试机状态后&#xff0c;系统会显示该考生的考试座位号码&#xff0c;考试时考生需要换到考试…

宝安湾区之光附近的钓鱼点

工作日的午休我经常在公司附近骑行&#xff0c;有时候也会骑行到宝安的湾区之光。但是我最感兴趣的除了湾区之光摩天轮&#xff0c;还有雷打不动的快乐钓鱼佬。 上图红框区域的河岸每天都会出现零零散散的快乐钓鱼佬&#xff0c;他们好像都有自己的钓鱼窝点。我发现来这里钓鱼也…

GNU链接器简介-3

GNU链接器简介-3 1 SECTIONS Command1.1 Output Section Description2.2 Output Section Name1.3 Output Section Address1.4 Input Section Description1.4.1 Input Section Basics1.4.2 Input Section Wildcard Patterns1.4.3 Input Section for Common Symbols1.4.4 Input S…

【练习】PAT 乙 1022 D进制的A+B

题目 输入两个非负10进制整数A和B(<2^30-1)&#xff0c;输出AB的D (1 < D < 10)进制数。 输入格式 输入在一行中依次给出3个整数A、B和D。 输出格式 输出AB的D进制数。 输入样例 123 456 8 输出样例 1103 来源&#xff1a;PAT 乙 1022 D进制的AB ——————————…

音视频-----RTSP协议 音视频编解码

流媒体协议详解&#xff1a;RTSP、RTP、RTCP、SIP、SDP、RTMP、WebRTC、WebSocket-CSDN博客 上文讲解比较清楚 多媒体编解码基础知识 一文详解WebRTC、RTSP、RTMP、SRT-腾讯云开发者社区-腾讯云 流媒体协议简介 &#xff08;整理&总结&#xff09;-CSDN博客 RTP :(Real-…

实时数仓与离线数仓的全面对比

在大数据和数据仓库的领域&#xff0c;实时数仓和离线数仓是两种常见的架构。它们分别适用于不同的业务场景&#xff0c;具有不同的技术特点、实现方式和使用场景。 下面将从底层原理、架构、技术实现、数据处理方式等多个方面对这两者进行详细对比。 1. 基本定义 实时数仓&…

家教老师预约平台小程序系统开发方案

家教老师预约平台小程序系统将连接学生/家长与家教老师&#xff0c;提供一站式的家教服务预约体验。 一、用户需求分析1、家教老师&#xff1a;希望获得更多的学生资源&#xff0c;通过平台展示自己的教学特长和经验&#xff0c;管理个人日程&#xff0c;接收并确认预约请求&a…

头歌python实验:网络安全应用实践-恶意流量检测

第1关:re 库的使用 本关任务:编写一个能正则匹配出 ip 地址的小程序。 re 的主要功能函数 常用的功能函数包括: compile、search、match、split、findall(finditer)、sub(subn)。 re.search 函数 re.search 扫描整个字符串并返回第一个成功的匹配。 函数语法: re…

第1章:Go语言入门

第1章&#xff1a;Go语言入门 1. Go语言概述 1.1 语言历史 Go语言&#xff08;Golang&#xff09;是由Google公司于2007年开始开发&#xff0c;并于2009年正式开源的编程语言。其主要创始人包括&#xff1a; Rob Pike&#xff08;Unix和Plan 9操作系统的创始人之一&#xf…

Linux 系统安装 NCBI Blast + A Quick Guide

前言 NCBI BLAST&#xff08;Basic Local Alignment Search Tool&#xff09;是由美国国家生物技术信息中心&#xff08;NCBI&#xff09;开发的一个深受生物信息学研究者青睐的基因序列比对工具。作为生物序列信息比对的行业标准&#xff0c;BLAST可用于分析核酸&#xff08;…

嵌入式科普(26)为什么heap通常8字节对齐

目录 一、概述 二、newlibc heap 2.1 stm32cubeide .ld heap 2.2 e2studio .ld heap 三、glibc源码 3.1 Ubuntu c heap 四、总结 一、概述 结论&#xff1a;在嵌入式c语言中&#xff0c;heap通常8字节对齐 本文主要分析这个问题的分析过程 二、newlibc heap newlibc…

JVM调优,参数在哪里设置的?

JVM调优&#xff0c;参数在哪里设置的&#xff1f; 在Java应用程序中&#xff0c;JVM&#xff08;Java Virtual Machine&#xff09;的调优通常通过设置JVM启动参数来实现。这些参数可以控制JVM的内存分配、垃圾回收策略、线程管理、性能优化等方面。 1. JVM参数的位置 JVM参…

nginx学习之路-nginx配置https服务器

文章目录 1. 生成证书2. 配置证书1. 拷贝证书文件2. 修改conf/nginx.conf文件内容 3. 查看效果1. 重载配置2. 访问 1. 生成证书 在linux系统下执行&#xff0c;使用openssl命令。&#xff08;windows环境也可以使用cmder&#xff09; # 1. 生成私钥 server2025.key(无密码保护…