Vue3+ TypeScript 零基础教学
Vue3 初步使用教程
- Vue3 初步使用教程
- 一. Vue3简单介绍
- 二. 创建Vue3工程
- 三. Vue3核心语法
- 四. 路由相关
- 五. pinia 数据集中化管理
一. Vue3简单介绍
"""
发布时间
2020年9月18日,`Vue.js`发布版`3.0`版本
版本特性:
1.1 性能的提升
打包大小减少41%。
初次渲染快55%, 更新渲染快133%。
内存减少54%。
1.2 源码的升级
使用Proxy代替defineProperty实现响应式。
重写虚拟DOM的实现和Tree-Shaking。
1.3 拥抱TypeScript
Vue3可以更好的支持TypeScript。
1.4. 【新的特性】
Composition API(组合API):
setup
ref与reactive
computed与watch
......
1.4 新的内置组件:
Fragment
Teleport
Suspense
......
1.5其他改变:
新的生命周期钩子
data 选项应始终被声明为一个函数
移除keyCode支持作为 v-on 的修饰符
......
"""
二. 创建Vue3工程
2.1 安装nvm管理node
"""
###安装nvm管理node版本
#01 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
#02 安装node18
nvm install 18
nvm use 18
#03 检查版本号
ningcaichen@bogon 04-北京地铁内部开发平台 % node -v
npm -v
v18.20.6
8.19.4
"""
2.2 基于Vue-cli创建
"""
官网:https://vitejs.cn/vite5-cn/guide/
"""
#01 查看版本 vue --version
@vue/cli 5.0.8
#02 安装vue/cli
npm config set registry https://registry.npmmirror.com/
npm install -g @vue/cli
#03 执行创建命令
vue create vue_test
#04 启动vue
cd vue_test
npm run serve
2.3 基于 vite 创建】(推荐)
vite
是新一代前端构建工具,官网地址:https://vitejs.cn,vite
的优势如下:
- 轻量快速的热重载(
HMR
),能实现极速的服务启动。 - 对
TypeScript
、JSX
、CSS
等支持开箱即用。 - 真正的按需编译,不再等待整个应用编译完成。
webpack
构建 与vite
构建对比图如下:
#01 创建工程
npm create vue@latest
"""
Vue.js - The Progressive JavaScript Framework
✔ 请输入项目名称: … day01_vue3
✔ 是否使用 TypeScript 语法? … 否 / 是
✔ 是否启用 JSX 支持? … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发? … 否 / 是
✔ 是否引入 Pinia 用于状态管理? … 否 / 是
✔ 是否引入 Vitest 用于单元测试? … 否 / 是
✔ 是否要引入一款端到端(End to End)测试工具? › 不需要
✔ 是否引入 ESLint 用于代码质量检测? › 否
正在初始化项目 /Users/ningcaichen/Documents/02-python相关文档/05-vue/day01_vue3...
项目初始化完成,可执行以下命令:
cd day01_vue3
npm install
npm run dev
"""
#02 使用webstorm 打开文件
npm install #安装依赖
#03 启动服务
npm run dev
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
注意: http://localhost:5173/__devtools__/ 这个地址是vue调试页面
- 图书
2.5 目录结构入口
"""
Vite 项目中,index.html 是项目的入口文件,在项目最外层。
加载index.html后,Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
Vue3**中是通过 **createApp 函数创建一个应用实例。
"""
day01_vue3/
├── node_modules/ # 项目依赖的第三方包
├── public/ # 公共静态资源
│ └── favicon.ico # 网站图标
├── src/ # 源代码目录
│ ├── assets/ # 静态资源,如图片、字体等
│ ├── components/ # Vue 组件
│ ├── views/ # 页面视图
│ ├── router/ # Vue Router 配置
│ ├── store/ # Vuex 状态管理(如果使用)
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件,初始化 Vue 实例
│ └── styles/ # 全局样式文件
├── .gitignore # Git 忽略文件
├── package.json # 项目依赖和配置
├── index.html # 应用的 HTML 模板
├── README.md # 项目说明文档
├── tsconfig.json # TypeScript 配置(如果使用 TypeScript)
├── vite.config.ts # Vite 配置文件(如果使用 Vite)
└── package-lock.json # 精确锁定项目依赖版本的文件
##例如 index.html <script type="module" src="/src/main.ts"></script>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>果果-vue测试</title>
</head>
<body>
<div id="app"></div>
<!-- createApp(App).mount('#app') 会将 Vue 根组件 App 挂载到这个 div 元素上。也就是说,Vue 应用的内容将渲染到这个 div 中-->
<script type="module" src="/src/main.ts"></script>
</body>
</html>
--->> 下一层是 /src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
--->> 下一层是 /App.vue'
就是 App.vue文件
2.4 书写第一个页面
// 我们这里把 src文件全删除
//01 首先确认index.html入口
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>果果-vue测试</title>
</head>
<body>
<div id="app"></div>
<!-- createApp(App).mount('#app') 会将 Vue 根组件 App 挂载到这个 div 元素上。也就是说,Vue 应用的内容将渲染到这个 div 中-->
<script type="module" src="/src/main.ts"></script>
</body>
</html>
// 02 书写 main.ts 文件引用组件
// 从 Vue 库中引入 `createApp` 函数,用于创建 Vue 应用实例
import { createApp } from 'vue'
// 引入根组件 App.vue,这通常是 Vue 应用的主界面组件
import App from './App.vue'
// 使用 `createApp` 创建 Vue 应用实例,传入根组件 `App`,然后通过 `.mount` 方法将该应用挂载到页面中的 DOM 元素 `#app` 上
createApp(App).mount('#app')
// 03 书写 /App.vue
<template>
<!--html区域-->
<div class="app">
<h2>果果 Hello </h2>
</div>
</template>
<script lang="ts">
// js或者ts区域
export default { // export default 导出一个 Vue 组件的配置对象
name: 'App',
}
</script>
<style scoped> // scoped 只针对当前html生效
.app {
color: cornflowerblue;
background-color: #2c3e50;
}
</style>
- 页面
2.5 注册组件
- vue2写法
## 我们现在需要创建一个 Person 组件 并注册在vue内
#01 创建目录
mkidr src/components
#02 书写组件 src/components/person.vue
<template>
<div class="person">
<h2>这是person</h2>
</div>
</template>
<script lang="ts">
</script>
#03 App.vue 根组件内注册组件
<script lang="ts">
import Person from "@/components/Person.vue"; //导入该组件
// js或者ts区域
export default {
name: 'App',
components: {
Person //注册该组件
}
}
</script>
#04 使用 在App.vue文件内直接使用即可 <Person />
<template>
<!--html区域-->
<div class="app">
<h2>果果 Hello </h2>
<Person />
</div>
</template>
2.6 Vue3兼容Vue2
- 修改名称
- 年龄加1
- 查看电话号码
Vue2
的API
设计是Options
(配置)风格的 选项式API 。
### 下方是vue2实现方式
#01 person.vue
<template>
<div class="person">
<h2>这是person 下面是 vue2语法糖</h2>
<h3>姓名:{{name}}</h3>
<h3>年龄:{{age}}</h3>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄加1</button>
<button @click="showTel">查看我的联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name: 'person',
data() { // 定义所有数据
return {
name: "果果",
age: 15,
tel: '15119911990'
}
} ,
methods: { //所有方法集合
changeName() {
this.name = '果果耶-修改后'
},
changeAge() {
this.age += 1
},
showTel() {
alert(this.tel)
}
}
}
</script>
<style scoped>
.person {
color: crimson;
}
</style>
三. Vue3核心语法
3.1. OptionsAPI 与 CompositionAPI
Vue2
的API
设计是Options
(配置)风格的。Vue3
的API
设计是Composition
(组合)风格的。
(1) Options API 的弊端
Options
类型的 API
,数据、方法、计算属性等,是分散在:data
、methods
、computed
中的,若想新增或者修改一个需求,就需要分别修改:data
、methods
、computed
,不便于维护和复用。
(2) Composition API 的优势
可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。
3.2. 拉开序幕的 setup
(1) setup 概述
setup
是Vue3
中一个新的配置项,值是一个函数,它是 Composition API
“表演的舞台”,组件中所用到的:数据、方法、计算属性、监视......等等,均配置在setup
中。
特点如下:
setup
函数返回的对象中的内容,可直接在模板中使用。setup
中访问this
是undefined
。setup
函数会在beforeCreate
之前调用,它是“领先”所有钩子执行的。
<template>
<div class="person">
<h2>这是person </h2>
<h3>姓名:{{name}}</h3>
<h3>年龄:{{age}}</h3>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄加1</button>
<button @click="showTel">查看我的联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name: 'person',
setup() {
// 定义数据
let name = '果果'
let age = 18
let tel = 15119911990
// 定义函数
function changeName() {
name = '爱你呦果果-修改后' // 并非响应式更新
console.log(name)
}
function changeAge() {
age += 1 // 并非响应式更新
}
function showTel() {
alert(tel)
}
// 返回一个对象,对象中的内容 模版中可以直接使用
return {name, age, tel,
changeName,
showTel,
changeAge
}
}
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
- 区别
(2) setup返回值
- 若返回一个对象:则对象中的:属性、方法等,在模板中均可以直接使用(重点关注)。
- 若返回一个函数:则可以自定义渲染内容,代码如下:
<template>
<div class="person">
<h2>这是person </h2>
<h3>姓名:{{name}}</h3>
<h3>年龄:{{age}}</h3>
<h3>地址:{{addr}}</h3>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄加1</button>
<button @click="showTel">查看我的联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name: 'person',
setup() {
return ()=> '你好啊'
}
}
</script>
- 页面只会显示 return 的内容
(3) setup 与 Options API 的关系
Vue2
的配置(data
、methos
......)中可以访问到setup
中的属性、方法。- 但在
setup
中不能访问到Vue2
的配置(data
、methos
......)。 - 如果与
Vue2
冲突,则setup
优先。
(4) setup 语法糖
setup函数有一个语法糖,这个语法糖,可以让我们把
setup`独立出去,代码如下:
// 定义一个 <script setup> 可自动帮你返回
<script lang="ts" setup>
// 直接定义数据即可,会自动帮你返回
let name = '果果'
// 定义函数
function changeName() {}
</script>
- 案例
<template>
<div class="person">
<h2>这是person </h2>
<h3>姓名:{{name}}</h3>
<h3>年龄:{{age}}</h3>
<h3>地址:{{addr}}</h3>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄加1</button>
<button @click="showTel">查看我的联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name: 'person'
}
</script>
<script lang="ts" setup>
// 直接定义数据即可,会自动帮你返回
let name = '果果'
let age = 18
let tel = 15119911990
let addr = "北京"
// 定义函数
function changeName() {
name = '爱你呦果果-修改后' // 并非响应式更新
console.log(name)
}
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 5px;
}
</style>
扩展:上述代码,还需要编写一个不写setup
的script
标签,去指定组件名字,比较麻烦,我们可以借助vite
中的插件简化
#01 下载依赖`
npm i vite-plugin-vue-setup-extend -D
#02 导入包 vite.config.ts
import VueSetupExtend from 'vite-plugin-vue-setup-extend' //导入
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
VueSetupExtend(), //注册
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
#03 使用该模块
<script lang="ts" setup name="Person222"> //使用 name属性直接定义
// 直接定义数据即可,会自动帮你返回
let name = '果果'
</script>
3.3 ref创建基本类型的响应数据
#01 导入ref包
import {ref} from "vue";
#02 使用说明
let name = ref('果果') # 定义数据使用 ref包裹需要响应变化的数据 name.value 属于响应式数据
name.value = '爱你呦果果-修改后' # JS内 需要 name.value 修改数据
<h3>姓名:{{name}}</h3> #模版语法会自动帮你加 name.value
<template>
<div class="person">
<h2>这是person </h2>
<h3>姓名:{{name}}</h3>
<h3>年龄:{{age}}</h3>
<h3>地址:{{addr}}</h3>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄加1</button>
<button @click="showTel">查看我的联系方式</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref} from "vue";
// 直接定义数据即可,会自动帮你返回
let name = ref('果果')
let age = ref(18)
let tel = 15119911990
let addr = "北京"
// 定义函数
function changeName() {
name.value = '爱你呦果果-修改后'
console.log(name)
}
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 5px;
}
</style>
3.4. reactive 创建对象类型的响应式数据
"""
其实ref接收的数据可以是:基本类型、对象类型。
若ref接收的是对象类型,内部其实也是调用了reactive函数。
#01 引用模块
import {reactive} from "vue";
#02 使用reactive(数据)
let games = reactive([
{id:'01', name: "王者荣耀"},
{id:'02', name: "原神启动"},
{id:'03', name: "第五人格"}
])
重新赋值
Object.assign(car,{price:30000,brand:'宝马'})
ref产生的对象 重新赋值
car.value = {price:30000,brand:'宝马'}
"""
<template>
<div class="person">
<h2>汽车信息:一台{{ car.brand }} 价格是{{ car.price }}</h2>
<h2>游戏列表: </h2>
<ul>
循环games对象取值。:key是唯一标识
<li v-for="index in games" :key="index.id">{{index.id}} : {{index.name}}</li>
</ul>
<h2>
<button @click="changeCarPrice" >修改汽车价格</button>
<button @click="changeUpdateGames" >修改第一个标签</button>
<button @click="changAll" >修改汽车为宝马,价格是:30000</button>
</h2>
</div>
</template>
<script lang="ts" setup name="Person">
// 导入包
import {reactive,ref} from "vue";
// 定义字典对象
let car = reactive({
brand : '奔驰',
price : 20000,
})
// 定义游戏数据
let games = reactive([
{id:'01', name: "王者荣耀"},
{id:'02', name: "原神启动"},
{id:'03', name: "第五人格"}
])
function changeCarPrice(){
car.price += 10000
}
function changeUpdateGames(){
games[0].name = "妲己"
}
function changAll(){
// 把price对象属性 重新赋值 内存地址不变 reactive
Object.assign(car,{price:30000,brand:'宝马'})
// 如果使用 ref方式修改
// car.value = {price:30000,brand:'宝马'}
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
- 图示
3.5 ref和reactive对比
宏观角度看:
ref
用来定义:基本类型数据、对象类型数据;reactive
用来定义:对象类型数据。
- 区别:
ref
创建的变量必须使用.value
(如果是vscode可以使用volar
插件自动添加.value
)。
reactive
重新分配一个新对象,会失去响应式(可以使用Object.assign
去整体替换)。
- 使用原则:
- 若需要一个基本类型的响应式数据,必须使用
ref
。- 若需要一个响应式对象,层级不深,
ref
、reactive
都可以。- 若需要一个响应式对象,且层级较深,推荐使用
reactive
。
3.7. toRefs 与 toRef 转为响应式ref
- 作用:将一个响应式对象中的每一个属性,转换为
ref
对象。 - 备注:
toRefs
与toRef
功能一致,但toRefs
可以批量转换。
"""
toRefs 和 toRef 可以被看作是让你“获取”某个对象属性的“引用”。这种引用使得你可以直接操作原对象的值,就像是操作指针一样,因为它们直接指向原始对象的属性。
基础语法
导入包:
import {toRefs,toRef} from "vue";
使用方式
let {userName,age,gender} = toRefs(person);
修改或者取值:
userName.value
age.value
"""
<template>
<div class="person">
<h2>toRefs和toRef 案例</h2>
<h3>姓名:{{person.userName}}</h3>
<h3>年龄:{{person.age}}</h3>
<h3>性别:{{person.gender}}</h3>
<button @click="changName">修改名称</button>
<button @click="changAge">修改年龄</button>
<button @click="changGender">修改性别</button>
</div>
</template>
<script lang="ts" setup name="Person">
// 导入包
import {ref,reactive, toRefs,toRef} from "vue";
// 01 书写基础人员数据
let person = reactive({
userName: "果果",
age: 18,
gender: "女",
});
// 02 使用toRef转换为响应式ref对象 将对象数据的内存地址赋值给变量,现在只需要修改 userName.value 属性即可修改原始值
let {userName,age,gender} = toRefs(person);
console.log(userName,age,gender);
// 02 书写修改函数
function changName(){
// person.userName += "果果~"
userName.value += "~果果"
}
function changAge(){
// person.age += 1;
age.value += 1
}
function changGender() {
// person.gender = "女~";
gender.value += "~女" // 直接修改指针的值
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
3.8 computed 计算属性
缓存机制:computed
属性是基于它的依赖进行缓存的,只有当它依赖的数据发生变化时,才会重新计算。这比 methods
更高效,因为 methods
每次调用都会执行函数,而 computed
只会在需要时重新计算。
声明式:computed
提供了一种声明式的方式来计算新的值,而不是像方法那样手动进行操作。
具有 getter 和 setter:computed
不仅可以用来获取计算值,还可以设置新的值。
- 基本语法
#01 引入包
import {computed} from "vue";
#02 使用
// 使用computed计算属性 既可以修改也可以读取
// 查询默认返回这个
let fullName = computed({
get(){
return firstName.value + "-" + lastName.value;
},
// 修改默认返回这个 传入参数 val
set(val){
console.log('修改了fullName',fullName.value);
// 修改的一些数据处理 传入数据是 guo-guo
firstName.value = val.split('-')[0];
lastName.value =val.split('-')[1];
}
})
function updateName() {
// 传入值 fullName.value
fullName.value = 'guo-guo';
- 使用案例
<template>
<div class="person">
<h2>computed案例</h2>
<p>姓:<input type="text" v-model="firstName"></p>
<p>名:<input type="text" v-model="lastName"></p>
<p>全名:<span>{{fullName}}</span></p>
<button @click="updateName">修改名称为:guo-guo</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,computed} from "vue";
let firstName = ref("zzz");
let lastName = ref("果果");
// 计算属性-只读 不可修改
// let fullName = computed(() => {
// return firstName.value + "-" + lastName.value;
// })
// 使用computed计算属性 既可以修改也可以读取
let fullName = computed({
get(){
return firstName.value + "-" + lastName.value;
},
set(val){
console.log('修改了fullName',fullName.value);
// 修改的一些数据处理 传入数据是 guo-guo
firstName.value = val.split('-')[0];
lastName.value = val.split('-')[1];
}
})
function updateName() {
fullName.value = 'guo-guo';
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
3.9 watch监视
- 作用:监视数据的变化(和
Vue2
中的watch
作用一致) - 特点:
Vue3
中的watch
只能监视以下四种数据:
ref
定义的数据。reactive
定义的数据。- 函数返回一个值(
getter
函数)。- 一个包含上述内容的数组。
我们在Vue3
中使用watch
的时候,通常会遇到以下几种情况:
情况一 监控基本类型
监视ref
定义的【基本类型】数据:直接写数据名即可,监视的是其value
值的改变。
<template>
<div class="person">
<h2>watch 情况一,监控ref定义的基本数据类型</h2>
<p><span>结果Sum:{{sum}}</span></p>
<button @click="changSum">点击Sum+1</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch} from "vue";
// 01 定义Sum初始值
let sum = ref(0);
// 定义修改数据函数
function changSum() {
sum.value++;
}
// 定义监视器 当Sum值大于20时候 就停止监控
// stopWatch 这个是回调函数 名称随意
const stopWatch = watch(sum,(newValue,oldValue) => {
console.log('sum发生了变化',newValue,oldValue);
if (newValue >= 20) {
stopWatch();
}
})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
情况二 监控对象类型
监视ref
定义的【对象类型】数据:直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。
注意:
- 若修改的是
ref
定义的对象中的属性,newValue
和oldValue
都是新值,因为它们是同一个对象。- 若修改整个
ref
定义的对象,newValue
是新值,oldValue
是旧值,因为不是同一个对象了。
<template>
<div class="person">
<h1>情况二:监视【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="Person">
// 导入包
import {reactive, ref, watch} from "vue";
// 书写数据
let person = ref({
name: "果果",
age: 17,
})
// 书写修改函数
function changeName() {
person.value.name += "~果果"
}
function changeAge() {
person.value.age += 1
}
function changePerson() {
person.value = {name:'张宇宙',age: 19}
}
// 书写监控器
/*
监视,情况一:监视【ref】定义的【对象类型】数据,监视的是对象的地址值,若想监视对象内部属性的变化,需要手动开启深度监视
watch的第一个参数是:被监视的数据
watch的第二个参数是:监视的回调
watch的第三个参数是:配置对象(deep、immediate等等.....)
*/
watch(person,
(newValue,oldValue) => {
console.log('person发生了变化',newValue,oldValue)},
{deep: true}) // 深度监控,该person下面的每个key发生变化,都会被监控到,否则只会全部都发生变化才会触发监控
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
情况三 监控reactive对象类型
监视reactive
定义的【对象类型】数据,且默认开启了深度监视。
<template>
<div class="person">
<h1>情况三:监视【reactive】定义的【对象类型】数据</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="Person">
// 导入包
import {reactive, ref, watch} from "vue";
// 书写数据
let person = reactive({
name: "果果",
age: 17,
})
// 书写修改函数
function changeName() {
person.name += "~果果"
}
function changeAge() {
person.age += 1
}
function changePerson() {
Object.assign(person, {name:'张宇宙',age: 19})
}
// 书写监控器 reactive 所产生的对象默认会深度监控,且无法关闭
watch(person,
(newValue,oldValue) => {
console.log('person发生了变化',newValue,oldValue)},
) // 深度监控,该person下面的每个key发生变化,都会被监控到,否则只会全部都发生变化才会触发监控
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
情况四 监控对象的某个属性
监视ref
或reactive
定义的【对象类型】数据中的某个属性,注意点如下:
- 若该属性值不是【对象类型】,需要写成函数形式。
- 若该属性值是依然是【对象类型】,可直接编,也可写成函数,建议写成函数。
结论:监视的要是对象里的属性,那么最好写函数式,注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视
<template>
<div class="person">
<h1>情况四:监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>汽车:{{person.car.c1}},{{person.car.c2}}</h2>
<button @click="changName">修改名称</button>
<button @click="changAge">修改年龄</button>
<button @click="changC1">修改第一辆汽车</button>
<button @click="changC2">修改第二辆汽车</button>
<button @click="changCar">修改全部汽车</button>
</div>
</template>
<script lang="ts" setup name="Person">
// 导入包
import {reactive,watch} from "vue";
//01 书写数据
let person = reactive({
name: "果果",
age: 18,
car: {
c1: "奔驰",
c2: "宝马",
}
})
// 02 书写函数
function changName() {
person.name += "~果果"
}
function changAge() {
person.age += 1
}
function changC1() {
person.car.c1 = "雅阁"
}
function changC2() {
person.car.c2 = "大众"
}
function changCar() {
person.car = {c1: "牧马人",c2: "劳斯莱斯"}
}
// 02 书写监控器,监控只有c1汽车发生改变就打印
// 这里使用箭头函数返回一个值 ()=>person.car.c1 ,需要开启 deep:true
watch(()=>person.car.c1, (newValue,oldValue) => {
console.log('person发生了变化',newValue,oldValue)
},{deep:true})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
情况五 监控多个值
- 监视上述的多个数据
"""
这里使用 [()=>person.car.c1,()=>person.name] 列表方式添加多个监控值
// 02 书写监控器,监控姓名和C1小汽车 如果发生变化则触发
watch([()=>person.car.c1,()=>person.name], (newValue,oldValue) => {
console.log('person发生了变化',newValue,oldValue)
},{deep:true})
"""
<template>
<div class="person">
<h1>情况四:监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
<h2>姓名:{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>汽车:{{person.car.c1}},{{person.car.c2}}</h2>
<button @click="changName">修改名称</button>
<button @click="changAge">修改年龄</button>
<button @click="changC1">修改第一辆汽车</button>
<button @click="changC2">修改第二辆汽车</button>
<button @click="changCar">修改全部汽车</button>
</div>
</template>
<script lang="ts" setup name="Person">
// 导入包
import {reactive,watch} from "vue";
//01 书写数据
let person = reactive({
name: "果果",
age: 18,
car: {
c1: "奔驰",
c2: "宝马",
}
})
// 02 书写函数
function changName() {
person.name += "~果果"
}
function changAge() {
person.age += 1
}
function changC1() {
person.car.c1 = "雅阁"
}
function changC2() {
person.car.c2 = "大众"
}
function changCar() {
person.car = {c1: "牧马人",c2: "劳斯莱斯"}
}
// 02 书写监控器,监控姓名和C1小汽车 如果发生变化则触发
watch([()=>person.car.c1,()=>person.name], (newValue,oldValue) => {
console.log('person发生了变化',newValue,oldValue)
},{deep:true})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
3.10 watchEffect 监视
-
官网:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行该函数。
-
watch
对比watchEffect
- 都能监听响应式数据的变化,不同的是监听数据变化的方式不同
watch
:要明确指出监视的数据watchEffect
:不用明确指出监视的数据(函数中用到哪些属性,那就监视哪些属性)。
-
示例代码:
"""
watch 这样写也是没问题的
watch([temp,height], (value)=>{
if (height.value >= 20 || temp.value >= 50){
console.log('告警,要清理服务器了')
}
});
"""
<template>
<div class="person">
<h1>需求:水温达到50℃,或水位达到20cm,则联系服务器</h1>
<h2>水温:{{temp}}℃</h2>
<h2>水位:{{height}}cm</h2>
<button @click="changTemp">水温加10</button>
<button @click="changHeight">水位加1</button>
</div>
</template>
<script lang="ts" setup name="Person">
// 导入包
import {ref, watch,watchEffect} from "vue";
// 01 定义数据
let temp = ref(12);
let height = ref(0);
// 02 定义函数
function changTemp(){
temp.value += 10;
}
function changHeight(){
height.value += 1;
}
// 03 定义监控器 watch 写法,需要指名道姓告诉服务监控什么
// watch([temp,height], (value)=>{
// let [NewTemp,NewHeight] = value
// if (NewHeight >= 20 || NewTemp >= 50){
// console.log('告警,要清理服务器了')
// }
//
//
// });
watchEffect(()=>{
// 判断水温到达50度,水位20cm 告警
if (height.value >= 20 || temp.value >= 50){
console.log('该清理了')
}
})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
3.11 组件引用 便签的ref 属性
作用:用于注册模板引用。
- 用在普通
DOM
标签上,获取的是DOM
节点。- 用在组件标签上,获取的是组件实例对象。
用在普通DOM
标签上:
- Person.vue
"""
#01 定义html ref属性
<h2 ref="title2">你好啊</h2>
#02 取值 .value
function Title2() {
console.log(title2.value);
}
#03 在组件上使用 获取的是组件对象
使用defineExpose将组件中的数据交给外部
defineExpose({a,b}) // 暴露数据给父组件访问
#04 访问
function Tell() {
console.log(person.value);
console.log(person.value.a); //查看组件的 a属性
}
"""
<template>
<div class="person">
<h2 ref="title1">这是测试前的数据</h2>
<h2 ref="title2">你好啊</h2>
<h2 ref="title3"> 果果在干嘛</h2>
<button @click="Title2">点击可获取第二个标签数据</button>
</div>
</template>
<script lang="ts" setup name="Person">
// 导入包
import {ref,defineExpose} from "vue";
// 01 定义数据
let title1 = ref();
let title2 = ref();
let title3 = ref();
let a = ref(1);
let b = ref(2);
// 02 通过ref获取数据 书写函数 获取数据
function Title2() {
console.log(title2.value);
}
defineExpose({a,b}) // 暴露数据给父组件访问
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
- App.vue
<template>
<!--html区域-->
<div class="app">
<h2>果果 Hello Vue</h2>
<Person ref="person" />
<button @click="Tell">点击查看数据</button>
</div>
</template>
<script lang="ts" setup name="App">
import Person from "./components/Person.vue";
import {ref} from "vue";
let person = ref();
function Tell() {
console.log(person.value);
console.log(person.value.a); //查看组件的 a属性
}
</script>
3.12 接口定义数据规范
"""
#01 定义
// 定义一个接口 限制对象的具体属性
export interface PersonInter {
id: string;
name: string;
age: number;
}
// 自定义类型 允许多个 [{id:'',name:'',age:},{id:'',name:'',age:}]
// export type Person = Array<PersonInter>; // 和下面是一样的写法
export type Persons = PersonInter[];
#02 导入接口
import {type PersonInter,type Persons} from '@/types'
#03 使用
let per:PersonInter = reactive({id:'123',name:'果果',age:18})
let pers:Persons = reactive([
{id:'123',name:'果果',age:18},
{id:'123',name:'果果',age:18}
])
"""
#01 定义接口
// 定义一个接口 限制对象的具体属性
export interface PersonInter {
id: string;
name: string;
age: number;
}
// 自定义类型 允许多个 [{id:'',name:'',age:},{id:'',name:'',age:}]
// export type Person = Array<PersonInter>; // 和下面是一样的写法
export type Persons = PersonInter[];
#02 使用
<template>
<div class="person">
<h2>{{per}}</h2>
<h2>{{pers}}</h2>
</div>
</template>
<script lang="ts" setup name="Person">
// 导入包
import {ref,reactive} from "vue";
import {type PersonInter,type Persons} from '@/types'
let per:PersonInter = reactive({id:'123',name:'果果',age:18})
let pers:Persons = reactive([
{id:'123',name:'果果',age:18},
{id:'123',name:'果果',age:18}
])
</script>
3.13 props 组件间数据传递
(1) 定义一个接口 规范数据
// 定义一个接口 限制对象的具体属性
export interface PersonInter {
id: string;
name: string;
age: number;
genre?: string; // 代表这个参数可有可无
}
// 自定义类型 允许多个 [{id:'',name:'',age:},{id:'',name:'',age:}]
// export type Person = Array<PersonInter>; // 和下面是一样的写法
export type Persons = PersonInter[];
(2) App.vue 父组件定义数据 传递给子组件
<template>
<!--html区域-->
<div class="app">
<h2>果果 Hello Vue</h2>
<!-- 传递数据 user_list 给Person组件-->
<Person :list="userList"/>
</div>
</template>
<script lang="ts" setup name="App">
import Person from "./components/Person.vue";
import {type Persons} from "./types"
import {reactive} from "vue";
//01 书写一个list用户数据 传入子组件 Person 符合自定义接口数据类型规范
let userList = reactive<Persons>([
{id: "1",name: "果果",age: 18,genre: "女生"},
{id: "2",name: "宇宙",age: 19,genre: "女生"},
{id: "3",name: "爱了",age: 20},
])
</script>
(3) 子组件 接收数据展示页面
<template>
<div class="person">
<h2>数据展示</h2>
<ul>
<li v-for="item in list" :key="item.id">
{{item.name}}--{{item.age}}---{{item.genre}}
</li>
</ul>
</div>
</template>
<script lang="ts" setup name="Person">
import {defineProps,withDefaults} from 'vue'
import {type Persons} from "@/types";
// 01 仅接收数据 这里可以直接使用 list
// const user_obj = defineProps(['list'])
// 02 接收+限制类型
// defineProps<{list:Persons}>()
// 03 接收+限制类型+指定默认值+限制必要性
let user_obj = withDefaults( // withDefaults 判断如果list没有数据,则使用下面默认数据
defineProps<{list?:Persons}>(),
{
list:()=> [{id:"0",name: "玲娜贝尓",age:888}]
}
)
console.log(user_obj.list);
</script>
3.14 生命周期
-
概念:
Vue
组件实例在创建时要经历一系列的初始化步骤,在此过程中Vue
会在合适的时机,调用特定的函数,从而让开发者有机会在特定阶段运行自己的代码,这些特定的函数统称为:生命周期钩子 -
规律:
生命周期整体分为四个阶段,分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后。
-
Vue2
的生命周期创建阶段:
beforeCreate
、created
挂载阶段:
beforeMount
、mounted
更新阶段:
beforeUpdate
、updated
销毁阶段:
beforeDestroy
、destroyed
-
Vue3
的生命周期创建阶段:
setup
挂载阶段:
onBeforeMount
、onMounted
更新阶段:
onBeforeUpdate
、onUpdated
卸载阶段:
onBeforeUnmount
、onUnmounted
-
常用的钩子:
onMounted
(挂载完毕)、onUpdated
(更新完毕)、onBeforeUnmount
(卸载之前)
<template>
<div class="person">
<h2><span>求和:</span>{{sum}}</h2>
<button @click="changSum">点击我 Sum+1</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {onBeforeMount, onBeforeUpdate, onMounted, ref,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
let sum = ref(0);
function changSum() {
sum.value += 1 ;
}
console.log('setup');
// 生命周期钩子
onBeforeMount(() => {
console.log("挂载之前");
})
onMounted(()=>{
console.log("挂载完毕");
})
onBeforeUpdate(()=>{
console.log('更新之前')
})
onUpdated(()=>{
console.log('更新完毕')
})
onBeforeUnmount(()=>{
console.log('卸载之前')
})
onUnmounted(()=>{
console.log('卸载完毕')
})
</script>
- App.vue
<template>
<!--html区域-->
<div class="app">
<h2>果果 Hello Vue</h2>
<!-- 如果xxx是true则执行 Person组件,如果是false则不展示-->
<Person v-if="xxx" />
</div>
</template>
<script lang="ts" setup name="App">
//01 书写一个list用户数据 传入子组件 Person 符合自定义接口数据类型规范
import Person from "./components/Person.vue";
import {ref} from "vue";
let xxx = ref(true)
</script>
3.14. 自定义hook 类似于python 类 包导入
-
什么是
hook
?—— 本质是一个函数,把setup
函数中使用的Composition API
进行了封装,类似于vue2.x
中的mixin
。 -
自定义
hook
的优势:复用代码, 让setup
中的逻辑更清楚易懂。 -
案例如下
-
useDog.ts
文件内容 小狗数据相关数据和功能
import {reactive, onMounted} from "vue";
import axios,{AxiosError} from 'axios'
export default function() {
//01 小狗相关数据和功能 定一个空字符串数组类型
let dogList = reactive<string[]>([])
//02 书写获取小狗数据的功能
async function getDog(){
try {
// 访问url获取数据
let res = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
console.log(res.data.message)
// 追加到列表内
dogList.push(res.data.message)
}
catch(err){
console.log(err)
}
}
// 04 挂载钩子,初始化页面时候获取一次数据
onMounted(()=>{
// 调用函数
getDog()
})
return {getDog,dogList}
}
/*
解释下:
await 等待 axios.get() 发起的 HTTP 请求返回结果,然后继续执行后面的代码
当 getDog 被调用时,函数会发起一个 GET 请求,获取一个随机的小狗图片 URL。
等待请求完成并得到响应。
将获取到的图片 URL (res.data.message) 追加到 dogList 数组中。
如果请求失败,会捕获到错误并打印出错误信息。
useSum.ts
中内容如下:
import {ref, onMounted} from "vue";
export default () => {
// 01 用户相关数据和功能
let sum = ref(0);
function changSum() {
sum.value += 1 ;
}
function changSumJian() {
sum.value -= 1 ;
}
onMounted(() => {
changSum();
})
// 向外部暴漏
return {sum, changSum,changSumJian};
}
- 组件中具体使用:
<template>
<div class="person">
<h2><span>求和:</span>{{sum}}</h2>
<button @click="changSum">点击我 Sum+1</button>
<button @click="changSumJian">点击我 Sum-1</button>
<br>
<hr>
<h2>小狗图片</h2>
<!-- 注意 这里 v-for循环是有顺序的 值在前面 index在后面-->
<img v-for="(u,index) in dogList" :key="index" :src="(u as string)">
<button @click="getDog">再来一只狗</button>
</div>
</template>
<script lang="ts" setup name="Person">
// 02 导入自定义 hook
import useSum from "@/hooks/useSum.ts";
import useDog from "@/hooks/useDog.ts";
// 02 使用自定义 hook
const {sum,changSum,changSumJian} = useSum();
const {dogList,getDog} = useDog();
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
- 写在一个文件内 写法
<template>
<div class="person">
<h2><span>求和:</span>{{sum}}</h2>
<button @click="changSum">点击我 Sum+1</button>
<button @click="changSumJian">点击我 Sum-1</button>
<br>
<hr>
<h2>小狗图片</h2>
<!-- 注意 这里 v-for循环是有顺序的 值在前面 index在后面-->
<img v-for="(u,index) in dogList" :key="index" :src="(u as string)">
<button @click="getDog">再来一只狗</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref, reactive, onMounted} from "vue";
import axios,{AxiosError} from 'axios'
// 01 用户相关数据和功能
let sum = ref(0);
function changSum() {
sum.value += 1 ;
}
function changSumJian() {
sum.value -= 1 ;
}
//02 小狗相关数据和功能 定一个空字符串数组类型
let dogList = reactive<string[]>([])
// 03 书写获取小狗数据的功能
async function getDog(){
try {
// 访问url获取数据
let res = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
console.log(res.data.message)
// 追加到列表内
dogList.push(res.data.message)
}
catch(err){
console.log(err)
}
}
// 04 挂载钩子,初始化页面时候获取一次数据
onMounted(()=>{
// 调用函数
getDog()
})
console.log(dogList)
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>
四. 路由相关
4.1 路由使用规则
"""
需要安装路由
npm i vue-router
案例:
我们创建一个页面,上面有三个按钮对应是那个路由
首页
新闻
关于
目录结构
/Users/ningcaichen/Documents/02-python相关文档/05-vue/day01_vue3/src
├── App.vue
├── components
├── img
│ ├── 01.png
│ └── 02.jpg
├── main.ts
├── pages ## 路由组件存放位置
│ ├── About.vue
│ ├── Home.vue
│ └── News.vue
├── router ## 路由配置文件
│ └── index.ts
"""
- 图示
router/index.ts
路由配置文件代码如下:
// 01 导入包
import {createRouter,createWebHistory} from "vue-router";
// 02 导入路由组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
// 03 创建路由
const router = createRouter({
history:createWebHistory(), // 定义路由规则
routes:[
{
path:'/home', //路由路径
component:Home //路由组件
},
{
path:'/news',
component:News
},
{
path:'/about',
component:About
},
]
})
export default router; // 返回路由 给其它组件调用
main.ts
代码如下:
// 从 Vue 库中引入 `createApp` 函数,用于创建 Vue 应用实例
import { createApp } from 'vue'
// 引入根组件 App.vue,这通常是 Vue 应用的主界面组件,引入路由器
import App from './App.vue'
import router from './router'
// 创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载到整个应用程序
app.mount('#app')
App.vue
代码如下
<template>
<!--html区域-->
<div class="app">
<h2 class="title">Vue路由测试</h2>
<!-- 导航区 -->
<div class="navigate">
<!-- 路由链接 RouterLink active-class 如果谁被激活 会引用样式 -->
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
<RouterLink to="/about" active-class="active">关于</RouterLink>
</div>
<!-- 展示区 路由对应的展示区 RouterView -->
<div class="main-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script lang="ts" setup name="App">
// 01 引用包 RouterLink 路由跳转链接,RouterView 对应的展示区
import {RouterLink,RouterView} from "vue-router";
//01 引入包文件
</script>
<style>
/* App */
.title {
text-align: center;
word-spacing: 5px;
margin: 30px 0;
height: 70px;
line-height: 70px;
background-image: linear-gradient(45deg, gray, white);
border-radius: 10px;
box-shadow: 0 0 2px;
font-size: 30px;
}
.navigate {
display: flex;
justify-content: space-around;
margin: 0 100px;
}
.navigate a {
display: block;
text-align: center;
width: 90px;
height: 40px;
line-height: 40px;
border-radius: 10px;
background-color: gray;
text-decoration: none;
color: white;
font-size: 18px;
letter-spacing: 5px;
}
.navigate a.active {
background-color: #64967E;
color: #ffc268;
font-weight: 900;
text-shadow: 0 0 1px black;
font-family: 微软雅黑;
}
.main-content {
margin: 0 auto;
margin-top: 30px;
border-radius: 10px;
width: 90%;
height: 400px;
border: 1px solid;
}
</style>
4.2 两个注意点,路由目录
- 路由组件通常存放在
pages
或views
文件夹,一般组件通常存放在components
文件夹。- 通过点击导航,视觉效果上“消失” 了的路由组件,默认是被卸载掉的,需要的时候再去挂载。
4.4 路由器工作模式
(1) history
模式
优点:
URL
更加美观,不带有#
,更接近传统的网站URL
。缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有
404
错误。
const router = createRouter({ history:createWebHistory(), //history模式 /******/ })
(2) hash
模式
优点:兼容性更好,因为不需要服务器端处理路径。
缺点:
URL
带有#
不太美观,且在SEO
优化方面相对较差。
const router = createRouter({ history:createWebHashHistory(), //hash模式 /******/ })
4.5. to的两种写法
<!-- 第一种:to的字符串写法 -->
<RouterLink active-class="active" to="/home">主页</RouterLink>
<!-- 第二种:to的对象写法 -->
<RouterLink active-class="active" :to="{path:'/home'}">Home</RouterLink>
4.6. 命名路由
作用:可以简化路由跳转及传参。
给路由规则命名:
routes:[
{
name:'zhuye',
path:'/home',
component:Home
},
{
name:'xinwen',
path:'/news',
component:News,
},
{
name:'guanyu',
path:'/about',
component:About
}
]
跳转路由:
<!--简化前:需要写完整的路径(to的字符串写法) -->
<router-link to="/news/detail">跳转</router-link>
<!--简化后:直接通过名字跳转(to的对象写法配合name属性) -->
<router-link :to="{name:'guanyu'}">跳转</router-link>
4.6 嵌套路由
- 编写
News
的子路由:Detail.vue
- 配置路由规则,使用
children
配置项: - 可以使用 :to query 方式传递参数
route/index.ts
路由文件,添加子路由
// 01 导入包
import { createRouter, createWebHistory } from "vue-router";
// 02 导入路由组件
import Home from '@/pages/Home.vue';
import News from '@/pages/News.vue';
import About from '@/pages/About.vue';
import Detail from "@/pages/Detail.vue";
// 03 创建路由
const router = createRouter({
history: createWebHistory(), // 定义路由规则
routes: [
{
path: '/home', // 路由路径
component: Home // 路由组件
},
{
path: '/news', // /news
component: News,
children: [
{
name: 'xinwen', // 子路由的name
path: 'detail', // 正确的子路由路径是 detail
component: Detail // 详情页组件
}
]
},
{
name: 'GunYu',
path: '/about',
component: About
}
]
});
export default router;
news.vue
向子路由组件发送请求 传递数据
/*
#01 RouterLink 携带参数,跳转到子路由 /news/detail
<RouterLink
:to="{
path:'/news/detail',
query: {
id: news.id,
title: news.title,
content: news.content,
}
}">
{{ news.title }}
</RouterLink>
*/
<template>
<div class="news">
<!-- 导航区域-->
<ul>
<li v-for="news in newslist " :key="news.id" >
<!-- 第一种写法 -->
<!-- <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink> -->
<RouterLink
:to="{
// name:'xinwen', // 用名称也可以 path和name 二选一
path:'/news/detail',
query: {
id: news.id,
title: news.title,
content:news.content,
}}">
{{news.title}}
</RouterLink>
</li>
</ul>
<!-- 展示区域-->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang="ts" name="News">
import {reactive} from "vue";
import {RouterLink,RouterView} from "vue-router";
// 01 定义新闻页数据
let newslist = reactive([
{id:'01',title:"著名作家果果出现...",content:"本台记者报道,著名作家果果出现在上海地铁站"},
{id:'02',title:"重大发现 我国今天...",content:"本台记者报道,重大发现 我国今天"},
{id:'03',title:"果果竟然攻破了...",content:"本台记者报道,果果竟然攻破了"},
{id:'04',title:"今晚将不再平凡...",content:"本台记者报道,今晚将不再平凡"},
]
)
</script>
<style scoped>
/* 新闻 */
.news {
padding: 0 20px;
display: flex;
justify-content: space-between;
height: 100%;
}
.news ul {
margin-top: 30px;
padding-left: 10px;
}
.news ul li {
color: #64967E;
}
.news li>a {
font-size: 18px;
line-height: 40px;
text-decoration: none;
color: #64967E;
text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
width: 70%;
height: 90%;
border: 1px solid;
margin-top: 20px;
border-radius: 10px;
}
</style>
Detail.vue
文件接收数据
<template>
<div>
<h2>内容展示页面</h2>
</div>
<ul class="news-list">
<li>编号:{{ query.id }}</li>
<li>标题:{{ query.title }}</li>
<li>内容:{{ query.content }}</li>
</ul>
</template>
<script setup lang="ts">
//01 接收参数
import {toRefs} from "vue";
import {useRoute} from "vue-router";
// 02 获取用户的查询参数 ,并且解压赋值
let route = useRoute();
let {query} = toRefs(route)
</script>
<style scoped>
.news-list {
list-style: none;
padding-left: 20px;
}
.news-list>li {
line-height: 30px;
}
</style>
4.7 路由传参
query参数
- 无需路由配置
-
传递参数
News.vue
<!-- 跳转并携带query参数(to的字符串写法) --> <router-link to="/news/detail?a=1&b=2&content=欢迎你"> 跳转 </router-link> <!-- 跳转并携带query参数(to的对象写法) --> <RouterLink :to="{ //name:'xiang', //用name也可以跳转 path:'/news/detail', query:{ id:news.id, title:news.title, content:news.content } }" > {{news.title}} </RouterLink> // 其实是 RouterLink帮你生成一个a标签
-
接收参数:
Detail.vue
<template> <div> <h2>内容展示页面</h2> </div> <ul class="news-list"> <li>编号:{{ query.id }}</li> <li>标题:{{ query.title }}</li> <li>内容:{{ query.content }}</li> </ul> </template> <script setup lang="ts"> //01 接收参数 import {toRefs} from "vue"; import {useRoute} from "vue-router"; // 02 获取用户的查询参数 ,并且解压赋值 let route = useRoute(); let {query} = toRefs(route)
params参数
- 路由定义占位参数
router/index.ts
// 需要定义需要传递参数 path: 'detail/:id/:title/:content?', 问好代表可有可无
{
path: '/news', // /news
component: News,
children: [
{
name: 'xinwen', // 子路由的name
path: 'detail/:id/:title/:content?', // 正确的子路由路径是 detail
component: Detail // 详情页组件
}
]
},
- 传递参数
News.vue
<!-- 跳转并携带params参数(to的字符串写法) -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
<!-- 跳转并携带params参数(to的对象写法) -->
<RouterLink
:to="{
name:'xiang', //用name跳转
params:{
id:news.id,
title:news.title,
content:news.title
}
}"
>
{{news.title}}
</RouterLink>
- 接收参数:
Detile.vue
<template>
<div>
<h2>内容展示页面</h2>
</div>
<ul class="news-list">
<li>编号:{{ route.params.id }}</li>
<li>标题:{{ route.params.title }}</li>
<li>内容:{{ route.params.content }}</li>
</ul>
</template>
<script setup lang="ts">
//01 接收参数
import {useRoute} from "vue-router";
// 02 获取用户的查询参数
const route = useRoute();
console.log(route.params)
备注1:传递
params
参数时,若使用to
的对象写法,必须使用name
配置项,不能用path
。备注2:传递
params
参数时,需要提前在规则中占位
4.8 路由的props配置
- 作用:让路由组件更方便的收到参数(可以将路由参数作为
props
传给组件)
(1) 布尔值写法
-
路由文件内设置props
router/index.ts
-
props: true
{
path: '/news', // /news
component: News,
children: [
{
name: 'xinwen', // 子路由的name
path: 'detail/:id/:title/:content?', // 需要使用:参数占位置
component: Detail, // 详情页组件
// 01 将路由收到的所有params参数作为props传给路由组件
props: true
}
}
]
},
- 传递参数
News.vue
// 注意这里只能用 params 传递参数
<RouterLink
:to="{
name: 'xinwen', // 只能使用 name别名进行跳转
params: {
id: news.id,
title: news.title,
content: news.content,
}
}">
{{ news.title }}
</RouterLink>
- 接收参数:
Detile.vue
<template>
<div>
<h2>内容展示页面</h2>
</div>
<ul class="news-list">
<li>编号:{{ id }}</li>
<li>标题:{{ title }}</li>
<li>内容:{{ content }}</li>
</ul>
</template>
<script setup lang="ts">
//01 接收参数
import { defineProps } from 'vue'
//02 接收参数 正常写这个就行
// defineProps(['id', 'title', 'content'])
// 如果想打印可以解压赋值
const { id, title, content } = defineProps(['id', 'title', 'content'])
// 打印到控制台
console.log('id:', id)
console.log('title:', title)
console.log('content:', content)
</script>
(2) 函数写法 重要
- 路由文件内设置 props
router/index.ts
// 这里展示返回 query 类型携带的参数
{
path: '/news', // /news
component: News,
children: [
{
name: 'xinwen', // 子路由的name
path: 'detail', // 需要使用:参数占位置
component: Detail, // 详情页组件
// 02 函数写法,作用:把返回的对象中每一组key-value作为props传给Detail组件
// params参数和query参数都可以使用
props(route) {
return route.query;
}
}
}
]
},
- 传递参数
News.vue
// 修改对应的类型 query
<RouterLink
:to="{
name: 'xinwen', // 只能使用 name别名进行跳转
query: {
id: news.id,
title: news.title,
content: news.content,
}
}">
{{ news.title }}
</RouterLink>
// 接收参数方法一致:`Detile.vue`文件
defineProps(['id', 'title', 'content'])
(3) 对象写法
// 不推荐
{
name:'xinwen',
path:'/news',
component:News,
children:[
{
name:'xiang',
path:'detail',
component:Detail,
// 第三种写法:对象写法,可以自己决定将什么作为props给路由组件
props:{
a:100,
b:200,
c:300
}
}
]
},
4.9 replace属性
- 作用:控制路由跳转时操作浏览器历史记录的模式。
- 浏览器的历史记录有两种写入方式:分别为
push
和replace
:push
是追加历史记录(默认值)。replace
是替换当前记录。
- 开启
replace
模式:
// RouterLink 标签内加入 replace 代表开启
<div class="navigate">
<RouterLink replace to="/home" active-class="active">首页</RouterLink>
<RouterLink replace :to="{path:'/news'}" active-class="active" >新闻</RouterLink>
<RouterLink replace :to="{name:'GunYu'}" active-class="active">关于</RouterLink>
4.10 编程是路由导航
路由组件的两个重要的属性:$route
和$router
变成了两个hooks
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)
(1) 进入首页3s 自动跳转到新闻页
生成路由对象
const router = useRouter();
页面跳转
router.push('/news');
// 01 引用包
import {useRouter} from "vue-router";
import {onMounted} from "vue";
// 首页3s自动跳到新闻页面
// 01 生成路由对象
const router = useRouter();
// 02 在组件挂载完成后 执行定时setTimeout 3s操作 router.push('/news'); 页面跳转
onMounted(() => {
setTimeout(()=>{
router.push('/news');
},3000
)
})
</script>
(2) 点击查看button按钮 实现跳转
<template>
<div class="news">
<!-- 导航区域-->
<ul>
<li v-for="news in newslist " :key="news.id">
<!-- 按钮位置-->
<button class="btn" @click="showNewsDetail(news)">点击查看新闻</button>
<RouterLink
:to="{
name: 'xinwen', // 只能使用 name别名进行跳转
query: {
id: news.id,
title: news.title,
content: news.content,
}
}">
{{ news.title }}
</RouterLink>
</li>
</ul>
<!-- 展示区域-->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang="ts" name="News">
import {reactive} from "vue";
import {RouterLink, RouterView,useRouter} from "vue-router";
// 01 定义新闻页数据
let newslist = reactive([
{id: '01', title: "著名作家果果出现...", content: "本台记者报道,著名作家果果出现在上海地铁站"},
{id: '02', title: "重大发现 我国今天...", content: "本台记者报道,重大发现 我国今天"},
{id: '03', title: "果果竟然攻破了...", content: "本台记者报道,果果竟然攻破了"},
{id: '04', title: "今晚将不再平凡...", content: "本台记者报道,今晚将不再平凡"},
]
)
// 点击查看新闻跳转页面
// 01 生成一个router hook
const router = useRouter();
// 02 定义 News数据接口规范
interface News {
title: string;
content: string;
id: string;
}
// 03 书写功能函数 router.replace(to 写什么,这里写什么即可) 接收传递的参数
function showNewsDetail(news:News) {
router.replace({
name: 'xinwen',
query: {
id: news.id,
title: news.title,
content: news.content,
}
})
}
</script>
4.10 路由的重定向
-
作用:将特定的路径,重新定向到已有路由。
-
具体编码:
#01 将 / 重定向到 /home 路径下 { path:'/', redirect:'/home' }
五. pinia 数据集中化管理
5.1 准备一个效果
- 实现下方图片内功能
App.vue
组件代码
- 引用
Count
和Lovetalk
组件
<template>
<!--html区域 引用 Count 和 Lovetalk 组件-->
<div class="app">
<Count/>
<hr>
<Lovetalk/>
</div>
</template>
<script lang="ts" setup name="App">
import Count from "@/components/Count.vue";
import Lovetalk from "@/components/LoveTalk.vue";
</script>
<style>
</style>
Count.vue
组件内容
<template>
<div class="count">
<h2>当前的求和为: {{sum}}</h2>
<select name="" id="" v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add">加</button>
<button @click="minus">减</button>
</div>
</template>
<script setup lang="ts" name="Count">
import {ref} from "vue";
// 01 定义数据
let sum = ref(1);
let n = ref(1);
// 02 定义函数
function add() {
sum.value += n.value;
}
function minus() {
sum.value -= n.value;
}
</script>
<style scoped>
.count {
background-color: skyblue;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>
``Lovetalk` 组件内容
<template>
<div class="talk">
<button @click="getLoveTalk">点击获取一句土味情话</button>
<ul>
<li v-for="obj in talkList" :key="obj.id">{{obj.title}}</li>
</ul>
</div>
</template>
<script setup lang="ts" name="LoveTalk">
import {reactive} from "vue";
import axios from "axios";
import {nanoid} from "nanoid";
// 创建初始化数据
let talkList = reactive([
{id:'01',title:'果果~ 今天你有点怪,哪里怪?怪好看的!'},
{id:'02',title:'草莓、蓝莓、蔓越莓,果果今天想我了没?'},
{id:'03',title:'果果说:心里给你留了一块地,我的死心塌地'}
])
// 创建方法获取数据
async function getLoveTalk(){
// 发请求,下面这行的写法是:连续解构赋值+重命名
// let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
let res = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 把请求回来的字符串,包装成一个对象 这里 content 是我们想要的话
console.log(res.data.content);
// 02 生成一个数组
let obj = {
id: nanoid(),
title: "果果" + " " + res.data.content,
}
console.log(obj)
// 03 追加到数组内
talkList.unshift(obj)
}
</script>
<style scoped>
.talk {
background-color: orange;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
</style>
5.2 搭建pinia环境
第一步:npm install pinia
第二步:操作src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
/* 引入createPinia,用于创建pinia */
import { createPinia } from 'pinia'
/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)
/* 使用插件 */{}
app.use(pinia)
app.mount('#app')
- 此时服务器已经有 pinia环境了
5.3【存储+读取数据】
Store
是一个保存:状态、业务逻辑 的实体,每个组件都可以读取、写入它。- 它有三个概念:
state
、getter
、action
,相当于组件中的:data
、computed
和methods
。 - 具体编码:
src/store/count.ts
store/count.ts
和 store/lovetalk.ts
存储文件数据
// 引入包
import {defineStore} from 'pinia';
// 定义并暴漏一个store 传入ID值和文件名一致即可
export const useCountStore = defineStore('count', {
// 真正存储数据的地址
state(){
return {
sum:6
}
},
})
// 引入包
import {defineStore} from 'pinia';
// 定义并暴漏一个store 传入ID值和文件名一致即可
export const useTalkStore = defineStore('talk', {
// 真正存储数据的地址
state(){
return {
talkList: [
{ id: '01', title: '果果~ 今天你有点怪,哪里怪?怪好看的!' },
{ id: '02', title: '草莓、蓝莓、蔓越莓,果果今天想我了没?' },
{ id: '03', title: '果果说:心里给你留了一块地,我的死心塌地' },
]
}
},
})
组件内读取数据
LoveTalk.vue
文件内容
<template>
<div class="talk">
<button @click="getLoveTalk">点击获取一句土味情话</button>
<ul>
<li v-for="obj in talkStore.talkList" :key="obj.id">{{obj.title}}</li>
</ul>
</div>
</template>
<script setup lang="ts" name="LoveTalk">
import {reactive} from "vue";
import axios from "axios";
import {nanoid} from "nanoid";
import {useTalkStore} from "@/store/loveTalk.ts";
// 创建初始化数据
const talkStore = useTalkStore();
console.log(talkStore.talkList);
// 创建方法获取数据
async function getLoveTalk(){
// 发请求,下面这行的写法是:连续解构赋值+重命名
let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
let res = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 把请求回来的字符串,包装成一个对象 这里 content 是我们想要的话
console.log(res.data.content);
// 02 生成一个数组
let obj = {
id: nanoid(),
title: "果果" + " " + res.data.content,
}
console.log(obj)
// 03 追加到数组内
talkStore.talkList.unshift(obj)
}
</script>
<style scoped>
.talk {
background-color: orange;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px;
}
</style>
Count.vue
文件内容
<template>
<div class="count">
<h2>当前的求和为: {{countStore.sum }}</h2>
<select name="" id="" v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add">加</button>
<button @click="minus">减</button>
</div>
</template>
<script setup lang="ts" name="Count">
import {ref} from "vue";
//引用对应的 store
import { useCountStore } from "@/store/count";
// 调用
const countStore = useCountStore();
// 01 定义数据
// let sum = ref(1);
let n = ref(1);
// 02 定义函数
function add() {
countStore.sum += n.value;
}
function minus() {
countStore.sum -= n.value;
}
</script>
5.4 修改数据 (三种方式)
-
第一种修改方式,直接修改
function add() { countStore.sum += n.value; countStore.sum = 666; }
-
第二种修改方式:批量修改
countStore.$patch({ sum:999, school:'atguigu' })
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~