Vue3+ TypeScript 零基础教学

Vue3 初步使用教程

目录

一. 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.cnvite的优势如下:

  • 轻量快速的热重载(HMR),能实现极速的服务启动。
  • TypeScriptJSXCSS 等支持开箱即用。
  • 真正的按需编译,不再等待整个应用编译完成。
  • 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调试页面
  
  • 图书

image-20250214123448663

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>


  • 页面

image-20250214130659914

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
  • 查看电话号码
  • Vue2API设计是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>



image-20250214141512686

三. Vue3核心语法

3.1. OptionsAPI 与 CompositionAPI

  • Vue2API设计是Options(配置)风格的。
  • Vue3API设计是Composition(组合)风格的。

(1) Options API 的弊端

Options类型的 API,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamethodscomputed,不便于维护和复用。

2.gif

(2) Composition API 的优势

可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。

3.gif

3.2. 拉开序幕的 setup

(1) setup 概述

setupVue3中一个新的配置项,值是一个函数,它是 Composition API “表演的舞台,组件中所用到的:数据、方法、计算属性、监视......等等,均配置在setup中。

特点如下:

  • setup函数返回的对象中的内容,可直接在模板中使用。
  • setup中访问thisundefined
  • 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>
  • 区别

image-20250214151039136

(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 的内容

image-20250214154104337

(3) setup 与 Options API 的关系

  • Vue2 的配置(datamethos......)中可以访问到 setup中的属性、方法。
  • 但在setup不能访问到Vue2的配置(datamethos......)。
  • 如果与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>

扩展:上述代码,还需要编写一个不写setupscript标签,去指定组件名字,比较麻烦,我们可以借助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>


image-20250214155321710

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>


  • 图示

image-20250214172455569

3.5 ref和reactive对比

宏观角度看:

  1. ref用来定义:基本类型数据对象类型数据
  2. reactive用来定义:对象类型数据
  • 区别:
  1. ref创建的变量必须使用.value(如果是vscode可以使用volar插件自动添加.value)。

    自动补充value

  2. reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。

  • 使用原则:
  1. 若需要一个基本类型的响应式数据,必须使用ref
  2. 若需要一个响应式对象,层级不深,refreactive都可以。
  3. 若需要一个响应式对象,且层级较深,推荐使用reactive

3.7. toRefs 与 toRef 转为响应式ref

  • 作用:将一个响应式对象中的每一个属性,转换为ref对象。
  • 备注:toRefstoRef功能一致,但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 和 settercomputed 不仅可以用来获取计算值,还可以设置新的值。

  • 基本语法
#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>

image-20250217113343244

3.9 watch监视

  • 作用:监视数据的变化(和Vue2中的watch作用一致)
  • 特点:Vue3中的watch只能监视以下四种数据
  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值(getter函数)。
  4. 一个包含上述内容的数组。

我们在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定义的对象中的属性,newValueoldValue 都是新值,因为它们是同一个对象。
  • 若修改整个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>

情况四 监控对象的某个属性

监视refreactive定义的【对象类型】数据中的某个属性,注意点如下:

  1. 若该属性值不是【对象类型】,需要写成函数形式。
  2. 若该属性值是依然是【对象类型】,可直接编,也可写成函数,建议写成函数。

结论:监视的要是对象里的属性,那么最好写函数式,注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视


<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

    1. 都能监听响应式数据的变化,不同的是监听数据变化的方式不同
    2. watch:要明确指出监视的数据
    3. 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的生命周期

    创建阶段:beforeCreatecreated

    挂载阶段:beforeMountmounted

    更新阶段:beforeUpdateupdated

    销毁阶段:beforeDestroydestroyed

  • Vue3的生命周期

    创建阶段:setup

    挂载阶段:onBeforeMountonMounted

    更新阶段:onBeforeUpdateonUpdated

    卸载阶段:onBeforeUnmountonUnmounted

  • 常用的钩子: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>

image-20250218123006759

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>


image-20250218130135119

四. 路由相关

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

"""


  • 图示

image-20250218152427801

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 两个注意点,路由目录

  1. 路由组件通常存放在pagesviews文件夹,一般组件通常存放在components文件夹。
  2. 通过点击导航,视觉效果上“消失” 了的路由组件,默认是被卸载掉的,需要的时候再去挂载

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 嵌套路由

  1. 编写News的子路由:Detail.vue
  2. 配置路由规则,使用children配置项:
  3. 可以使用 :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>

image-20250218172804241

4.7 路由传参

query参数

  • 无需路由配置
  1. 传递参数 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标签 
    
    
  2. 接收参数: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参数

  1. 路由定义占位参数 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      // 详情页组件
                }
            ]
        },
          
          
          
          
  1. 传递参数 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>
  1. 接收参数: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属性

  1. 作用:控制路由跳转时操作浏览器历史记录的模式。
  2. 浏览器的历史记录有两种写入方式:分别为pushreplace
    • push是追加历史记录(默认值)。
    • replace是替换当前记录。
  3. 开启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>

image-20250219131644117

4.10 路由的重定向

  1. 作用:将特定的路径,重新定向到已有路由。

  2. 具体编码:

    #01 将 / 重定向到 /home 路径下
    
    {
        path:'/',
        redirect:'/home'
    }
    
    
    

五. pinia 数据集中化管理

5.1 准备一个效果

  • 实现下方图片内功能

pinia_example

App.vue 组件代码

  • 引用 CountLovetalk组件

<template>
<!--html区域 引用 CountLovetalk 组件-->
  <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>

image-20250219142715719

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环境了

image-20250219134407371

5.3【存储+读取数据】

  1. Store是一个保存:状态业务逻辑 的实体,每个组件都可以读取写入它。
  2. 它有三个概念:stategetteraction,相当于组件中的: datacomputedmethods
  3. 具体编码:src/store/count.ts

store/count.tsstore/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>

image-20250219155151426

5.4 修改数据 (三种方式)

  1. 第一种修改方式,直接修改

    function add() {
      countStore.sum += n.value;
      countStore.sum = 666;
    }
    
  2. 第二种修改方式:批量修改

    countStore.$patch({
      sum:999,
      school:'atguigu'
    })
    
posted @   宁采臣open  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示