尚硅谷 Vue3+TypeScript 学习笔记（中）

目录

三、路由

3.1. 【对路由的理解】

3.2. 【基本切换效果】

3.3. 【两个注意点】

3.4.【路由器工作模式】

3.5. 【to的两种写法】

3.6. 【命名路由】

3.7. 【嵌套路由】

3.8. 【路由传参】

query参数

params参数

3.9. 【路由的props配置】

3.10. 【 replace属性】

3.11. 【编程式导航】

3.12. 【重定向】

四、pinia

4.1【准备一个效果】

4.2【搭建 pinia 环境】

4.3【存储+读取数据】

4.4.【修改数据】(三种方式)

4.5.【storeToRefs】

4.6.【getters】

4.7.【$subscribe】

4.8. 【store组合式写法】

三、路由

3.1. 【对路由的理解】

3.2. 【基本切换效果】

  • Vue3中要使用vue-router的最新版本，目前是4版本。

  • 路由配置文件代码如下：

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:createWebHistory(),
	routes:[
		{
			path:'/home',
			component:Home
		},
		{
			path:'/about',
			component:About
		}
	]
})
export default router
  • main.ts代码如下：
import router from './router/index'
app.use(router) # 使用你创建的路由器

app.mount('#app')
  • App.vue代码如下
<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
  import {RouterLink,RouterView} from 'vue-router'  
</script>

3.3. 【两个注意点】

  1. 路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。

  2. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

3.4.【路由器工作模式】

history模式

优点：URL更加美观，不带有#，更接近传统的网站URL。

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

const router = createRouter({
	history:createWebHistory(), //history模式
	/******/
})

hash模式

优点：兼容性更好，因为不需要服务器端处理路径。

缺点：URL带有#不太美观，且在SEO优化方面相对较差。

const router = createRouter({
	history:createWebHashHistory(), //hash模式
	/******/
})

3.5. 【to的两种写法】

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>

<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

3.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>

3.7. 【嵌套路由】

1、编写News的子路由：Detail.vue

2、配置路由规则，使用children配置项：

const router = createRouter({
  history:createWebHistory(),
	routes:[
		{
			name:'zhuye',
			path:'/home',
			component:Home
		},
		{
			name:'xinwen',
			path:'/news',
			component:News,
			children:[
				{
					name:'xiang',
					path:'detail',
					component:Detail
				}
			]
		},
		{
			name:'guanyu',
			path:'/about',
			component:About
		}
	]
})
export default router

3、跳转路由（记得要加完整路径）：

<router-link to="/news/detail">xxxx</router-link>
<!-- 或 -->
<router-link :to="{path:'/news/detail'}">xxxx</router-link>

4、记得去Home组件中预留一个<router-view>

<template>
  <div class="news">
    <nav class="news-list">
      <RouterLink v-for="news in newsList" :key="news.id" :to="{path:'/news/detail'}">
        {{news.name}}
      </RouterLink>
    </nav>
    <div class="news-detail">
      <RouterView/>
    </div>
  </div>
</template>

3.8. 【路由传参】

query参数

传递参数

<!-- 跳转并携带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>

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)

params参数

传递参数

<!-- 跳转并携带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>

接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注2：传递params参数时，需要提前在规则中占位

备注3：传递params参数时，不能传对象和数组

注意：如果占位方式传参，可以设置不是必传，那就需要在路由路径加问号，比如我content想可传可不传，那就把路由路径 path:'detail/:id/:title/:content?'

3.9. 【路由的props配置】

作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

{
	name:'xiang',
	path:'detail/:id/:title/:content',
	component:Detail,

  // props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
  // props:{a:1,b:2,c:3}, 

  // props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
  // props:true
  
  // props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
  props(route){
    return route.query
  }
}

接收参数

defineProps(['id','title','content'])

3.10. 【 replace属性】

  1. 作用：控制路由跳转时操作浏览器历史记录的模式。

  2. 浏览器的历史记录有两种写入方式：分别为push和replace：

    • push是追加历史记录（默认值）。

    • replace是替换当前记录。

  3. 开启replace模式：

<RouterLink replace .......>News</RouterLink>

3.11. 【编程式导航】

路由组件的两个重要的属性：$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)

例如：

function showNewsDetail(news: any) {
    router.push({
        name: 'xiang',
        query: {
            id: news.id
            title: news.title,
            content: news.content
        }
    })
}

3.12. 【重定向】

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

  2. 具体编码：

{
    path:'/',
    redirect:'/about'
}

四、pinia

集中式状态（数据）管理，vue2是vuex，vue3是pinia。

4.1【准备一个效果】

4.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选项

4.3【存储+读取数据】

1、Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。

2、它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。

3、具体编码：src/store/count.ts

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

// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作
  actions:{},
  // 状态
  state(){
    return {
      sum:6
    }
  },
  // 计算
  getters:{}
})

4、具体编码：src/store/talk.ts

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

// 定义并暴露一个store
export const useTalkStore = defineStore('talk',{
  // 动作
  actions:{},
  // 状态
  state(){
    return {
      talkList:[
        {id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},
     	{id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},
        {id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}
      ]
    }
  },
  // 计算
  getters:{}
})

5、组件中使用state中的数据

<template>
  <h2>当前求和为：{{ sumStore.sum }}</h2>
</template>

<script setup lang="ts" name="Count">
  // 引入对应的useXxxxxStore	
  import {useSumStore} from '@/store/sum'
  
  // 调用useXxxxxStore得到对应的store
  const sumStore = useSumStore()
</script>
<template>
	<ul>
    <li v-for="talk in talkStore.talkList" :key="talk.id">
      {{ talk.content }}
    </li>
  </ul>
</template>

<script setup lang="ts" name="Count">
  import axios from 'axios'
  import {useTalkStore} from '@/store/talk'

  const talkStore = useTalkStore()
</script>

4.4.【修改数据】(三种方式)

1、第一种修改方式，直接修改

countStore.sum = 666

2、第二种修改方式：批量修改

countStore.$patch({
  sum:999,
  school:'atguigu'
})

3、第三种修改方式：借助action修改（action中可以编写一些业务逻辑）

import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
  /*************/
  actions: {
    //加
    increment(value:number) {
      if (this.sum < 10) {
        //操作countStore中的sum
        this.sum += value
      }
    },
    //减
    decrement(value:number){
      if(this.sum > 1){
        this.sum -= value
      }
    }
  },
  /*************/
})

组件中调用action即可

// 使用countStore
const countStore = useCountStore()

// 调用对应action
countStore.incrementOdd(n.value)

4.5.【storeToRefs】

  • 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。

  • 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据包括方法。

<template>
	<div class="count">
		<h2>当前求和为：{{sum}}</h2>
	</div>
</template>

<script setup lang="ts" name="Count">
  import { useCountStore } from '@/store/count'
  /* 引入storeToRefs */
  import { storeToRefs } from 'pinia'

	/* 得到countStore */
  const countStore = useCountStore()
  /* 使用storeToRefs转换countStore，随后解构 */
  const {sum} = storeToRefs(countStore)
</script>

4.6.【getters】

1、概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。

2、追加getters配置。

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

// 定义并暴露一个store
export const useCountStore = defineStore('count',{
  // 动作
  actions:{
    /************/
  },
  // 状态
  state(){
    return {
      sum:1,
      school:'atguigu'
    }
  },
  // 计算
  getters:{
    bigSum:(state):number => state.sum *10,
    upperSchool():string{
      return this. school.toUpperCase()
    }
  }
})

3、组件中读取数据：

const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

4.7.【$subscribe】

通过 store 的 $subscribe() 方法侦听 state 及其变化

talkStore.$subscribe((mutate,state)=>{
  console.log('LoveTalk',mutate,state)
  localStorage.setItem('talk',JSON.stringify(talkList.value))
})

4.8. 【store组合式写法】

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'

export const useTalkStore = defineStore('talk',()=>{
  // talkList就是state
  const talkList = reactive(
    JSON.parse(localStorage.getItem('talkList') as string) || []
  )

  // getATalk函数相当于action
  async function getATalk(){
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串，包装成一个对象
    let obj = {id:nanoid(),title}
    // 放到数组中
    talkList.unshift(obj)
  }
  return {talkList,getATalk}
})

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

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

相关文章

Java实现快乐贩卖馆管理系统 JAVA+Vue+SpringBoot+MySQL

Java实现快乐贩卖馆管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 搞笑视频模块2.3 视频收藏模块2.4 视频评分模块2.5 视频交易模块2.6 视频好友模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 搞笑视频表3.2.2 视频收藏表3.2.3 视频评分表3.2.4 视频交易表 四、系…
阅读更多...
Zustand：简化状态管理的现代React状态库

Zustand：简化状态管理的现代React状态库

Zustand&#xff1a;简化状态管理的现代React状态库 Zustand是一个用于管理状态的现代React状态库。它提供了简洁、可扩展和高效的状态管理解决方案&#xff0c;使得在React应用中处理复杂的状态逻辑变得更加容易和直观。本文将介绍Zustand的主要特点、使用方法以及它在React开…
阅读更多...
vim常用命令以及配置文件

vim常用命令以及配置文件

layout: article title: “vim文本编译器” vim文本编辑器 有三种模式: 命令模式 文本模式, 末行模式 vim命令大全 - 知乎 (zhihu.com) 命令模式 插入 i: 切换到输入模式&#xff0c;在光标当前位置开始输入文本。 a: 进入插入模式&#xff0c;在光标下一个位置开始输入文…
阅读更多...
JavaWeb02-MyBatis

JavaWeb02-MyBatis

目录 一、MyBatis 1.概述 2.JavaEE三层架构简单介绍 &#xff08;1&#xff09;表现层 &#xff08;2&#xff09;业务层 &#xff08;3&#xff09;持久层 3.框架 4.优势 &#xff08;1&#xff09;JDBC的劣势 &#xff08;2&#xff09;MyBatis优化 5.使用 &#…
阅读更多...
算法刷题:移动零

算法刷题:移动零

移动零 .题目链接详解curdesc算法原理 答案 . 题目链接 移动零 详解 题目要求我们要把数组中所有的零都移动到数组的末尾,且要求其余数字顺序不改变.这道题,我们使用到的是双指针算法: 利用两个指针,将数组分为三个部分, 三个区间分别为 [0,desc][desc1,cur-1][cur,n-1] 在…
阅读更多...
HTML 标签

HTML 标签

HTML&#xff1a;超文本标记语言 HTML骨架结构&#xff1a; html标签&#xff1a;网页的整体 head标签&#xff1a;网页的头部 body标签&#xff1a;网页的身体 HTML的注释 VS code中&#xff1a;ctrl/ 浏览器不会执行注释 HTML标签的构成&#xff1a; 双标签&#xff1a…
阅读更多...
DC-9靶机渗透详细流程

DC-9靶机渗透详细流程

信息收集&#xff1a; 1.存活扫描&#xff1a; arp-scan -I eth0 -l 发现靶机ip&#xff1a;192.168.10.132 └─# arp-scan -I eth0 -l 192.168.10.1 00:50:56:c0:00:08 (Unknown) 192.168.10.2 00:50:56:e5:b1:08 (Unknown) 192.168.10.132 //靶机 00:0c…
阅读更多...
物联网和工业4.0

物联网和工业4.0

在当今这个快速发展的技术时代&#xff0c;物联网&#xff08;IoT&#xff09;和工业4.0成为了推动全球进入新工业时代的两大驱动力。对于刚入行的人来说&#xff0c;深入理解这两个概念及其背后的技术原理&#xff0c;对于把握未来的职业机会至关重要。 物联网&#xff0c;简…
阅读更多...
备战蓝桥杯---动态规划（理论基础）

备战蓝桥杯---动态规划（理论基础）

目录 动态规划的概念&#xff1a; 解决多阶段决策过程最优化的一种方法 阶段&#xff1a; 状态&#xff1a; 决策&#xff1a; 策略&#xff1a; 状态转移方程&#xff1a; 适用的基本条件 1.具有相同的子问题 2.满足最优子结构 3.满足无后效性 动态规划的实现方式…
阅读更多...
Go内存优化与垃圾收集

Go内存优化与垃圾收集

Go提供了自动化的内存管理机制&#xff0c;但在某些情况下需要更精细的微调从而避免发生OOM错误。本文介绍了如何通过微调GOGC和GOMEMLIMIT在性能和内存效率之间取得平衡&#xff0c;并尽量避免OOM的产生。原文: Memory Optimization and Garbage Collector Management in Go 本…
阅读更多...
2024-02-08（Flume）

2024-02-08（Flume）

1.Flume 的架构和MQ消息队列有点类似 2.Flume也可以做数据的持久化操作 在Channel部分选择使用File channel组件 3.Flume进行日志文件监控 场景&#xff1a;企业中应用程序部署后会将日志写入到文件中&#xff0c;我们可以使用Flume从各个日志文件将日志收集到日志中心以便…
阅读更多...
用bootstrap结合jQuery实现简单的模态对话框

用bootstrap结合jQuery实现简单的模态对话框

嗨害嗨&#xff0c;我又来了奥。今天呢&#xff0c;给大家分享一个工作中常用到的插件——模态对话框的用法。想必大家在工作中也遇到很多页面&#xff0c;需要用模态对话框进行交互的吧&#xff0c;现在呢&#xff0c;就让我们一起来了解一下它的使用吧。 首先&#xff0c;我…
阅读更多...
Dlib检测人脸特征点标号图

Dlib检测人脸特征点标号图

dlib进行人脸检测时候&#xff0c;所有人脸的标号图&#xff0c;c检索的时候注意从0索引开始
阅读更多...
Infuse通过Alist添加115网盘资源

Infuse通过Alist添加115网盘资源

说明 通过Alist代理管理115网盘&#xff0c;Infuse再添加Alist代理的115网盘的WebDAV 准备一台Linux服务器安装Alist 我这里用的华为云CentOS7&#xff0c;使用Docker容器 安装Alist docker run -d --restartalways -v /etc/alist:/opt/alist/data -p 5244:5244 -e PUID0 …
阅读更多...
深入浅出：Golang的Crypto/SHA256库实战指南

深入浅出：Golang的Crypto/SHA256库实战指南

深入浅出&#xff1a;Golang的Crypto/SHA256库实战指南 介绍crypto/sha256库概览主要功能应用场景库结构和接口实例 基础使用教程字符串哈希化文件哈希化处理大型数据 进阶使用方法增量哈希计算使用Salt增强安全性多线程哈希计算 实际案例分析案例一&#xff1a;安全用户认证系…
阅读更多...
跟着pink老师前端入门教程-day23

跟着pink老师前端入门教程-day23

苏宁网首页案例制作 设置视口标签以及引入初始化样式 <meta name"viewport" content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0"> <link rel"stylesheet" href"css/normaliz…
阅读更多...
如何从格式化的 U盘恢复不见的数据

如何从格式化的 U盘恢复不见的数据

格式化与使用任何容量有限的存储设备&#xff08;例如 USB 闪存驱动器&#xff09;密切相关。在大多数情况下&#xff0c;一次性删除所有内容比逐个删除文件更快、更方便。但是&#xff0c;如果您犯了错误并意外格式化了错误的驱动器怎么办&#xff1f;是否可以从格式化的闪存驱…
阅读更多...
C++重新入门-C++运算符

C++重新入门-C++运算符

目录 1. 算术运算符 2. 关系运算符 3.逻辑运算符 4.位运算符 5.赋值运算符 6.杂项运算符 7.C 中的运算符优先级 运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。C 内置了丰富的运算符&#xff0c;并提供了以下类型的运算符&#xff1a; 算术运算符关系运算符逻…
阅读更多...
Python入门：常用模块—os模块及sys模块

Python入门：常用模块—os模块及sys模块

os模块 sys模块 import sys print(sys.argv) # 命令参数list&#xff0c;第一个元素是程序本身路径 print(sys.exit()) # 退出程序&#xff0c;正常退出是exit(0) print(sys.version) # 获取python解释程序的版本信息 print(sys.maxint()) # 最大…
阅读更多...
用EXCEL从地址(上海)中提取各区(浦东新区等区)信息

用EXCEL从地址(上海)中提取各区(浦东新区等区)信息

背景&#xff1a; 朋友工作需要经常用EXCEL把各上海用户收货地址中的区提取出来&#xff0c;之前一直手动处理&#xff0c;希望我帮忙用EXCEL公式直接提取处理。 数据样式&#xff1a; 中国上海市浦东新区A小区 上海徐汇区B小区 中国&#xff0c;上海&#xff0c;浦东新区&a…
阅读更多...
最新文章

Copyright @ 2022~2023