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

# 脑图

# 基础

# 应用实例和组件实例

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

# 自定义指令

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

上次更新: 2022/01/24, 2:01:00

01
前端工程师生产环境 debugger 技巧 10-17

02
独立开发者资源 09-05

03
Vis-Network中文API文档 09-29

更多文章>