101张脑图，带你从零开始学完Vue3（包括Vue3.2最新语法）

LBJ
17,958 阅读2分钟

⚠️本文为掘金技术社区首发，未经授权禁止转载！

💖原创不易，汇成此文更不易，欢迎点赞收藏和评论~

前言

🚀最近为了夯实Vue，从7月2号开始，共花了74天，把Vue3完完整整地过了一遍，受益匪浅

image.png

📚我将所有笔记整理成此文，共101张脑图，包括了Vue3.2最新的语法。适合初学者和对Vue了解不全面的同学

🎁看完此文，你将会对Vue有一个更全面、更深一步的了解！！

脑图

基础

应用实例和组件实例

1应用实例和组件实例.png

模板语法

2模板语法.png

配置选项

3配置选项.png

计算属性和监听器

4计算属性和监听器.png

绑定class和style

5绑定class和style.png

条件渲染

6条件渲染.png

列表渲染v-for

7列表渲染v-for.png

事件处理

8事件处理.png

v-model及其修饰符

9v-model及其修饰符.png

组件的基本使用

10组件的基本使用.png

深入组件

注册组件

1 注册组件.png

组件Props

2组件Props.png

非属性特性

3非属性特性.png

自定义事件

4自定义事件.png

插槽slot

5插槽slot.png

依赖注入：Provide和Inject

6依赖注入：Provide和Inject.png

动态组件和异步组件

7动态组件和异步组件.png

模板引用和控制更新

8模板引用和控制更新.png

过渡和动画

过渡和动画概述

1过渡和动画概述.png

基于class和style的过渡和动画

2基于class和style的过渡和动画.png

单元素单组件的过渡

3单元素单组件的过渡.png

多元素多组件的过渡

4多元素多组件的过渡.png

列表过渡

5列表过渡.png

状态过渡

6状态过渡.png

可复用&组合

组合式API介绍

1.1组合式API介绍.png

setup函数

1.2setup函数.png

生命周期钩子

1.3生命周期钩子.png

Provide和Inject

1.4Provide和Inject.png

模板引用 template-refs

1.5模板引用 template-refs.png

Mixin

2Mixin.png

自定义指令

3自定义指令.png

Teleport组件

4Teleport组件.png

渲染函数1

5.1渲染函数1.png

渲染函数2（用原生JS代替模板功能）

5.2渲染函数2（用原生JS代替模板功能）.png

渲染函数3

5.3渲染函数3.png

Vue插件

6Vue插件.png

高阶指南

深入响应性原理

1.1深入响应性原理.png

响应性基础

1.2响应性基础.png

计算属性

1.3.1计算属性.png

watchEffect

1.3.2watchEffect.png

watch

1.3.3watch.png

底层渲染机制和优化

2底层渲染机制和优化.png

Vue2中的更改检测警告

3Vue2中的更改检测警告.png

工具

单文件组件

1单文件组件.png

测试

2测试.png

TS支持1

3.1TS支持1.png

TS支持2

3.2TS支持2.png

移动端

4移动端.png

生产环境部署

5生产环境部署.png

规模化

Vue的路由

1Vue的路由.png

状态管理

2状态管理.png

SSR服务端渲染

3SSR服务端渲染.png

无障碍

基础

1基础.png

语义

2语义.png

标准

3标准.png

资源

4资源.png

风格指南

优先级 A 的规则：必要的 (规避错误)

1优先级 A 的规则：必要的 (规避错误).png

优先级 B 的规则：强烈推荐 (增强代码可读性)-1

2.1优先级 B 的规则：强烈推荐 (增强代码可读性).png

优先级 B 的规则：强烈推荐 (增强代码可读性)-2

2.2优先级 B 的规则：强烈推荐 (增强代码可读性).png

优先级 C 的规则：推荐 (将选择和认知成本最小化)-1

3.1优先级 C 的规则：推荐 (将选择和认知成本最小化).png

优先级 C 的规则：推荐 (将选择和认知成本最小化)-2

3.2组件实例选项的顺序.png

优先级D

4优先级D.png

从Vue2迁移

概览介绍

1.1概览介绍.png

非兼容的变更

1.2非兼容的变更.png

用于迁移的构建版本之概述

2.1用于迁移的构建版本之概述.png

升级流程

2.2升级流程.png

兼容性配置

2.3兼容性配置.png

API

应用配置

1应用配置.png

应用API

2应用API.png

全局API-1

3.1全局API-1.png

全局API-2

3.2全局API-2.png

全局API-3

3.3全局API-3.png

选项Data

4.1选项Data.png

选项 DOM

4.2选项 DOM.png

生命周期钩子-1

4.3.1生命周期钩子-1.png

生命周期钩子-2

4.3.2生命周期钩子-2.png

指令和组件

4.4指令和组件.png

组合-1

4.5.1组合-1.png

组合-2

4.5.2组合-2.png

杂项

4.6杂项.png

实例属性

5实例属性.png

实例方法

6实例方法.png

指令-1

7.1指令-1.png

指令-2

7.2指令-2.png

指令-3

7.3指令-3.png

指令-4

7.4指令-4.png

特殊attribute

8特殊attribute.png

内置组件-1

9.1内置组件.png

内置组件-2

9.2内置组件.png

内置组件-3

9.3内置组件.png

响应性基础API

10.1响应性基础API.png

Refs

10.2Refs.png

Computed与watch

10.3Computed与watch.png

Effect作用域API

10.4Effect 作用域 API.png

组合式API

11组合式API.png

SFC语法规范

12.1SFC语法规范.png

SFC工具

12.2SFC工具.png

script setup-1

12.3.1script setup-1.png

script setup-2

12.3.2script setup-2.png

style scoped

12.4.1style scoped.png

style module

12.4.2style module.png

END

如有问题，欢迎留言告知，感谢~

参考

v3.cn.vuejs.org/

avatar
文章
阅读
粉丝

友情链接：