【学习笔记】Vue3（Ⅱ）

已于 2024-06-04 06:10:43 修改
阅读量732 收藏 8
点赞数 4
文章标签： 学习 笔记 javascript typescript vue3 vite vue
于 2024-06-03 11:05:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eddie_hyh/article/details/139382860
版权
本文深入探讨Vue3的进阶特性，包括路由的配置和使用，如History和Hash模式、to的写法、嵌套路由、query和params参数、编程式导航；Pinia的状态管理，如环境搭建、数据读取和修改；组件通信的多种方式，如props、自定义事件、mitt、$attrs、$refs和v-model；最后介绍了Vue3的其他API和新组件，如Teleport和Suspense。
摘要由CSDN通过智能技术生成

Vue3（Ⅱ）

3、 进阶 —— 路由

      3.1、示例

安装： npm i vue-router

         ① 在 pages/ （或者 view/ ）下创建路由组件

<!-- src/pages/About.vue -->
<template>
    <h1>About</h1>
</template>
<script lang="ts" setup name="About"></script>


<!-- src/pages/News.vue -->
<template>
    <h1>News</h1>
</template>
<script lang="ts" setup name="News"></script>


<!-- src/pages/Home.vue -->
<template>
    <h1>Home</h1>
</template>
<script lang="ts" setup name="Home"></script>

         ② 编写路由配置文件

// src/router/index.ts
import {
    createRouter, createWebHistory } from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

const router = createRouter({
   
    // 路由器的工作模式选用history
    history: createWebHistory(),
    // 创建一个个路由规则
    routes: [
        {
   
            path: '/home',
            component: Home
        },
        {
   
            path: '/news',
            component: News
        },
        {
   
            path: '/about',
            component: About
        }
    ]
})
export default router

使用 History 模式的 API：createWebHistory
使用 Hash 模式的 API：createWebHashHistory

         ③ 让 vue 实例来使用这个配置文件

// src/main.ts
// 引入
import {
    createApp } from 'vue';
import router from './router'
// 组件
import App from './App.vue';
// 创建实例
const app = createApp(App);
// 使用
app.use(router)
// 挂载
app.mount('#app')

         ④ 编写 App 组件

<!-- src/App.vue -->
<template>
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
        <span class="rlink"><RouterLink to="/home">首页</RouterLink></span>
        <span class="rlink"><RouterLink to="/news">新闻</RouterLink></span>
        <span class="rlink"><RouterLink to="/about">关于</RouterLink></span>
    </div>
    <!-- 展示区 -->
    <div class="content">
        <RouterView></RouterView>
    </div>
</template>

<script lang="ts" setup name="App">
</script>

<style>
    .rlink {
     
        margin-right: 10px;
    }
    .content {
     
        background-color: cadetblue;
    }
</style>

Hash模式的缺点之一：在 SEO 优化方面相对较差，SEO（Search Engine Optimization，搜索引擎优化）是一组策略和技术，用于提高网站在搜索引擎结果页面（SERP）中的排名，从而增加网站的可见性和流量。SEO 涉及多个方面，包括关键词优化、内容质量、网站结构、外部链接和技术因素等

      3.2、to 的两种写法

类型 写法
字符串 to=“/home”
对象 :to=“{path:‘/home’}”
to 前要加冒号，这样才能把双引号的内容解析为对象，否则只是一个字符串

      3.3、命令路由

         在路由配置文件中，为路由规则添加 name 配置，例如

// src/router/index.ts
{
   
    name:'myhome',
    path:'/home',
    component:Home
}

         在使用的时候，需要配合 to 的对象型写法使用，例如

<RouterLink :to="{name:'myhome'}">首页</RouterLink >

      3.4、嵌套路由

         在路由配置文件中，为路由规则添加 children 配置，例如

// src/router/index.ts
{
   
    path: '/news',
	component: News,
	// 相当于一个 routes 也是一个数组
	children: [
		{
   
			name: 'xiangqing',
			path: 'detail', // 前面不能加 / 否则这个
			component: Detail
		}
	]
}

         相应的在使用时如下

<RouterLink to="/news/detail">Detail</RouterLink>
<!-- 或 -->
<RouterLink :to="{path:'/news/detail'}">Detail</RouterLink>
<!-- 或 -->
<RouterLink :to="{name:'xiangqing'}">Detail</RouterLink>

      3.5、query 参数

         传递参数有两种写法：字符串、对象

<!-- src/pages/News.vue -->
<template>
	<!-- 写法1：字符串 -->
    <span class="rlink">
        <RouterLink to="/news/detail?id=SWE19059&name=niki">详情（字符串</RouterLink>
    </span>
    <!-- 写法2：对象 -->
    <span class="rlink">
        <RouterLink
            :to="{
                name: 'xiangqing',
                query: { id: 'SWE20059', name: 'pyy' },
            }"
            >详情（对象）
        </RouterLink>
    </span>
    <div class="content">
    	<RouterView></RouterView>
    </div>
</template>
<script lang="ts" setup name="News"></script>

         使用 useRoute() 这个 hook 接收

<!-- src/pages/Detail.vue -->
<template>
    <h1>id：{
  { id }}</h1>
    <h1>name：{
  { name }}</h1>
</template>

<script lang="ts" setup name="Detail">
    import {
      useRoute } from "vue-router";
    const route = useRoute();
    let {
      id, name } = route.query;
</script>

      3.6、params 参数

         修改路由配置

// src/router/index.ts
{
   
    path: '/news',
    component: News,
    children: [
        {
   
            name: 'xiangqing',
            path: 'detail/:id/:name', //表示在使用 path 时，detail路径后面出现的部分作为 params 参数，id 和 name 是参数名
            component: Detail
        }
    ]
},

         同样地，传递参数有两种写法：字符串、对象

<!-- src/pages/News.vue -->
<template>
	<!-- 写法1：字符串 -->
    <span class="rlink">
        <RouterLink to="/news/detail/SWE19059/niki">详情（字符串）</RouterLink>
    </span>
    <!-- 写法2：对象 -->
    <span class="rlink">
        <RouterLink
            :to="{
                name: 'xiangqing',
                params: { id: 'SWE20059', name: 'pyy' },
            }"
            >详情（对象）
        </RouterLink>
    </span>
    <div class="content">
        <RouterView></RouterView>
    </div>
</template>

<script lang="ts" setup name="News"></script>

关于对象写法
1、query 可以搭配 path 或 name使用
2、params 只能搭配 name 使用

         使用 useRoute() 接收

<!-- src/pages/Detail.vue -->
<template>
    <h1>id：{
  { id }}</h1>
    <h1>name：{
  { name }}</h1>
</template>

<script lang="ts" setup name="Detail">
    import {
      useRoute } from "vue-router";
    const route = useRoute();
    let {
      id, name } = route.params;
</script>

      3.7、路由的 props 配置

         在路由配置文件中，为路由规则添加 props 配置，一共有三种写法：对象、布尔值、函数式

{
   
    path: '/news',
    component: News,
    children: [
        {
   
            name: 'xiangqing',
            path: 'detail/:id/:name',
            component: Detail,
            
            // 写法1：布尔值 ，为true则把params传给子组件
            // props: true
            
            // 写法2：对象
            // props:{gender:'male',school:'MIT'}
            
            // 写法3：函数
            props(route) {
   
                return route.query //需要返回一个对象
            }
        }
    ],
},

         在 News 组件中使用 /news/detail/SWE19059/niki?hobby=rap 进行跳转，然后在 Detail 组件中使用 defineProps 进行接收

<!-- src/pages/Detail.vue -->
<template>
    <!-- 对应布尔值写法 -->
    <!-- <h1>id：{
   { id }}</h1>
    <h1>name：{
   { name }}</h1> -->

    <!-- 对应对象写法 -->
    <!-- <h1>gender：{
   { gender }}</h1>
    <h1>school：{
   { school }}</h1> -->

    <!-- 对应函数式写法 -->
    <h1>hobby：{
  { hobby }}</h1>
</template>

<script lang="ts" setup name="Detail">
    // 对应布尔值写法
    // defineProps(["id", "name"]);

    // 对应对象写法
    // defineProps(["gender", "school"]);

    // 对应函数式写法
    const {
      hobby } = defineProps(["hobby"]);
    console.log(hobby)
</script>

      3.8、replace 属性

         replace 属性用于控制路由跳转时操作浏览器历史记录的模式，浏览器的历史记录有两种写入方式：分别为 push 和 replace

方式 描述
push（默认） 追加历史记录
replace 替换当前的记录

         开启 replace 模式的方法只需要在 RouterLink 标签中进行声明即可，例如

<RouterLink replace ...>xxx</RouterLink>

      3.9、编程式导航

         跳转要使用 useRouter() 这个 hook 来完成

<!-- src/pages/News.vue -->
<template>
    <button @click="toDetail">跳转</button>
    <RouterView></RouterView>
</template>

<script lang="ts" setup name="News">
    import {
      useRouter } from "vue-router";
    const router = useRouter();
    function toDetail() {
     
        router.push({
        //相应的有 route.replace 这个方法
            name: "xiangqing",
            params: {
     
                id: "SWE19059",
                name: "niki",
            },
        });
    }
</script>

Tip
1、Vue2 中的 $route、$routes 在 Vue3 中变成了 useRoute、useRouter 这两个 hook
2、在 Vue2 中使用编程式导航重复跳转时会报错，但是 Vue3 中不会

      3.10、重定向

         可以用于设置默认呈现的组件，不然一般是需要先点击某个 RouterLink 才会显示出相应的组件，例如现在配置一组路由规则如下，那么在访问 / 时，会自动激活其下的 /home 对应的组件

{
   
    path:"/",
    redirect:'/home'
},

4、 进阶 —— Pinia

      4.1、概述

        Pinia 是 Vue 3 的一个符合直觉的 Vue.js 状态管理库，是 Vuex 的替代品。Pinia 提供了一种简洁、类型安全的方式来管理应用中的状态。它具有更好的 TypeScript 支持、简洁的 API 设计以及模块化的状态管理方式

安装：npm install pinia

特性 描述
模块化设计 每个状态存储（store）都是一个模块，可以根据需要创建多个 store
类型安全 对 TypeScript 友好，提供了良好的类型推导和类型检查
简洁的 API 使用更简洁的 API 设计来管理状态、定义 getter 和 actions
响应式 使用 Vue 3 的响应性系统，自动追踪依赖
支持插件 可以通过插件扩展功能，例如持久化插件等

      4.2、环境搭建

        修改 src/main.ts 如下

// 引入
import {
    createApp } from 'vue';
import router from './router'
import {
    createPinia } from 'pinia'

// 组件
import App from './App.vue';

// 创建实例
const app = createApp(App);

// 使用
// 使用路由配置
app.use(router)
// 使用Pinia
const pinia = createPinia()
app.use(pinia)

// 挂载
app.mount('#app')

        完成之后观察 Vue Devtools 可以看到多出一个菠萝🍍的选项，说明环境搭建成功
在这里插入图片描述

      4.3、示例

        Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。它有三个概念：state、getter、action，相当于组件中 data、computed 和 methods 的概念
        ① 存储数据：编写 store 定义文件 src/store/count.ts 如下

// 引入defineStore用于创建store
import {
   defineStore} from 'pinia'

// 定义并暴露一个store，推荐用 hook 的命名方式即 use...
export const useCountStore = defineStore(
    // 仓库名
    'count',
    // 配置
    {
   
        // 动作
        actions: {
   },
        // 状态
        state() {
   
            return {
   
                count1: 0,
                count2: 100
            }
        },
        // 计算
        getters: {
   }
    }
)

        ② 读取数据

<!-- src/pages/Home.vue -->
<template>
    <h2>count1：{
  { countStore.count1 }}</h2>
    <h2>count2：{
  { countStore.count2 }}</h2>
</template>

<script lang="ts" setup name="Home">
    import {
      useCountStore } from "@/store/count";
    // 获取 store 实体，Pinia 会确保不同组件返回的是同一个 store 实例
    const countStore = useCountStore();
</script>

      4.4、修改数据（三种方法）

        方法一：在组件中直接修改

<!-- src/pages/Home.vue -->
<template>
    <h2>count1：{
  { countStore.count1 }}</h2>
    <h2>count2：{
  { countStore.count2 }}</h2>
    <button @click="change1">修改count1</button>
    <button @click="change2">修改count2</button>
</template>

<script lang="ts" setup name="Home">
    import {
      useCountStore } from "@/store/count";
    const countStore = useCountStore();
    // 直接修改
    function change1() {
     
        countStore.count1 = 10;
    }
    // 批量修改
    function change2() {
     
        countStore.count1 = 50;
        countStore.count2 = 200;
    }
</script>

        方法二：在仓库定义文件中定义处理状态的方法（action），然后在组件中调用以达到修改数据的目的

// src/store/count.ts
actions: {
   
    cout1_add(value: number) {
   
        this.count1 += value
    },
    count2_sub(value: number) {
   
        this.count2 -= value
    }
}

<!-- src/pages/Home.vue -->
<template>
    <h2>count1：{
  { countStore.count1 }}</h2>
    <h2>count2：{
  { countStore.count2 }}</h2>
    <button @click="add">count1++</button>
    <button @click="sub">count2--</button>
</template>

<script lang="ts" setup name="Home">
    import {
      useCountStore } from "@/store/count";
    const countStore = useCountStore();
    function add() {
最低0.47元/天 解锁文章
贺一航【Niki】
关注
Vue2学习笔记(尚硅谷天禹老师)
weixin_44992737的博客
04-24 1703
Vue可以看作是一个数据管理大师，其目的通常是将其管理的数据展示到HTML页面上，或者收集HTML页面上的数据进行储存在自身或者传递给服务器。
【学习笔记】前端（I）—— Vue2（Ⅱ）
Eddie_hyh的博客
05-04 901
前端第一部分：vue2（Ⅱ）
JS+Vue学习笔记
刘莎
11-29 1896
学习js和vue
【学习笔记】Webpack5（Ⅱ）
Eddie_hyh的博客
05-24 793
Webpack5（Ⅱ）
【学习笔记】Vue3（Ⅰ）
Eddie_hyh的博客
06-02 931
Vue3（Ⅰ）
学习笔记之Vue3（七）
YING—country的博客
04-03 6502
Vue2到Vue3，学习Vue3的基本使用
Vue3学习笔记(2)
liuwenjie_的博客
07-18 406
Vue3生命周期，Vue3计算属性、Vue3侦听属性
vue3学习笔记（2）
吴小花的博客
09-18 332
props可以实现父子,在vue3中我们可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用！
【vue】vue3学习笔记（二）
不忘初心，坚定道路！
05-31 911
接上篇 左侧导航 上一篇变量声明的d.ts文件前面的文件名需要和variables.scss的文件名一样，也就是叫variables.scss.d.ts，才可以不报错。
批量归一化 BN(Batch Normalization) (减少重复学习 - 加速损失收敛) + 代码实现 ——笔记2.15《动手学深度学习》
weixin_57972634的博客
11-08 654
批量归一化固定小批量中的均值和方差，然后学习出适合的偏移和缩放； 可以加速收敛速度（比如以前学习率是0.01，现在用了批量归一化后，可以调到0.1） 不会出现之前：学习率太大的话，上面 (靠近损失的梯度) 会炸掉； 不会出现之前：学习率太小的话，下面 (靠近数据的模型参数) 会学不动； 每一个层的输出都通过均值方差放在一起了，上下层的分布都差不多是正态分布； 但一般不改变模型精度
# SpringMVC学习
11-04 982
SpringMVC 是 Spring 框架的一部分，专门用于构建 Web 应用程序。它遵循 MVC（Model-View-Controller）设计模式，通过一系列组件和机制实现了请求的接收、处理和响应。
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 585
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
SPI通信详解-学习笔记
qq_45059758的博客
11-04 537
SPI通信
SAP ABAP开发学习——接口中间件（PI）
m0_64077397的博客
11-04 216
左侧的红圈表示没有被生成。
一文学习Android中的Treeview
最新发布
执剑人
11-08 399
在Android开发中，TreeView是一种用于显示层次结构的组件，可以让用户展开和折叠子项，以方便查看数据的不同层次。TreeView在文件系统、组织架构、目录结构等场景中非常有用，尽管Android并未提供内置的TreeView控件，但可以通过一些方式实现类似效果。下面介绍如何在Android中实现一个简单的TreeView，通常是通过自定义适配器和数据结构来构建。
从零学习大模型（十四）-----量化（一）
red_guy的博客
11-05 570
量化（Quantization）是一种在计算机科学和深度学习中广泛应用的技术，其基本目标是通过减少模型中数值表示的位宽来降低计算和存储成本。简单来说，量化就是将高精度（通常是浮点数）转换为低精度（通常是定点数）表示，同时尽量保持模型的性能和准确性。量化通常用于深度学习模型（尤其是大模型）中，以减小模型的存储空间和提高推理速度。量化不仅可以减少模型的内存占用，还能提高硬件的计算效率，尤其是在低功耗设备（如移动端、嵌入式系统、边缘计算设备）上。范围选择：确定量化数据的最小值和最大值，从而决定数据的量化范围。
ORB-SLAM2源码学习：ORBextractor.cc ：ComputeKeyPointsOctTree计算并分配特征点②
2301_76831056的博客
11-08 805
该函数接受一个二维vector的引用vector& allKeypoints。外层的 vector 存储不同层级的特征点，每个内层的 vector 存储在该层级中提取到的特征点。该参数的声明是在主入口函数operator（）中进行的。它是在构建完图像金字塔（决定了每层分配多少个特征点）后进行的，是要真正的用特征点去填满金字塔。
嵌入式Linux入门具备：C语言基础与基本驱动学习（2）：Linux GIibc IO基础
charlie114514191的博客
11-05 681
对于标准 I/O 库函数来说，它们的操作是围绕 FILE 指针进行的，当使用标准 I/O 库函数打开或创建一个文件时，会返回一个指向 FILE 类型对象的指针（FILE *） ，使用该 FILE 指针与被打开或创建的文件相关联，然后该 FILE 指针就用于后续的标准 I/O 操作（使用标准 I/O 库函数进行 I/O 操作），所以由此可知，FILE 指针的作用相当于文件描述符，只不过 FILE 指针用于标准 I/O 库函数中、而文件描述符则用于文件I/O 系统调用中。函数调用成功返回写入到文件中的字符数；
人工智能测试开发学习框架路线
ceshiren2022的博客
11-04 681
形式章节知识点Pytorch 框架简介知识点人工智能与深度学习知识点Tensors 张量知识点数据集和数据加载器知识点Transforms 预处理知识点构建神经网络知识点Pytorch 中的自动微分知识点优化模型参数知识点保存并加载模型知识点通过示例学习 Pytorch。
《TCP/IP网络编程》学习笔记 | Chapter 3：地址族与数据序列
ProgramNovice的博客
11-03 1073
《TCP/IP网络编程》学习笔记 | Chapter 3：地址族与数据序列
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值