axios请求方式 支持多种请求方式: axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) 有时候, 我们可能需求同时发送两个请求 使用axios.all, 可以放入多个请求的数组. axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2 常见的配置选项 123456789101112131415161718192021222324252627282930313233343536373839// 1.发送request请求axios.request({ url: "http://123.20 ...

使用Pinia？ 使用Pinia之前，我们需要先对其进行安装： npm install pinia 创建一个pinia并且将其传递给应用程序： 认识Store 什么是Store？ 一个 Store （如 Pinia）是一个实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态； 它有点像始终存在，并且每个人都可以读取和写入的组件； 你可以在你的应用程序中定义任意数量的Store来管理你的状态； Store有三个核心概念： state、getters、actions； 等同于组件的data、computed、methods； 一旦 store 被实例化，你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性； 定义一个Store 定义一个Store： 我们需要知道 Store 是使用 defineStore() 定义的， 并且它需要一个唯一名称，作为第一个参数传递； 这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools 返回的函数统一使用useX作为命名方 ...

Vuex的使用安装 npm install vuex 创建Store 每一个Vuex应用的核心就是store（仓库）： store本质上是一个容器，它包含着你的应用中大部分的状态（state） Vuex和单纯的全局对象有什么区别呢？ 第一：Vuex的状态存储是响应式的 当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会被更新； 第二：你不能直接改变store中的状态 改变store中的状态的唯一途径就显示提交 (commit) mutation； 这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够通过一些工具帮助我们更好的管理应用的状态； 使用步骤： 创建Store对象； 在app中通过插件安装； 组件中使用store 在组件中使用store，我们按照如下的方式： 在模板中使用； 在options api中使用，比如computed； 在setup中使用； 组件获取状态 在前面我们已经学习过如何在组件中获取状态了。 当然，如果觉得那种方式有点繁琐（表达式过长），我们可以使用计算属性： 但是，如果我们有 ...

路由的使用步骤安装Vue Router： npm install vue-router 使用vue-router的步骤: 第一步：创建路由需要映射的组件（打算显示的页面） 第二步：通过createRouter创建路由对象，并且传入routes和history模式； 配置路由映射: 组件和路径映射关系的routes数组； 创建基于hash或者history的模式； 第三步：使用app注册路由对象（use方法）； 第四步：路由使用: 通过和； 路由的默认路径 我们这里还有一个不太好的实现: 默认情况下, 进入网站的首页, 我们希望渲染首页的内容； 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以； 如何可以让路径默认跳到到首页, 并且渲染首页组件呢? 我们在routes中又配置了一个映射： path配置的是根路径: / redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了 history模式另外一种选择的模式是history模式： router-link router-l ...

认识自定义指令 在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来 自定义自己的指令。 注意：在Vue中，代码的复用和抽象主要还是通过组件； 通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令； 自定义指令分为两种： 自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用； 自定义全局指令：app的 directive 方法，可以在任意组件中被使用； 比如我们来做一个非常简单的案例：当某个元素挂载完成后可以自定获取焦点 实现方式一：如果我们使用默认的实现方式； 实现方式二：自定义一个 v-focus 的局部指令； 实现方式三：自定义一个 v-focus 的全局指令； 实现方式一：聚焦的默认实现 实现方式二：局部自定义指令 实现方式二：自定义一个 v-focus 的局部指令 这个自定义指令实现非常简单，我们只需要在组件选项中使用 directives 即可； 它是一个对象，在对象中编写我们自定义指令的名称（注意：这里不需要加v-）； 自定义指令有 ...

computed 在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理 在前面的Options API中，我们是使用computed选项来完成的； 在Composition API中，我们可以在 setup 函数中使用 computed 方法来编写一个计算属性； 如何使用computed呢？ 方式一：接收一个getter函数，并为 getter 函数返回的值，返回一个不变的 ref 对象； 方式二：接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象； setup中使用ref 在setup中如何使用ref获取元素或者组件？ 其实非常简单，我们只需要定义一个ref对象，绑定到元素或者组件的ref属性上即可； 生命周期钩子 我们前面说过 setup 可以用来替代 data 、 methods 、 computed 等等这些选项，也可以替代 生命周期钩子。 那么setup中如何使用生命周期函数呢？ 可以使用直接导入的 onX 函数注册生命周期钩子； Provide函数 事实上我们之前 ...

setup函数的参数 我们先来研究一个setup函数的参数，它主要有两个参数： 第一个参数：props 第二个参数：context props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup中如果需要使用，那么就可以直接 通过props参数获取： 对于定义props的类型，我们还是和之前的规则是一样的，在props选项中定义； 并且在template中依然是可以正常去使用props中的属性，比如message； 如果我们在setup函数中想要使用props，那么不可以通过 this 去获取（后面我会讲到为什么）； 因为props有直接作为参数传递到setup函数中，所以我们可以直接通过参数来使用即可； 另外一个参数是context，我们也称之为是一个SetupContext，它里面包含三个属性： attrs：所有的非prop的attribute； slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）； emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过 this.$emit ...

生命周期的流程 $refs的使用 某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例： 在Vue开发中我们是不推荐进行DOM操作的； 这个时候，我们可以给元素或者组件绑定一个ref的attribute属性； 组件实例有一个$refs属性： 它一个对象Object，持有注册过 ref attribute 的所有 DOM 元素和组件实例。 $parent和$root 我们可以通过$parent来访问父元素。 HelloWorld.vue的实现： 这里我们也可以通过$root来实现，因为App是我们的根组件； 注意：在Vue3中已经移除了$children的属性，所以不可以使用了。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<template> <div class="app"> <h2 ref="title" class= ...

如何使用插槽slot？ 这个时候我们就可以来定义插槽slot： 插槽的使用过程其实是抽取共性、预留不同； 我们会将共同的元素、内容依然在组件内进行封装； 同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素； 如何使用slot呢？ Vue中将 元素作为承载分发内容的出口； 在封装组件中，使用特殊的元素就可以为封装组件开启一个插槽； 该插槽插入什么内容取决于父组件如何使用； 插槽的默认内容 有时候我们希望在使用插槽时，如果没有插入对应的内容，那么我们需要显示一个默认的内容： 当然这个默认的内容只会在没有提供插入的内容时，才会显示； 多个插槽的效果 我们先测试一个知识点：如果一个组件中含有**多个插槽**，我们插入多个内容时是什么效果？ 我们会发现默认情况下每个插槽都会获取到我们插入的内容来显示； 具名插槽的使用 事实上，我们希望达到的效果是插槽对应的显示，这个时候我们就可以使用 具名插槽： 具名插槽顾名思义就是给插槽起一个名字， 元素有一个特殊的 attribute：name； 一个不带 name 的slot，会带有隐含的名字 defaul ...

父子组件之间通信的方式 父子组件之间如何进行通信呢？ 父组件传递给子组件：通过props属性； 子组件传递给父组件：通过$emit触发事件； 父组件传递给子组件 在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示： 这个时候我们可以通过props来完成组件之间的通信； 什么是Props呢？ Props是你可以在组件上注册一些自定义的attribute； 父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值； Props有两种常见的用法： 方式一：字符串数组，数组中的字符串就是attribute的名称； 方式二：对象类型，对象类型我们可以在指定attribute名称的同时，指定它需要传递的类型、是否是必须的、默认值等等； APP.vue 12345678910111213141516171819202122232425262728<template> <!-- 1.展示why的个人信息 --> <!-- 如果当前的属性是一个非prop的attribute, 那么该属性会 ...