"不畏懼，不講究，未來的日子好好努力"——大家好！我是小芝麻??
首先感謝大家對小芝麻上一篇《想自學JS嗎？想提升JS底層原理嗎？76張腦圖帶你徹底搞懂原生JS》的支持和認可??，，其次是感謝大家的包容和鼓勵；
特別、特別、特別感謝！！！
另外筆者也成功升到了3級?? ；既然大家都沒什么要求，那本芝麻就偷偷的當作什么都沒發生過了（就這么沒有節操，，哈哈哈哈）
今天小芝麻想分享的是VUE的基礎，之所以沒有按照專門的模塊單獨寫文章，是因為小芝麻覺得：
- 1、尤大大的API近乎完美
- 2、很多大神的文章通俗易懂且透徹，各個網站都很有很多；
- 3、小芝麻的水平實在有限，不及大家，所以就不獻丑了；
每個人都有自己的學習方式，畫圖可能就是小芝麻覺得最舒服，和識訓最大的方式；所以本篇還是給大家分享一下思維導圖，如果您剛好能識訓一二，那是小芝麻榮幸?? 能幫到您查缺補漏；
本篇內容適用于：初學前端；及作業時間不久想回顧基礎的各位伙伴；
這次先上圖片鏈接地址： gitee.com/jinsexiaozh…
0、模塊化進化史：光理論是不夠的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
1、VUE初識
2、VUE的基礎語法
3、VUE的常用指令1
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1229" height="1280"></svg>)
4、VUE的常用指令if/show/model
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1092" height="1280"></svg>)
5、VUE中的常用事件處理
6、filter過濾器方法
7、computed 計算屬性
8、watch 監聽器
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1280" height="1251"></svg>)
9、雙向資料系結的原理
9.1、資料驅動視圖的原理
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1280" height="935"></svg>)
9.2、Object.defineProperty()
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1280" height="1184"></svg>)
9.3、proxy()
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1280" height="611"></svg>)
9.4、視圖驅動資料的原理
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1280" height="535"></svg>)
10、class和style動態系結
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="962" height="1280"></svg>)
11、VUE 生命周期函式
對照下面API圖解
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1039" height="1280"></svg>)
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="505" height="1280"></svg>)
12、VUE 中的組件基礎
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="942" height="1280"></svg>)
13、VUE 組件中的slot插槽
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1280" height="1263"></svg>)
14、組件資訊通訊
14.1、父傳子——props屬性傳遞
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1261" height="1280"></svg>)
14.1.1單項資料流
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1280" height="870"></svg>)
14.2、子改父——發布訂閱方式
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1153" height="1280"></svg>)
14.3、EventBus
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="999" height="1280"></svg>)
14.4、祖先與后代——provide和inject
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1280" height="992"></svg>)
14.5、ref/parent/children
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="917" height="1280"></svg>)
15、VUEX基礎及使用
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="967" height="1280"></svg>)
16、VUE-CLI基礎及使用
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1247" height="1280"></svg>)
16.1、VUE-CLI 創建專案
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1280" height="632"></svg>)
16.2、VUE-CLI 檔案目錄
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1020" height="1280"></svg>)
16.3、VUE-CLI 進階處理
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="731" height="1280"></svg>)
17、VUE-ROUTER 基礎概括
18、VUE-ROUTER 實作路由跳轉
以上的都看明白嗎？光理論是不夠的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！
本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60302.html
標籤：JavaScript