Vue3速成

文章目录

  • day 1
      • 1. 创建vue3工程
      • 3. 响应式数据
      • 4. 计算属性
  • day 2
      • 5. watch 监视
      • 6. watchEffect
      • 7. 标签的`ref`属性
      • 8. 回顾TS中的接口_泛型_自定义类型

day 1

1. 创建vue3工程

相关代码如下:

## 创建vue工程
npm create vue@lastest## 安装node_modules
npm install // npm i

创建工程完毕之后,进入文件夹可以发现有如下文件,下图是文件介绍:

入口文件介绍:

这里main.ts是与index.html建立联系的;

通过.mount('#app')这样 main.ts就与index.html建立起了联系;

其中main.ts的代码格式如下:

<template><div><h1>你好</h1></div>
</template><script setup lang="ts">// js或者ts
</script><style scoped>/* 样式 */
</style>

App.vue的代码格式如下:

<template><div class="app"><h1>你好</h1></div>
</template><script setup lang="ts">// js或者ts
</script><style scoped>/* 样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

网页调试vue可以在chrome应用商店search vue.js devtools下载安装就好;

你好

### 2. 选项式API和组合式API

感觉vue2和vue3的主要不同就在于vue文件中script部分;其中vue2是选项式OptionsAPI的,vue3是组合式Composition的;

选项式API相关代码如下

注意,这里并没有setup

<script lang="ts">export default {// 定义组件名字name: 'Person',// 定义数据data(){return {name: '张三',age: 18,tel: '138888888'}},//  定义方法methods:{changeName(){this.name = 'zhang-san'},changeAge(){this.age += 1},showTel(){alert(this.tel)}},}
</script>

组合式相关代码如下

注意,这里的setup比beforecreate执行得还要早,setup的返回值也可以是渲染函数,data,method,setup可以同时存在,setup不可以读取data中的数据,反之则可以,因为setup是执行得最早的;

<script lang="ts">export default {name: 'Person',setup(){// 数据let name = '张三' // 此时name,age,tel 不是响应式的    应该改为ref或者reactivelet age = 18    // 此时name,age,tel 不是响应式的  应该改为ref或者reactivelet tel = '138888888'   // 此时name,age,tel 不是响应式的  应该改为ref或者reactive// 方法function changeName(){name = 'zhang-san'}function changeAge(){age += 1}function showTel(){alert(tel)}// 把数据和方法交出去return {name, age, changeAge, changeName, showTel}}}
</script>

setup语法糖简化后代码如下:

<script lang="ts">export default {name: 'Person',}
</script><script setup lang="ts">// 数据let name = '张三' // 此时name,age,tel 不是响应式的    应该改为ref或者reactivelet age = 18    // 此时name,age,tel 不是响应式的  应该改为ref或者reactivelet tel = '138888888'   // 此时name,age,tel 不是响应式的  应该改为ref或者reactive// 方法function changeName(){name = 'zhang-san'}function changeAge(){age += 1}function showTel(){alert(tel)}// 此时不需要return 自动提交
</script>

3. 响应式数据

响应式数据创建有两种方法,一种是ref,一种是reactive

ref定义基本类型的数据

使用的相关代码如下:

<template><div class="app"><h2>姓名:{{ name }}</h2> // 利用大括号包起来的是不需要.value的<h2>年龄:{{ age }}</h2> // 利用大括号包起来的是不需要.value的<button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script setup lang="ts">import {ref} from 'vue'let name = ref('张三')let age = ref(18)   let tel = ref('138888888')// 在ref包裹住后,需要操作值都需要.valuefunction changeName(){name.value = 'zhang-san'}function changeAge(){age.value += 1}function showTel(){alert(tel.value)}

这里值用ref包裹起来之后,变量会变成一个RefImpl类的数据,这时要修改值直接对变量操作是无意义的,我们需要对.value进行操作;这里要注意的是,ref也可以定义对象类的响应式数据,实现原理是先用ref包裹,再用reactive包裹,即取值还是需要用value

reactive定义对象类型的数据

使用的相关代码如下:

<template><div class="app"><h2>姓名:{{ student.name }}</h2><h2>年龄:{{ student.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button></div>
</template><script lang="ts">export default {name: 'Person',}
</script><script setup lang="ts">import {reactive} from 'vue'let student = reactive({name:'张三', age:18})function changeName(){student.name = 'zhang-san'}function changeAge(){student.age += 1}</script><style scoped>/* 样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 10px;}
</style>

reactive包起来后,对象变成了一个Proxy的对象,原对象在Proxy里面的target中;这里的reactive是深层次的,只能定义对象类型的响应式数据;

refreactive的对比

这里要注意的是,重新分配reactive的对象时,使用Object.assign,但是如果是利用ref定义的对象类数据,我们是可以直接进行替换的;

对响应式数据进行解构,toReftoRefs

let person = reactive({name: '张三',age: 18
})let {name, age} = person
// let name = person.name
// let age = person.agelet {name, age} = toRefs(person) //把reactive对象里面的每一组对象转化为ref
// let name = toRef(person, 'name')
// let age = toRef(person, 'age')

4. 计算属性

v-bind 是 单向绑定,数据流向页面;v-model 是 双向绑定,页面也可以流向数据;

计算属性 computed 是只要响应式变量出现了变化,就随之变化;

使用例子如下:

<template><div class="app">姓名:<input type="text" v-model="name"> <br>年龄:<input type="text" v-model="age"> <br>information: {{ information }}</div>
</template><script lang="ts">export default {name: 'Person',}
</script><script setup lang="ts">import {ref, computed} from 'vue'let name = ref('zhangsan')let age = ref(18)let information = computed(()=>{return name.value + age.value})</script><style scoped>/* 样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

computed是用来区别于方法的,使用computed得到的属性是没有缓存的,而且computed得到的属性是不可修改的;如果需要修改,则需要使用以下方法:

<template><div class="app">姓名:<input type="text" v-model="name"> <br>年龄:<input type="text" v-model="age"> <br>information: {{ information }} <br><button @click="changeInformation">修改information为lisi</button></div>
</template><script lang="ts">export default {name: 'Person',}
</script><script setup lang="ts">import {ref, computed} from 'vue'let name = ref('zhangsan')let age = ref(18)let information = computed({get(){return name.value + '-' + age.value},set(val){const [s1, s2] = val.split('-')name.value = s1age.value = parseInt(s2)}})function changeInformation(){information.value = 'lisi-18'}</script><style scoped>/* 样式 */.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

day 2

5. watch 监视

情况1:监视ref定义的基本类型数据

停止监视只需要调用watch函数的返回值就可以;

<template><div><h5>情况1:监视【ref】定义的值是【基本类型】的数据</h5>sum : {{ sum }} <br><button @click="changeSum"> sum + 1</button> <br><hr></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {ref, watch} from 'vue'let sum = ref(1)function changeSum(){sum.value += 1}// 这里的sum是不需要添加.value的,返回值就是停止监视的函数const stopwatch = watch(sum, (newVal, oldVal)=>{console.log('sum变化了', newVal, oldVal)// 如果sum的最新值大于等于10则停止监视if(newVal >= 10 ){stopwatch()}})
</script><style scoped>
</style>

情况2:监视ref定义的对象类型数据

这里要注意的是:若修改的是ref定义的对象中的属性,newVal和oldVal都是新值,因为是同一个对象;若修改的是ref定义的整个对象,newVal是新值,oldVal是旧值,因为不是同一个对象;

<template><div><h5>情况2:监视【ref】定义的值是【对象类型】的数据</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeFull">修改整个人</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {ref, watch} from 'vue'let person = ref({name: '张三',age: 18})function changeName (){person.value.name = '李四'}function changeAge (){person.value.age = 19}function changeFull (){person.value = {name: '王五', age: 20}}// 监视【ref】定义的【对象类型数据】,监视的是对象的地址值,若想要监视// 对象的内部属性的变化,需要手动开启深度监视deep// 若修改的是ref定义的对象中的属性,newVal和oldVal都是新值,因为是同一个对象// 若修改的是ref定义的整个对象,newVal是新值,oldVal是旧值,因为不是同一个对象// watch的第一个参数是:被监视的数据// watch的第二个参数是:监视的回调// watch的第三个参数是:配置对象(deep, immediate ... )watch(person, (newVal, oldVal)=>{console.log('person变化了', newVal, oldVal)}, {deep: true})
</script><style scoped>button {margin: 10px;}
</style>

情况3:监视reactive定义的对象类型数据

很简单,只需要把ref定义的对象改为reactive定义的对象,然后在修改整个对象的时候使用Object.assign替换就可以;

<template><div><h5>情况3:监视【reactive】定义的值是【对象类型】的数据</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeFull">修改人</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {reactive, watch} from 'vue'let person = reactive({name: '张三',age: 18})function changeName (){person.name = '李四'}function changeAge (){person.age = 19}function changeFull (){// 并没有修改地址值;Object.assign(person, {name: '王五', age: 20})}// 监视【reactive】定义的对象类型数据,默认是开启深度监视的,而且深度是关不掉的watch(person, (newVal, oldVal)=>{console.log('person变化了', newVal, oldVal)})</script><style scoped>button {margin: 10px;}
</style>

情况4:监视ref或者reactive定义的对象类型中的某个属性

<template><div><h5>情况4:监视【ref或reactive】定义的【对象类型】某个属性</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br>车辆:{{ person.car.c1 }}, {{ person.car.c2 }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改c1</button><button @click="changeC2">修改c2</button><button @click="changeCar">修改car</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {reactive, watch} from 'vue'let person = reactive({name: '张三',age: 18,car:{c1: 'asd',c2: 'das'}})function changeName (){person.name = '李四'}function changeAge (){person.age = 19}function changeC1(){person.car.c1 = 'qqq'}function changeC2(){person.car.c2 = 'www'}function changeCar(){person.car = {c1:'yyy', c2:'jjj'}}// 监视响应式对象中的某个属性,且该变量是基本类型的,要写成函数式/* watch(()=>person.name, (newVal, oldVal)=>{console.log('person.name变化了', newVal, oldVal)}) */// 监视响应式对象中的某个属性,且该属性是对象类型的,可以直接写,也能写函数,推荐写函数watch(()=>person.car, (newVal, oldVal)=>{console.log('person.car变化了', newVal, oldVal)}, {deep:true})</script><style scoped>button {margin: 10px;}
</style>

情况5:监视多个数据

<template><div><h5>情况4:监视【ref】定义的值是【对象类型】的数据</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br>车辆:{{ person.car.c1 }}, {{ person.car.c2 }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改c1</button><button @click="changeC2">修改c2</button><button @click="changeCar">修改car</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {reactive, watch} from 'vue'let person = reactive({name: '张三',age: 18,car:{c1: 'asd',c2: 'das'}})function changeName (){person.name = '李四'}function changeAge (){person.age = 19}function changeC1(){person.car.c1 = 'qqq'}function changeC2(){person.car.c2 = 'www'}function changeCar(){person.car = {c1:'yyy', c2:'jjj'}}// 此时newVal和oldVal是数组与前面的对应watch([()=>person.name, ()=>person.age], (newVal, oldVal)=>{console.log('变化了', newVal, oldVal)})</script><style scoped>button {margin: 10px;}
</style>

6. watchEffect

相较于watch,watchEffect不需要指定监视对象,而是响应式的追踪对象;

<template><div><h5>情况4:监视【ref】定义的值是【对象类型】的数据</h5>姓名: {{ person.name }} <br>年龄: {{ person.age }} <br>车辆:{{ person.car.c1 }}, {{ person.car.c2 }} <br><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改c1</button><button @click="changeC2">修改c2</button><button @click="changeCar">修改car</button></div>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {reactive, watch, watchEffect} from 'vue'let person = reactive({name: '张三',age: 18,car:{c1: 'asd',c2: 'das'}})function changeName (){person.name = '李四'}function changeAge (){person.age += 1}function changeC1(){person.car.c1 = 'qqq'}function changeC2(){person.car.c2 = 'www'}function changeCar(){person.car = {c1:'yyy', c2:'jjj'}}// 此时newVal和oldVal是数组与前面的对应/* watch([()=>person.name, ()=>person.age], (newVal, oldVal)=>{let [newname, newage] = newValif( newage > 23 ){console.log('发送请求')}}) */// 如果采用watchEffect,全自动的watch;watchEffect(()=>{if( person.age > 23 ){console.log('发送请求')}})</script><style scoped>button {margin: 10px;}
</style>

7. 标签的ref属性

利用refdocument.getElementById('')的区别在于,前者是局部的,不会受到整体的干扰;

<template><h2> 北京 </h2><h2 ref="title"> 师范 </h2><h2> 大学 </h2><button @click="output"> 点击一下输出样式 </button>
</template><script lang="ts">export default {name: 'Person'}
</script><script setup lang="ts">import {ref, defineExpose} from 'vue'// 这里变量名和template中的ref中的变量名对应上了let title = ref()function output(){console.log(title.value)}// 在这里可以使调用该模块的模块得到该模块的内容defineExpose({title})
</script><style scoped>/* 这里的scoped是局部样式,防止和子文件样式出现重复而全部修改无脑加上就好 */
</style>

8. 回顾TS中的接口_泛型_自定义类型

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

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

相关文章

【六袆 - React】Next.js:React 开发框架;Next.js开发框架的特点

Next.js&#xff1a;React 开发框架 Next.js的特点 1.直观的、基于页面的路由系统&#xff08;并支持动态路由&#xff09; Next.js 提供了基于文件系统的路由&#xff0c;意味着你可以通过创建页面文件来定义路由。 伪代码示例&#xff1a; // pages/index.js export defa…

【数据结构】数组

第一章、为什么数组的下标一般从0开始编号 提到数组&#xff0c;读者肯定不陌生&#xff0c;甚至还会很自信地说&#xff0c;数组很简单。编程语言中一般会有数组这种数据类型。不过&#xff0c;它不仅是编程语言中的一种数据类型&#xff0c;还是基础的数据结构。尽管数组看起…

AI新工具(20240301) Ideogram; Image to Music Generator等

1: Ideogram 全新的多模态生图AI工具&#xff0c;以其优秀的文字渲染能力和生图能力受到业界瞩目 Ideogram是一个创新的AI工具&#xff0c;它通过在生成的图片中自然地整合文字&#xff0c;解决了生图AI领域长期存在的一个难题。这个工具特别擅长将文本以极其自然和协调的方式…

Nginx 隐藏版本信息和logo

1.隐藏版本信息 http {### 隐藏版本号 server_tokens off; } 2.隐藏图标 2.1 cd nginx 安装的路径 cd/XXXX/nginx-1.2.0 2.2 编辑文件 vim src/core/nginx.h 修改define nginx_ver 中的内容 vim src/http/ngx_http_special_response.c 修改 u_char ngx_http_error_tail[]…

腾讯云4核8G的云服务器性能水平?使用场景说明

腾讯云4核8G服务器适合做什么&#xff1f;搭建网站博客、企业官网、小程序、小游戏后端服务器、电商应用、云盘和图床等均可以&#xff0c;腾讯云4核8G服务器可以选择轻量应用服务器4核8G12M或云服务器CVM&#xff0c;轻量服务器和标准型CVM服务器性能是差不多的&#xff0c;轻…

【生成式AI】ChatGPT 原理解析(2/3)- 预训练 Pre-train

Hung-yi Lee 课件整理 预训练得到的模型我们叫自监督学习模型&#xff08;Self-supervised Learning&#xff09;&#xff0c;也叫基石模型&#xff08;foundation modle&#xff09;。 文章目录 机器是怎么学习的ChatGPT里面的监督学习GPT-2GPT-3和GPT-3.5GPTChatGPT支持多语言…

element-plus表格合并

要实现这样的表格&#xff0c; 怎么做呢&#xff1f; 甚至是这种三级的呢&#xff1f; 官网的案例也是通过这个方法进行配置的&#xff0c;也就是说表格长什么样&#xff0c;关键在怎么处理的方法上。 这是官网的方法&#xff0c;可参考拓展&#xff1a; const arraySpanMeth…

【airtest】自动化入门教程(三)Poco操作

目录 一、准备工作 1、创建一个pthon脚本 2、光标位置 2、选择Android 3、选择yes 二、定位元素 三、poco基于设备/屏幕 方式 1、poco.click( (x,y))基于屏幕点击相对坐标为x&#xff0c;y的位置 2、poco.get_screen_size() 3、poco.swipe(v1,v2)基于屏幕从v1位置滑到…

Python爬虫实战第二例【二】

零.前言&#xff1a; 本文章借鉴&#xff1a;Python爬虫实战&#xff08;五&#xff09;&#xff1a;根据关键字爬取某度图片批量下载到本地&#xff08;附上完整源码&#xff09;_python爬虫下载图片-CSDN博客 大佬的文章里面有API的获取&#xff0c;在这里我就不赘述了。 一…

Vue2:路由的两种模式history模式和hash模式

一、情景说明 之前我们写的项目启动后&#xff0c;浏览器访问时&#xff0c;路径中会有个#/&#xff0c;会导致不够美观 因为一般的访问地址都是http://123.123.123.123/aaa/bbb这种形式 这一篇&#xff0c;就来解决这个问题 二、案例 1、hash模式 特点&#xff1a;#/后的…

Docker与虚拟机比较

在对比Docker和虚拟机前&#xff0c;先简单了解下虚拟化&#xff0c;明确Docker和虚拟机分别对应的虚拟化级别&#xff0c;然后对Docker和虚拟机进行比较。需要注意的是&#xff0c;Docker和虚拟机并没有什么可比性&#xff0c;而是Docker使用的容器技术和虚拟机使用的虚拟化技…

微信小程序触屏事件_上划下划事件

一、微信小程序触屏事件 bindtouchstart&#xff1a;手指触摸动作开始 bindtouchmove&#xff1a;手指触摸后移动 bindend&#xff1a;手指触摸动作结束 属性类型说明touchesArray触摸事件&#xff0c;当前停留在屏幕中的触摸点信息的数组 Touch 对象 属性类型说明identi…

《HelloGitHub》第 95 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、Java、Go、C/C、Swift...让你在短时间内…

DDR5内存相比DDR4内存的优势和区别?选择哪一个服务器内存配置能避免丢包和延迟高?

根据幻兽帕鲁服务器的实际案例分析&#xff0c;选择合适的DDR4与DDR5内存大小以避免丢包和延迟高&#xff0c;需要考虑以下几个方面&#xff1a; 性能与延迟&#xff1a;DDR5内存相比DDR4在传输速率、带宽、工作电压等方面都有显著提升&#xff0c;但同时也伴随着更高的延迟。D…

Javaweb之SpringBootWeb案例之自动配置的两种常见方案的详细解析

3.2.2.2 方案一 ComponentScan组件扫描 SpringBootApplication ComponentScan({"com.itheima","com.example"}) //指定要扫描的包 public class SpringbootWebConfig2Application {public static void main(String[] args) {SpringApplication.run(Sprin…

Wireless LAN演进整理以及STA与AP之间的关联行为

一、WLAN standard WLAN标准也是由电机电子工程师学会 (IEEE, Electrical and Electronics Engineers)组织制定的&#xff0c;WLAN标准统称为802.11 二、802.11传输标准 IEEE标准 名称 年份 频道 最高传输速率 调变方式 802.11 WIFI 0 1997 2.4 GHz 2 Mbps DSSS 8…

STM32------分析GPIO寄存器

一、初始LED原理图 共阴极led LED发光二极管&#xff0c;需要有电流通过才能点亮&#xff0c;当有电压差就会产生电流 二极管两端的电压差超过2.7v就会有电流通过 电阻的作用 由于公式IV/R 不加电阻容易造成瞬间电流无穷大 发光二极管工作电流为10-20MA 3.3v / 1kΩ 3.…

如何在群晖Docker运行本地聊天机器人并结合内网穿透发布到公网访问

文章目录 1. 拉取相关的Docker镜像2. 运行Ollama 镜像3. 运行Chatbot Ollama镜像4. 本地访问5. 群晖安装Cpolar6. 配置公网地址7. 公网访问8. 固定公网地址 随着ChatGPT 和open Sora 的热度剧增,大语言模型时代,开启了AI新篇章,大语言模型的应用非常广泛&#xff0c;包括聊天机…

获取linuxIP、内存、cpu、磁盘IO等信息的Shell脚本及其讲解

shell基础知识 1.grep grep是一个在Unix和Unix-like系统上使用的命令行工具&#xff0c;用于在文本文件中搜索匹配指定模式的行。它的名字来自于"global regular expression print"&#xff08;全局正则表达式打印&#xff09;的缩写。grep的基本用法是通过指定一个…

Redis之十:Spring Data Redis --- CrudRepository方式

SpringData Redis CrudRepository方式 Spring Data Redis 的 CrudRepository 是 Spring Data 框架中用于提供基础 CRUD&#xff08;创建、读取、更新和删除&#xff09;操作的一个接口。在与 Redis 集成时&#xff0c;尽管 Redis 是一个键值存储系统&#xff0c;并没有像关系型…