Vue3_基础使用_1

这节主要介绍:  vue2与vue3的区别,创建响应式的数据,setup语法糖的使用,watch监听,及vue3创建项目。

vue2的选项式与vue3的组合式区别:

选项式:vue2中数据与方法计算属性等等,针对一个数据的处理在不同的配置中,当业务复杂时很难维护,修改起来也不好查找。

vue3的组合式:将针对数据的方法计算属性等等放在一起管理,利于管理,方便查找。

0.创建项目,到文件夹cmd 输入:  npm create vue@latest

    然后输入一个项目名称,然后除了TypeScript为YES其他都选NO到最后会生成一个项目。

代码:

1.在其中定义:变量,数组,对象,方法    html中就能直接{{}}使用

<script  lang="ts" setup>
......
</script>

2.引用说明

ref:添加响应式的   简单变量  和   对象,使用需要加 .value  可以借助插件自动补全.value

reactive:只是给对象添加响应式,使用不用加.value

watch:引入监听

watchEffect:引入更高级的监听,不需要告诉他监视什么,他自己根据你的代码去识别。

import {ref,reactive,watch,watchEffect} from 'vue'

3.使用ref创建一个可以使用的简单的变量。

//html 中直接{{user}}
<script  lang="ts" setup>//引入import {ref,reactive} from 'vue'let user=ref("php");let pwd=ref("123456");
</script>

留意lang="ts" setup

4.使用reactive创建一个可以使用的简单的对象。

//html中{{msg.id}}
<script  lang="ts" setup>//进入import {ref,reactive} from 'vue'let msg=reactive({id:1,StationName:"珠海北"});
</script>

5.当中可以创建计算属性,方法,监视等等

<script  lang="ts" setup>//引入方法import {ref,reactive,watch,watchEffect} from 'vue'//声明响应式数据let info=ref({name:"evan.pei",age:30,skill:["vue","c#"]});//方法function updateAge(){info.value.age++;}//watch,对象属性监听用方法()=>...watch(()=>info.value.age,(n)=>{console.log("age变成了",n)});//watchEffect进行监听,他会自动去代码块中识别哪些要监听watchEffect(()=>{if(info.value.age>=35)info.value.name="EvanPei";});
</script>

6.计算属性

//计算属性
import {computed} from 'vue'
let name=computed(()=>{return name+"~";})
//toRefs:结构化赋值后可以直接用 let{name,age}=toRefs(person)将大括号中的变量转为ref的。

7.停止监视     接收wacth用于停止,deep:true深度监视对象里面全部都监视

//监视 watch
import {watch,watchEffect} from 'vue'
const stopWatch=watch(sum,(newV,oldV)=>{ ...逻辑if(newV>=10)stopWatch();//停止监视
},
{deep:true,//深度监视 immediate:true//立即监视
})

8.其他

//因为reactive不能直接替换整个对象,需要借助Object.assign
//这个相当于把对象的每个值赋值一遍而不是直接替换对象
Object.assign(person,{...});
//监视对象中的某一个属性,或者是对象(如需深度监视加deep:true)
watch(()=>{return person.name},(n,o)=>{...})
//同时监视多个
watch([()=>person.name,()=>person.car.c1],()=>{...})
//watchEffect监视,不需要指定监视谁它自己根据你写的逻辑去分析
watchEffect(()=>{...})//直接写逻辑

9.插件:可以设置name,自动加.value

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

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

相关文章

TryHackMe-Valley

靶场介绍 Boot the box and find a way in to escalate all the way to root! 启动盒子&#xff0c;找到一种方法&#xff0c;一路升级到root&#xff01; 信息收集&端口利用 使用nmap对靶机进行扫描 nmap 10.10.138.189开放22、80和37370端口&#xff0c;先访问80端口查…

Facebook未来展望:社交媒体的下一个篇章

社交媒体一直是连接人与人之间的纽带&#xff0c;而Facebook则一直在推动这一领域的发展。随着科技不断演进和社会需求的不断变迁&#xff0c;Facebook正积极筹谋社交媒体的下一个篇章。本文将深入剖析Facebook的未来展望&#xff0c;探讨其在社交媒体领域所迎接的新时代。 1. …

【开源】SpringBoot框架开发农村物流配送系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统登录、注册界面2.2 系统功能2.2.1 快递信息管理&#xff1a;2.2.2 位置信息管理&#xff1a;2.2.3 配送人员分配&#xff1a;2.2.4 路线规划&#xff1a;2.2.5 个人中心&#xff1a;2.2.6 退换快递处理&#xff1a;…

【c语言】strcpy()和strncpy():字符串复制详解

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;c语言 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&a…

数据库问题排查与常用设置

1.数据库问题 1.1数据库磁盘满了 mysql57表现1: 插入数据或者更新数据可能报错 The table xxx is full" 报错示例: { "timestamp": 1706766474768, "status": 500, "error": "Internal Server Error", "exception&q…

TryHackMe-File Inclusion练习

本文相关的TryHackMe实验房间链接&#xff1a;TryHackMe | Why Subscribe 路径遍历(目录遍历) LocationDescription/etc/issue包含要在登录提示之前打印的消息或系统标识。/etc/profile控制系统范围的默认变量&#xff0c;例如导出&#xff08;Export&#xff09;变量、文件创…

fastadmin添加活动二维码图片,扫码可以直接跳转到该活动

一&#xff0c;在controll重写add方法 /*** 添加*/ public function add() {if ($this->request->isPost()) {$params $this->request->post("row/a");if ($params) {$params $this->preExcludeFields($params);if ($this->dataLimit &&…

Kotlin 协程1:深入理解withContext

Kotlin 协程1&#xff1a;深入理解withContext 引言 在现代编程中&#xff0c;异步编程已经变得非常重要。在 Kotlin 中&#xff0c;协程提供了一种优雅和高效的方式来处理异步编程和并发。在这篇文章中&#xff0c;我们将深入探讨 Kotlin 协程中的一个重要函数&#xff1a;wi…

实习记录——第十天

今天啥也不想说了&#xff0c;ctf里面还有道题目还没做&#xff0c;这里就不写了&#xff0c;把日报奉上&#xff0c;懂得都懂&#xff1a; 2.2日总结&#xff1a; 早上对xx银行的招聘网站做了渗透测试&#xff0c;对招聘网点赞处做重放看是否会多次点赞&#xff0c;对收藏处考…

关于sql关键字及敏感数据脱敏

数据脱敏相关 数据脱敏数字类型数据脱敏sql关键字脱敏 数据脱敏 数据脱敏是经常会遇到的需求&#xff0c;很常见。 尤其是一些客户数据&#xff0c;如身份证号、手机号码等。 脱敏规则也不尽相同&#xff0c;这里列举两种&#xff0c;作为参考吧。 数字类型数据脱敏 近期刚好…

【JAVA】守护线程是什么?

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 正文 我的其他博客 正文 在计算机编程中&#xff0c;守护线程&#xff08;daemon thread&#xff09;是一种在程序运行时在后台提供服务的线程…

2024021期传足14场胜负前瞻

2024021期赛事由亚洲杯2场、英超5场&#xff0c;德甲6场、非洲杯1场组成。售止时间为2月3日&#xff08;周六&#xff09;19点00分&#xff0c;敬请留意&#xff1a; 本期1.5以下赔率3场&#xff0c;1.5-2.0赔率3场&#xff0c;其他场次基本皆是平半盘、平盘。本期14场整体难度…

【详细教程】Kubernetes集群部署:使用kubeadm创建集群

文章目录 一、虚拟机准备&#xff08;一&#xff09;主机基本配置&#xff08;二&#xff09;安装docker&#xff08;三&#xff09;配置cri-docker环境&#xff08;四&#xff09;安装kubeadm、kubelet、kubectl&#xff08;五&#xff09;克隆主机 二、环境配置工作&#xff…

Python 3 中,使用 Memcached

在 Python 3 中&#xff0c;使用 Memcached&#xff0c;一个高性能的分布式内存对象缓存系统&#xff0c;可以通过多个第三方库来实现。这些库允许 Python 应用程序与 Memcached 服务器进行通信&#xff0c;从而缓存数据以加快应用程序的响应速度和提高效率。最常用的库之一是 …

CDN高防IP:技术解析与相关问题解答

在使用CDN高防IP技术的过程中&#xff0c;可能会遇到一些问题。下面是一些常见问题和相应的解答&#xff0c;希望能帮助读者更好地了解和使用CDN高防IP技术。 问题一&#xff1a;什么是CDN高防IP技术&#xff1f; 解答&#xff1a;CDN高防IP技术是一种通过将网站流量分散到多…

LeetCode:138. 随机链表的复制之如何有效copy

自己复制的话&#xff0c;很容易写出来一个时间复杂度O&#xff08;n ^ 2&#xff09; 空O&#xff08;n&#xff09;的做法 我们可以参考基因的复制&#xff0c; 目录 题目&#xff1a; 实现思路&#xff08;基因复制式的copy&#xff09;&#xff1a; 官方快慢指针解法&…

R语言学习case6:ggplot基础画图(Scatter散点图)

step1: 导入ggplot2库文件 library(ggplot2)step2&#xff1a;带入自带的iris数据集 iris <- datasets::irisstep3&#xff1a;查看数据信息 dim(iris)维度为 [150,5] head(iris)查看数据前6行的信息 step4&#xff1a;利用ggplot工具包绘图 plot1 <- ggplot(iris…

解决WARNING: IPv4 forwarding is disabled. Networking will not work的具体操作步骤

IPv4转发禁用警告&#xff1a;网络无法正常工作 在使用网络连接的过程中&#xff0c;我们可能遇到警告消息“WARNING: IPv4 forwarding is disabled. Networking will not work”&#xff08;警告&#xff1a;IPv4转发已禁用&#xff0c;网络将无法正常工作&#xff09;。这个…

【sentinel流量卫兵搭建与微服务整合】

sentinel流量卫兵搭建与微服务整合 搭建sentinel dashboard控制台微服务整合 搭建sentinel dashboard控制台 1、下载 官网链接 由于官网github网络原因&#xff0c;导致长时间下载失败。 网盘链接 网盘提取码&#xff1a;dwgj 2、运行 将下载jar包放在任意非中文、不包含特殊…

Mac如何设置一位数密码?

一、问题 Mac如何设置一位数密码&#xff1f; 二、解答 1、打开终端 2、清除全局账户策略 sudo pwpolicy -clearaccountpolicies 输入开机密码&#xff0c;这里是看不见的&#xff0c;输入完回车即可 3、重新设置密码 &#xff08;1&#xff09;打开设置-->用户和群组…