【学习笔记】Vue3（Ⅱ）

已于 2024-06-04 06:10:43 修改
阅读量569 收藏 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 1659
Vue可以看作是一个数据管理大师，其目的通常是将其管理的数据展示到HTML页面上，或者收集HTML页面上的数据进行储存在自身或者传递给服务器。
【学习笔记】前端（I）—— Vue2（Ⅱ）
Eddie_hyh的博客
05-04 887
前端第一部分：vue2（Ⅱ）
JS+Vue学习笔记
刘莎
11-29 1853
学习js和vue
【学习笔记】Webpack5（Ⅱ）
Eddie_hyh的博客
05-24 778
Webpack5（Ⅱ）
Vue 史上最全学习笔记（2020年1月9日）
Sicily_winner的博客
01-11 3014
目录 ✎VUE学习 ◆VUE学习心路历程 ◆VUE学习视频来源 ➀VUE学习视频百度网盘资源 ➁VUE本笔记学习视频资源 ◆VUE语法 ❶ Vue基础语法——模板语法（Three rule of template） ❷ Vue基础语法——创建VUE实例（Create Vue） ❸Vue生命周期（Vue life） ❹Vue组件（Components type） ...
Vue学习笔记（不含组件）
冰谷悠
10-07 184
Vue实例生命周期 ①beforeCreate，data和methods中的方法还未初始化。 ②created，data和methods已初始化完毕，可操作data或methods的数据。 ③beforeMount，模板已在内存中编译，但未挂载到页面上，页面还是旧的。 ④mounted，操作DOM最早在这个方法中操作，整个Vue实例已初始化完毕。 ⑤beforeUpdate，页面上的数据还是旧的，但data中数据已被更新，页面和数据不同步。 ⑥update，在此之前渲染出最新的内存DOM树，实现从Model
Vue2学习笔记
Arier_six的博客
11-09 119
Vue2基础内容，包括VueX，VueRouter的使用
Vue项目 音乐播放器 学习笔记 列表数据 Ⅱ
m0_49551563的博客
08-19 226
Vue项目 音乐播放器 学习笔记 列表数据 Ⅱ
瑞吉外卖学习笔记
weixin_55008454的博客
04-08 1425
我们一般在编码层本项目共分为3期进行开发：①第一期主要实现基本需求，其中移动端应用通过H5实现，用户可以通过手机浏览器访问。②第二期主要针对移动端应用进行改进，使用微信小程序实现，用户使用起来更加方便。③第三期主要针对系统进行优化升级，提高系统的访问性能。
C#从零开始学习(类型和引用)(4)
Hikigaya_Hachi的博客
10-19 560
C#类型和引用学习
【PHP小课堂】一起学习PHP中的反射（一）
硬核项目经理
10-14 1135
一起学习PHP中的反射（一）反射这个名词相信大家不会陌生，但反过来说，这个反射到底是一个什么概念呢？其实反射，就是通过一些方法函数，来获得一个类或者一个实例化对象中的一些信息。当然，更重要的是，它可以是在运行时来动态获取这些信息的。这样的话，有很多功能就可以通过反射来实现了。比如说 Java 中的注解，在一些 PHP 的框架中，要实现类似的注解功能，就是通过反射来获得注释中的信息来实现的。大家可以...
如何用3个月零基础入门网络安全？_网络安全零基础怎么学习
2401_84466224的博客
10-15 1237
我们知道计算机最早是在西方发明出来的，很多名词或者代码都是英文的，甚至现有的一些教程最初也是英文原版翻译过来的，而且一个漏洞被发现到翻译成中文一般需要一个星期的时间，在这个时间差上漏洞可能都修补了。”答案是否定的，黑客用的电脑,不需要什么高的配置,只要稳定就行.因为黑客所使用的一些程序,低端CPU也可以很好的运行,而且不占什么内存.还有一个,黑客是在DOS命令下对进行的,所以电脑能使用到最佳状态!观看学习近十年所有0day挖掘的帖，然后搭建环境，去复现漏洞，去思考学习笔者的挖洞思维，培养自己的渗透思维。
小新学习Docker之Docker--harbor私有仓库部署与管理
pangdongqiqi的博客
10-16 929
Harbor 是 VMware 公司开源的企业级 Docker Registry 项目，其目标是帮助用户迅速搭建一个企业级的 Docker Registry 服务。Harbor以 Docker 公司开源的 Registry 为基础，提供了图形管理 UI 、基于角色的访问控制(Role Based AccessControl) 、AD/LDAP 集成、以及审计日志(Auditlogging) 等企业用户需求的功能，同时还原生支持中文。
React 学习计划
简序
10-15 1037
希望这个学习计划能够帮助你系统地学习React，并最终成为一名优秀的React开发者。
vue3学习记录-Teleport和KeepAlive
qq_45030898的博客
10-14 594
vue3学习记录-Teleport和KeepAlive
基于深度学习的生物启发的学习系统
最新发布
weixin_42605076的博客
10-19 554
基于深度学习的生物启发学习系统（Biologically Inspired Learning Systems）旨在借鉴生物大脑的结构和学习机制，设计出更高效、更灵活的人工智能系统。这类系统融合了生物神经科学的研究成果，通过模仿大脑中的学习模式、记忆过程和神经活动，推动深度学习的发展。其目标是让人工智能系统更具鲁棒性、自适应性和可扩展性。
SpringCloud学习记录|day5
anncyuyan的博客
10-15 215
目前讲过的可惜，自己基本没理解。
聊聊零基础如何开始学习鸿蒙开发技术
10-15 544
鸿蒙系统是一款分布式操作系统，其适用范围非常广泛，从智能手机到家用电器，再到工业设备，都能找到应用场景。特别是在智能家居领域，鸿蒙系统可以实现不同设备之间的无缝连接和协同工作，提供更加智能和便利的用户体验。物联网的快速发展也意味着对鸿蒙系统的需求将不断增加，为鸿蒙软件开发提供了广阔的市场前景。那么做为零基础的小白如何开始学习鸿蒙技术呢?
Mamba学习笔记(1)——原理基础
ZRX_GIS
10-15 1202
Mamba学习笔记
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值