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

Vue3中Setup概述和使用(三)

一、引入Setup

1、Person.Vue

与Vue3编写简单的App组件(二) 中的区别是:取消data、methods等方法,而是将数据和方法定义全部放进setup中。

<template><div class="person"><h1>姓名:{{name}}</h1><h1>年龄:{{age}}</h1><button :onclick="changeName">修改姓名</button><button :onclick="changeAge">修改年龄</button><button :onclick="showTel">查看电话</button></div></template><script lang="ts">export default {name: 'Person',setup() {console.log(this) //setup中的this是undefined,vue3中弱化了thislet name = "Maple" //变量还不是响应式,所以变量值变更并不会使页面发生同步变化let age = 28let tel = 13943232232function changeName() {//注意:这样修改,虽然name值确实修改了,但页面不会有变化(下同)name = "Kelly" //此时Kelly}function changeAge() {age += 1}function showTel() {alert(tel)}// 需要返回,template中才能够读取到数据return { name, age, tel, changeName, changeAge, showTel }}}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

2、App.Vue

<template><!-- 写html --><h1>我是Maple:</h1><div class="app"><Person /></div></template><script lang="ts">import Person from './components/Person.vue'// 写js或者tsexport default {name: 'App', //组件名components: { Person }}
</script><style>/* 写样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

3、页面效果

注意:此时`修改姓名`和`修改年龄`按钮并不会生效,因为数据还不是响应式的。

二、Setup语法糖

以上方式中,在Setup中定义的变量和方法需要return出去,才能够被模板引用,如果变量和方法过多,就会比较繁琐,由此引入setup语法糖

 Person.vue文件完整源码

<template><div class="person"><h1>姓名:{{name}}</h1><h1>年龄:{{age}}</h1><button :onclick="changeName">修改姓名</button><button :onclick="changeAge">修改年龄</button><button :onclick="showTel">查看电话</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">let name = "Maple"let age = 28let tel = 13943232232function changeName() {name = "Kelly"}function changeAge() {age += 1}function showTel() {alert(tel)}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

三、ref和reactive实现响应式数据

1、ref基本类型响应式数据使用

适用对象:基本数据类型,使用步骤如下:

(1) 引入ref

 import {ref} from 'vue'

(2) 使用ref修饰数据

let name = ref('Maple')

(3) 调用变量并修改数据

# 注意要加value,才能够获取变量(被包装之后的)对应的值
name.value == 'Maple'

Person.vue完整代码如下:

<template><div class="person"><h1>姓名:{{name}}</h1><h1>年龄:{{age}}</h1><button :onclick="changeName">修改姓名</button><button :onclick="changeAge">修改年龄</button><button :onclick="showTel">查看电话</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { ref } from 'vue'//2.然后使用reflet name = ref('Maple')let age = ref(28)let tel = 13943232232function changeName() {//3.注意要加value,才能够获取变量(被包装之后的)对应的值if (name.value == 'Maple') {name.value = 'Kelly'} else {name.value = 'Maple'}}function changeAge() {age.value += 1}function showTel() {alert(tel)}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

2、ref对象类型响应式数据使用

适用对象:ref同时支持对象类型的响应式

<template><div class="person"><h1>电脑信息:</h1><h1>电脑品牌:{{computer.brand}}</h1><h1>电脑价格:{{computer.price}}</h1><h1>学生信息:</h1><ul><li v-for="item in students" :key="item.name">{{item.age}}</li></ul><!-- 修改电脑价格 --><button :onclick="changePrice">修改电脑价格</button><!-- 修改第一个学生的年龄 --><button :onclick="changeAge">修改学生年龄</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { ref } from 'vue'//2.然后使用reflet computer = ref({ brand: 'hp', price: 5500 })let students = ref([{ name: 'Maple', age: 30 },{ name: 'Kelly', age: 35 },{ name: 'Max', age: 12 }])function changePrice() {//需要通过value取值computer.value.price = 5000}function changeAge() {//需要通过value取值students.value[0].age = 44}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

3、reactive使用

适用对象:只支持对象类型数据,使用步骤如下:

(1) 引入reactive

import { reactive } from 'vue'

(2) 使用reactive修饰数据

let computer = reactive({ brand: 'hp', price: 5500 })

(3) 修改数据

 computer.price = 5000

  Person.vue文件完整源码

<template><div class="person"><h1>电脑品牌:{{computer.brand}}</h1><h1>电脑价格:{{computer.price}}</h1><ul><li v-for="item in students" :key="item.name">{{item.age}}</li></ul><!-- 修改电脑价格 --><button :onclick="changePrice">修改电脑价格</button><!-- 修改第一个学生的年龄 --><button :onclick="changeAge">修改学生年龄</button><!-- 修改歌手姓名 --><button :onclick="ChangeSinger">修改歌手姓名</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { reactive } from 'vue'//2.然后使用reflet computer = reactive({ brand: 'hp', price: 5500 })let students = reactive([{ name: 'Maple', age: 30 },{ name: 'Kelly', age: 35 },{ name: 'Max', age: 12 }])let singer = {a: {b: {c: 'Jay'}}}function changePrice() {computer.price = 5000}function changeAge() {students[0].age = 44}function ChangeSinger() {singer.a.b.c = '毛不易'}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

4、ref和reactive的区别

(1)ref支持基本类型对象类型数据;reactive仅支持对象类型数据

(2)ref获取变量值需要使用.value,而reactive直接通过变量获取

(3)针对对象的一次性修改,两者方式不一样,具体可参照如下案例:

<template><div class="person"><h1>电脑信息:</h1><h1>电脑品牌:{{computer.brand}}</h1><h1>电脑价格:{{computer.price}}</h1><h1>学生信息:</h1><ul><li v-for="item in students" :key="item.name">{{item.name}}:{{item.age}}</li></ul><!-- 修改电脑 --><button :onclick="changeComputer">修改电脑</button><!-- 修改学生 --><button :onclick="changeStudents">修改学生</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { ref, reactive } from 'vue'//2.然后使用ref和reactivelet computer = ref({ brand: 'hp', price: 5500 })let students = reactive([{ name: 'Maple', age: 30 },{ name: 'Kelly', age: 35 },{ name: 'Max', age: 12 }])function changeComputer() {//ref修饰对象,可以通过以下方式直接替换computercomputer.value = { brand: 'HTC', price: 600 }}function changeStudents() {// students = {name:'Jacky',age:50} //这么写页面不更新的// students = reactive({name:'Jacky',age:50}) //这么写页面不更新的,因为此时students已经是一个新对象// reactive 修饰对象,下面这个写法页面可以实现更新Object.assign(students, [{ name: 'Jacky', age: 50 }, { name: 'Kitty', age: 20 },{ name: 'Lily', age: 22 }])}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

5、to_refs和to_ref

<template><div class="person"><h1>电脑信息:</h1><h1>电脑品牌:{{computer.brand}}</h1><h1>电脑价格:{{computer.price}}</h1><h1>个体信息</h1><h1>姓名:{{person.name}}</h1><h1>年龄{{person.age}}</h1><!-- 修改电脑 --><button :onclick="changeComputer">修改电脑</button><!-- 修改姓名 --><button :onclick="changeName">修改学生姓名</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">//1. 首先从vue引入refimport { reactive, toRefs, toRef } from 'vue'//2.然后使用reactivelet computer = reactive({ brand: 'hp', price: 5500 })// 使用toRefs从computer这个响应式对象中,解构出brand、price,且brand和price依然是响应式的// brand和price的值是ref类型,其value值指向的是computer.brand和computer.pricelet { brand, price } = toRefs(computer)let person = reactive({ name: 'maple', age: 30 })// 使用toRef从person这个响应式对象中,解构出name,且name依然是响应式的let name = toRef(person, 'name')// 修改电脑信息function changeComputer() {brand.value = 'HTC'price.value = '8000'}// 修改个人姓名function changeName() {name.value = 'Avery'}
</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 50px;}
</style>

相关文章:

Vue3中Setup概述和使用(三)

一、引入Setup 1、Person.Vue 与Vue3编写简单的App组件(二) 中的区别是&#xff1a;取消data、methods等方法,而是将数据和方法定义全部放进setup中。 <template><div class"person"><h1>姓名:{{name}}</h1><h1>年龄:{{age}}</h…...

hexo 博客搭建以及踩雷总结

搭建时的坑 文章置顶 安装一下这个依赖 npm install hexo-generator-topindex --save然后再文章的上面设置 top: number&#xff0c;数字越大&#xff0c;权重越大&#xff0c;也就是越靠顶部 hexo 每次推送 nginx 都访问不到 宝塔自带的 nginx 的 config 里默认的角色是 …...

WordPress后台编辑个人资料页面直接修改用户名插件Change Username

前面跟大家介绍了『如何修改WordPress后台管理员用户名&#xff1f;推荐2种简单方法』一文&#xff0c;但是对于新站长或者有很多用户的站长来说&#xff0c;操作有点复杂&#xff0c;所以今天向大家推荐一款可以直接在WordPress后台编辑个人&#xff08;用户&#xff09;资料页…...

ssm+vue的医药垃圾分类管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的医药垃圾分类管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结…...

LLM大模型基本概念,及其相关问题汇总(1)

什么是涌现&#xff1f;为什么会出现涌现&#xff1f; "大模型的涌现能力"这个概念可能是指大型神经网络模型在某些任务上表现出的出乎意料的能力&#xff0c;超出了人们的预期。出现的原因从结论上来看&#xff0c;是模型不够好&#xff0c;导致的原因主要是&#…...

【已解决】pt文件转onnx后再转rknn时得到推理图片出现大量锚框变花屏

前言 环境介绍&#xff1a; 1.编译环境 Ubuntu 18.04.5 LTS 2.RKNN版本 py3.8-rknn2-1.4.0 3.单板 迅为itop-3568开发板 一、现象 采用yolov5训练并将pt转换为onnx&#xff0c;再将onnx采用py3.8-rknn2-1.4.0推理转换为rknn&#xff0c;rknn模型能正常转换&#xff0c;…...

DevOps文章之 操作手册用户使用说明书

前言 最近主导了几个项目操作手册的编写。有新开发的项目&#xff0c;要重新编写操作手册&#xff1b;有中途接手别的项目&#xff0c;后来功能迭代&#xff0c;需要更新原操作手册&#xff1b;有客户对操作手册有意见&#xff0c;需要调整&#xff1b;零零散散写了数万字的手…...

【RT-DETR进阶实战】利用RT-DETR进行视频划定区域目标统计计数

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 Hello,各位读者,最近会给大家发一些进阶实战的讲解,如何利用RT-DETR现有的一些功能进行一些实战, 让我们不仅会改进RT-DETR,也能够利用RT-DETR去做一些简单的小工作,后面我也会将这些功能利用PyQt或者是…...

2.11学习总结

有效点对https://www.acwing.com/problem/content/description/5472/ 给定一个 n&#xfffd; 个节点的无向树&#xff0c;节点编号 1∼n1∼&#xfffd;。 树上有两个不同的特殊点 x,y&#xfffd;,&#xfffd;&#xff0c;对于树中的每一个点对 (u,v)(u≠v)(&#xfffd;,…...

以谷歌浏览器为例 讲述 JavaScript 断点调试操作用法

今天来说个比较实用的东西 用浏览器开发者工具 对 javaScript代码进行调试 我们先创建一个index.html 编写代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&…...

Vue前端框架--Vue工程项目问题总结{脚手架 Vue-cli}

Vue脚手架部署问题总结 我所遇到的一共两大问题 只有先执行npm install之后 才能run serve 否则会报错 vue-cli-serve不是内部或者外部的命令&#xff0c;也不是可运行的程序或者批处理文件的错误 1. 运行npm install会报错 2. 运行npm run serve报错 nodejs官网为 https://no…...

Unity2D 学习笔记 0.Unity需要记住的常用知识

Unity2D 学习笔记 0.Unity需要记住的常用知识 前言调整Project SettingTilemap相关&#xff08;创建地图块&#xff09;C#脚本相关程序运行函数private void Awake()void Start()void Update() Collider2D碰撞检测private void OnTriggerStay2D(Collider2D player)private void…...

vue3-应用规模化-单文件组件

单文件组件概念 Vue 的单文件组件 (即 *.vue 文件&#xff0c;英文 Single-File Component&#xff0c;简称 SFC) 是一种特殊的文件格式&#xff0c;使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例&#xff1a; <script setup…...

Redis -- 渐进式遍历

家&#xff0c;是心的方向。不论走多远&#xff0c;总有一盏灯为你留着。桌上的碗筷多了几双&#xff0c;笑声也多了几分温暖。家人团聚&#xff0c;是最美的风景线。时间&#xff1a;2024年 2月 8日 12:51:20 目录 前言 语法 示例 前言 试想一个场景,那就是在key非常多的…...

使用 C++23 从零实现 RISC-V 模拟器(3):指令解析

指令解析 这章内容进一解析更多的指令&#xff0c;此外将解析指令的过程拆分为一个单独的类&#xff0c;采用表格驱动的方式&#xff0c;将数据和逻辑分离&#xff0c;降低了 if else 嵌套层数过多。 这部分依旧改动不多&#xff0c;只增加了七个指令。此外代码中细碎的变动没…...

CSS Selector—选择方法,和html自动——异步社区的爬取(动态网页)——爬虫(get和post的区别)

这里先说一下GET请求和POST请求&#xff1a; post我们平时是要加data的也就是信息&#xff0c;你会发现我们平时百度之类的 搜索都是post请求 get我们带的是params&#xff0c;是发送我们指定的内容。 要注意是get和post请求&#xff01;&#xff01;&#xff01; 先说一下异…...

C语言 服务器编程-日志系统

日志系统的实现 引言最简单的日志类 demo按天日志分类和超行日志分类日志信息分级同步和异步两种写入方式 引言 日志系统是通过文件来记录项目的 调试信息&#xff0c;运行状态&#xff0c;访问记录&#xff0c;产生的警告和错误的一个系统&#xff0c;是项目中非常重要的一部…...

HarmonyOS 状态管理装饰器 Observed与ObjectLink 处理嵌套对象/对象数组 结构双向绑定

本文 我们还是来说 两个 harmonyos 状态管理的装饰器 Observed与ObjectLink 他们是用于 嵌套对象 或者 以对象类型为数组元素 的数据结构 做双向同步的 之前 我们说过的 state和link 都无法捕捉到 这两种数据内部结构的变化 这里 我们模拟一个类数据结构 class Person{name:…...

windows中的apache改成手动启动的操作步骤

使用cmd解决安装之后开机自启的问题 services.msc 0. 这个命令是打开本地服务找到apache的服务名称 2 .通过服务名称去查看服务的状态 sc query apacheapache3.附加上关掉和启动的命令&#xff08;换成是你的服务名称&#xff09; 关掉命令 sc stop apacheapache启动命令 …...

Intellij Idea的数据库工具 DataGrip

DataGrip DataGrip&#xff1a; IDEA自带&#xff0c;非常好用。智能提示很强大&#xff0c;快捷键跟IDEA自身一致。 如果下载不了 DataGrip&#xff0c;也可以直接用 IDEA 自带的。 常用的快捷键 alt8&#xff1a; 打开数据库Service ctrlshiftF10&#xff1a;打开常用的数…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...