【vue3.0】

vue3笔记

1 vue2和vue3的区别

2 事件修饰符

增加了对.capture .once .self三个不常用的事件修饰符进行了案例讲解

3 过滤器

vue3对过滤器已经弃用，官方建议使用计算属性或方法代替过滤器的功能。

4 单页面应用程序

因为只有一个页面，所以页面不会跳转或者重新加载，而是利用JS在这个页面上展示不容的内容，从而实现交互的效果。

单页面应用程序的优点

单页面应用程序的缺点

如何快速创建vue的SPA项目

5 vite的基本使用

1. 创建 vite 的项目

2. 梳理项目的结构

3. vite 项目的运行流程

6 vue组件

template中的根节点

script 中的 name 节点

让 style 中支持 less 语法

注册全局组件

使用全局注册组件

组件注册时名称的大小写

通过 name 属性注册组件

deep/样式穿透

即：将/deep/ .title写为:deep(.title)

props 的大小写命名

7 Class 与 Style 绑定

1 动态绑定 HTML 的 class

2 以数组语法绑定 HTML 的 class

3 以对象语法绑定 HTML 的 class

4 以对象语法绑定内联的 style

注意: 如果涉及含有连字符的样式，如font-size需要写为驼峰格式fontSize。如果不想改为驼峰，那么要把属性名加上一层单引号，如图中的'background-color'。

8 对props属性编写自定义验证函数

9 计算属性的使用注意点

计算属性 vs 方法

具体例子如下图：


虽然调用了三次计算属性，但在后两次执行时数据项没有发生任何的变化，于是复用了第一次缓存得到的结果。而方法则会执行三次。

计算属性案例

关于计算属性案例的两个很短视频，可以看一下捋顺思路

10 自定义事件

和vue2将的子传父是同一个知识点，不过在vue3中需要对自定义事件进行声明。在emits: [ xxx, xx]节点中先声明。

自定义事件的 3 个使用步骤

声明自定义事件

触发自定义事件

监听自定义事件

自定义事件传参

11 组件上的 v-model

1. 为什么需要在组件上使用 v-model

2 在组件上使用 v-model 的步骤

视频讲解

所用到的原理任然是 ： 父传子（通过定义props属性），子传父（通过自定义事件）。但是由于引入了v-model, 子传父通过自定义事件时，父组件不用再写监听接收函数了。

12 任务列表案例

1. 案例效果

2. 用到的知识点

3. 整体实现步骤

13 计算属性 vs 侦听器

14 组件的生命周期

1 组件运行的过程

2 如何监听组件的不同时刻

3 如何监听组件的更新

4 组件中主要的生命周期函数

5 组件中全部的生命周期函数

完整的生命周期函数可以参考vue3的官方中文文档

15 兄弟组件数据的共享

1 安装 mitt 依赖包

2 创建公共的EventBus模块

3 在数据接收方自定义事件

4 在数据发送方触发事件

16 后代关系组件之间的数据共享

1 父节点通过 provide 共享数据

2 子孙节点通过 inject 接收数据

3 父节点对外共享响应式数据

4 子孙节点使用响应式数据

17 vuex

对于需要大范围共享数据的情况比较方便

18 总结组件之间的数据共享

19 vue3中全局配置 axios

1 为什么要全局配置axios

2 如何全局配置axios

20 作用域插槽

提供数据的插槽

应用场景： 在组件中某部分不想渲染死，而是让用户决定如何渲染时。 使用作用域插槽可以提供数据，用户拿到数据并按照自己的需求渲染样式。

21 自定义指令

在vue3中，bind(el) 变成了 mounter(el)。

私有自定义指令

全局自定义指令

注意：

函数简写

指令的参数值

22 Table案例

23 路由

关于路由

vue-router

路由高亮

嵌套路由

命名路由

总结

24 vue-cli

25 组件库

26 axios 拦截器

1 什么是拦截器

2 配置请求拦截器

注意： 成功回调函数中的config必须return 回去。

2.1 请求拦截器–Token认证

2.2 请求拦截器—展示Loading效果

3 配置响应拦截器

3.1 响应拦截器–关闭Loading效果

27 proxy跨域代理

也就是：proxy帮我们解决了跨域问题。

---

28 用户列表案例