大家好,我是“前端点线面”,一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图(“百题斩”获取《前端百题斩》pdf版;分别回复“go、React操作系统Linux设计模式jswebpacknginxRedux、Vue”获取对应学习思维导图,一起卷起来)

俗话说的好“好记性不如烂笔头”,今天秉承着后期复习方便的态度,整理了一份Vue3.0基础知识点,并以思维导图的方式呈现出来,方便跟老铁们一起查漏补缺。

62990f976752f2f94f312d07e61b39b8.png
Vue3.0.png

一、项目初始化

8f2290c5f9786e882ed1c9f9ee370735.png
1.png

二、UI层面

a2e2990af746fc0a60793b7bed597379.png
2.png

2.1 模板语法

2.1.1 插值
b1461d9e07186c824c20d7d6fb4a9d75.png
2-1-1.png
2.1.2 指令
6c17c3d1ba79a8ace19fddad0f7245c5.png
2-1-2.png

2.2 进阶

2.2.1 样式绑定
150b320d690e853dbd86e60a981062c7.png
2-2-1.png
2.2.2 条件渲染
14f0b80c13a4096799192020d1d93bc3.png
2-2-2.png
2.2.3 列表渲染
0a012d83f9cc9fbf78939464dcda0f1b.png
2-2-3.png
2.2.4 事件处理
a6f90b184adf565e4ebc05b27bd33a43.png
2-2-4.png
2.2.5 表单
600085472be2fb5f1265df97cf3a2a88.png
2-2-5.png

三、组件

252ad6e7f5df0cdd6a60dac8c97d975c.png
3.png

3.1 组件注册

7efcaabb37058b48d64fb6f983168618.png
3-1.png

3.2 插槽

e14ebe4b57b28063e2fa0179ba0328ad.png
3-2.png

3.3 动态组件

eb5e49bab79997022077bd863eaa4c41.png
3-3.png

3.4 异步组件

746b30502ab31b842a6b2418996f2b3e.png
3-4.png

四、数据层面

00a70b5ad780696b41be7f831d500676.png
4.png

4.1 基础数据

8c0704e84e9ef1ea1976c42ca11c66c6.png
4-1.png

4.2 通信层面

b4dcd56ad8fc120d491482c20d44d8dc.png
4-2.png

五、Vue包中关键函数

4c50406a104427e19f6962b586fd61aa.png
5.png

5.1 Vue.createApp(options)

ceb0504a92b2a5d087f7261bb49b0578.png
5-1.png
5.1.1 options内容
a18d4cb36e01abfe9c6c0e0e1f90f618.png
5-1-1.png

5.2 组合式API

4a4430c21f47bcf45593ce29c19fd415.png
5-2.png
5.2.1 为什么使用
ca5057e256d141f878ed519cb1eaea2a.png
5-2-1.png
5.2.2 基础
85c795ebcbacc35aaf788b7f3be1da80.png
5-2-2.png
5.2.2.1 setup
3bdba523cccf13006f9b07711f3a9ef9.png
5-2-2-1.png
5.2.2.2 ref
78f7608047442fd30e5a65cded4f375d.png
5-2-2-2.png
5.2.2.3 生命周期钩子
e24870285480bd73f6ca52b0b5106070.png
5-2-2-3.png
5.2.2.4 watch响应式更改
e1cc352231b5483f750fba05d95cd746.png
5-2-2-4.png
5.2.2.5 computed
1f3c532974e36e347bbd23d8be9698c3.png
5-2-2-5.png
5.2.3 单文件组件<script setup>
979371b8ebea237631d72b1e24108eaf.png
5-2-3.png

六、感悟

在整理这些基础知识点的过程中,有以下几点感悟,不一定正确,分享出来与大家探讨:

  1. 相比于React,Vue封装的内容是真多,让我需要花大量精力去学习这些API与方法;

  2. 从表现层上看,由于自己能力有限,除了其对相关内容进行更好的就会,就不太清楚setup还能帮助我们做什么!

················· 执鸢者简介 ·················

你好,我是执鸢者,毕业于华中科技大学,现在是一名百度前端研发工程师,写有多篇原创文章,分享自己在学习中的点滴收获,近期撰写了《前端百题斩》系列文章(回复“百题斩”获取)、go入门文章,近期在撰写React系列文章,欢迎喜欢的小伙伴领取相关资料。

9d4f666319c7cd33d042a5bb46744ac4.png

识别方二维码加我微信、拉你进交流

7342b525610e95d1c88bd5c727f7d6f8.png

[1] 五万字前端面试宝典——前端百题斩(上)新鲜出炉

[2] 纯CSS实现beautiful按钮

[3] 一张思维导图入门React

[4] 一文搞定Diff算法

[5] 16张图入门Nginx——(前端够用,运维入门)

Logo

前往低代码交流专区

更多推荐