【学习笔记】Vue3（Ⅱ）

Vue3（Ⅱ）

  • 3、 进阶 —— 路由
    •       3.1、示例
    •       3.2、to 的两种写法
    •       3.3、命令路由
    •       3.4、嵌套路由
    •       3.5、query 参数
    •       3.6、params 参数
    •       3.7、路由的 props 配置
    •       3.8、replace 属性
    •       3.9、编程式导航
    •       3.10、重定向
  • 4、 进阶 —— Pinia
    •       4.1、概述
    •       4.2、环境搭建
    •       4.3、示例
    •       4.4、修改数据（三种方法）
    •       4.5、storeToRefs
    •       4.6、getters
    •       4.7、$subscribe
    •       4.8、store组合式的写法
  • 5、 进阶 —— 组件通信
    •       5.1、props（父 ↔ 子）
    •       5.2、自定义事件（子 → 父）
    •       5.3、mitt（任意组件间进行通信）
    •       5.4、$attrs（父 → 子孙）
    •       5.5、$refs、\$parent（父 ↔ 子）
    •       5.6、v-model（父 ↔ 子）
    •       5.7、provide、inject（父 → 子孙）
    •       5.8、pinia（任意组件间进行通信）
    •       5.9、插槽（父 → 子）
      •             5.9.1 匿名插槽
      •             5.9.2 具名插槽
      •             5.9.3 作用域插槽
  • 6、 进阶 —— 其它一些常用的 API
    •       6.1、shallowRef 和 shallowReactive
      •             6.1.1 shallowRef
      •             6.1.2 shallowReactive
    •       6.2、readonly 和 shallowReadonly
      •             6.2.1 readonly
      •             6.2.2 shallowReadonly
    •       6.3、toRaw 和 markRaw
      •             6.3.1 toRaw
      •             6.3.2 markRaw
    •       6.4、customRef
  • 7、 进阶 —— Vue3 新组件
    •       7.1、Teleport
    •       7.2、Suspense
    •       7.3、全局API
    •       7.4、非兼容性改变

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Mac系统使用COLMAP

Mac系统使用COLMAP

安装教程 如有出入&#xff0c;参照官网手册最新版 Installation — COLMAP 3.9-dev documentation 首先确保mac上安装了Homebrew 1.安装依赖项 brew install \cmake \ninja \boost \eigen \flann \freeimage \metis \glog \googletest \ceres-solver \qt5 \glew \cgal \s…
阅读更多...
AI论文：一键生成论文的高效工具

AI论文：一键生成论文的高效工具

说到这个问题&#xff0c;那真的得看你对“靠谱”的定义是怎样的啦&#xff1f; 众所周知&#xff0c;写论文是一项极其耗时间的事情&#xff0c;从开始的选题到文献资料搜索查阅&#xff0c;大纲整理等等一大堆的繁杂工作是极艰辛的。用AI写论文就不一样了&#xff0c;自动化…
阅读更多...
加密算法详解

加密算法详解

对称加密 加密方和解密方都使用了相同的密钥，只要保证密钥不会泄露给第三方， 整个通信过程就是安全的。 ​ （对称加密算法流程） 因为对称加密算法整个过程共享同一个密钥，所以使用特点也比较明显。 优点：算法简单，加密速度快；</
阅读更多...
白酒：茅台镇白酒的醇厚口感与细腻层次

白酒：茅台镇白酒的醇厚口感与细腻层次

茅台镇&#xff0c;中国白酒的璀璨明珠&#xff0c;以其与众不同的自然环境和杰出的酿造技艺&#xff0c;孕育出了无数上好白酒。云仓酒庄豪迈白酒作为茅台镇的杰出品牌&#xff0c;以其醇厚口感和细腻层次&#xff0c;赢得了无数消费者的喜爱。 茅台镇地处赤水河畔&#xff0c…
阅读更多...
借助 Aspose.Words，将 Word DOC/DOCX 转换为 TXT

借助 Aspose.Words，将 Word DOC/DOCX 转换为 TXT

在某些情况下&#xff0c;我们可能需要将数据从一种格式导出为另一种格式。一个常见的要求是将 Word 文档 ( DOC或DOCX ) 转换为纯文本 ( TXT ) 文件。在本文中&#xff0c;我们将学习如何使用 Java Word 到文本转换器库将 Word 转换为 TXT。 Aspose.Words 是一种高级Word文档…
阅读更多...
看看讯飞和阿里、百度把哪些大模型免费了，有哪些限制说明

看看讯飞和阿里、百度把哪些大模型免费了，有哪些限制说明

前几天收到了国内几家大模型厂商发的大模型免费的通知短信&#xff0c;一直拖到今天才发文&#xff1a; 百度&#xff1a; 讯飞&#xff1a; 阿里云&#xff0c;降价了很多&#xff0c;新用户还有免费额度&#xff1a; 让我们看看咋回事。 首先看百度的&#xff1a; 官网&#…
阅读更多...
提升校园管理效率，选择智慧校园平台

提升校园管理效率，选择智慧校园平台

在当今信息化的社会中&#xff0c;提升校园管理效率变得尤为重要。作为学校管理者&#xff0c;您是否也在寻找一种高效的方式来管理校园事务&#xff1f;别担心&#xff0c;选择智慧校园平台就是您的明智之选。 提升校园管理效率&#xff0c;智慧校园平台能够为您实现无缝连接和…
阅读更多...
Ubuntu22.04下源码编译安装pythonocc-7.8

Ubuntu22.04下源码编译安装pythonocc-7.8

Ubuntu22.04下源码编译安装pythonocc-7.8 本文介绍Ubuntu下手动编译安装pythonocc&#xff0c;及安装过程遇到的各种坑 基本依赖安装 sudo apt-get update sudo apt-get install -y wget libglu1-mesa-dev libgl1-mesa-dev libxmu-dev libxi-dev build-essential cmake libf…
阅读更多...
人工智能时代，Martech未来的3种场景

人工智能时代，Martech未来的3种场景

多年来&#xff0c;人们一直在预测Martech Landscape的崩溃。成千上万个不同的Martech应用程序将被筛选出少数几个赢家。在过去的12年里&#xff0c;这些预测一直被证明是错误的&#xff0c;年复一年。 但也许&#xff0c;只是也许&#xff0c;人工智能时代将成为拐点&#xf…
阅读更多...
PHP质量工具系列之php-depend

PHP质量工具系列之php-depend

php-depend是一个开源的静态代码分析工具&#xff0c;它的主要功能包括&#xff1a; 代码质量分析 复杂度度量&#xff1a;计算类、方法和函数的Cyclomatic Complexity&#xff08;循环复杂度&#xff09;&#xff0c;帮助识别潜在的复杂代码段。 耦合度度量&#xff1a;分析类…
阅读更多...
HSC Mailinspector loader.php 任意文件读取漏洞复现(CVE-2024-34470)

HSC Mailinspector loader.php 任意文件读取漏洞复现(CVE-2024-34470)

0x01 产品简介 HSC Mailinspector是一款远程电子邮件检查工具&#xff0c;支持POP3/IMAP4协议。它允许用户远程扫描最新邮件&#xff0c;并进行浏览、垃圾邮件排除、编辑、删除等操作&#xff0c;无需实际登录邮箱。 0x02 漏洞概述 由于HSC Mailinspector /public/loader.ph…
阅读更多...
Linux系统安全（用户、密码、grub引导密码、增加终端）

Linux系统安全（用户、密码、grub引导密码、增加终端）

目录 系统安全 用户安全 密码安全 PAM认证 命令的历史 用户切换 命令的执行权限 grub引导密码 增加终端 系统安全 用户安全 命令 说明 chattr i /etc/passwd chattr&#xff1a;为文件添加特殊权限 i&#xff1a;指定文件设为不可修改&#xff0c;只有root用户能为…
阅读更多...
AMEYA360代理品牌 |ROHM罗姆6月研讨会报名开启

AMEYA360代理品牌 |ROHM罗姆6月研讨会报名开启

电阻器是ROHM的创业产品&#xff0c;ROHM在电阻器产品开发方面始终走在行业前列。电流检测用分流电阻器主要用于电机驱动电路、电源的过电流保护以及电池剩余电量检测&#xff0c;目前已被广泛应用于汽车、工业设备、消费电子设备等众多领域。要满足各种应用的节能要求&#xf…
阅读更多...
【react】react项目支持鼠标拖拽的边框改变元素宽度的组件

【react】react项目支持鼠标拖拽的边框改变元素宽度的组件

目录 安装使用方法示例Props 属性方法示例代码调整兄弟div的宽度 re-resizable github地址 安装 $ npm install --save re-resizable这将安装re-resizable库并将其保存为项目的依赖项。 使用方法 re-resizable 提供了一个 <Resizable> 组件&#xff0c;它可以包裹任何…
阅读更多...
三、go微服务项目“商城项目实战开发”用户管理user-web端编写和登录校验

三、go微服务项目“商城项目实战开发”用户管理user-web端编写和登录校验

文章目录 商城项目实战开发user-web端编写和用户登录校验03、user-web接口的gin的整合和路由的搭建04、gin如何调用grpc接口05 登录接口安全性检验05、用户服务整合微服务注册中心组件—Nacos06、用户服务整合微服务配置中心组件—Nacos商城项目实战开发user-web端编写和用户登…
阅读更多...
c#vb代码互转工具

c#vb代码互转工具

下载地址&#xff1a; https://download.csdn.net/download/wgxds/88979921
阅读更多...
做电化学研究如何发表Angew Chemie，案例分析

做电化学研究如何发表Angew Chemie，案例分析

✨【元素魔方学术俱乐部】✨ &#x1f469;‍&#x1f3eb;&#x1f468;‍&#x1f3eb;我们创建了一个学术交流群 给全国各地以及各种研究方向的硕博 和老师们提供一个交流的平台&#x1f4da;&#x1f9ea; 感兴趣的话欢迎加入 &#x1f4f2;本公众号中回复“社群” 会自动发…
阅读更多...
Python for循环 使用两个变量

Python for循环 使用两个变量

https://geek-docs.com/python/python-ask-answer/336_python_for_loop_with_two_variables.html 一、使用zip()函数进行迭代 zip()函数可以将两个或多个可迭代对象打包成一个元组序列。 fruits [apple, banana, orange] prices [0.5, 0.3, 0.4]for fruit, price in zip(f…
阅读更多...
基于springboot实现社区养老服务系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现社区养老服务系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现社区养老服务系统演示 摘要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本社区养老服务系统就是在这样的大环境下诞生&#xff0c;其可以帮助…
阅读更多...
ubuntu top命令的参数和快捷键

ubuntu top命令的参数和快捷键

命令选项 -1 单个、所有cpu信息切换 top -1-b 批处理 top -b > top.txt这将保存top命令的输出到文件&#xff0c;直到手动终止或关机。所以使用这个命令要注意和其他命令配合&#xff0c;否则文件速度增长会很快。 在文件中&#xff0c;将会重复输入top命令。 -c 切换命…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站