2018 我所瞭解的 Vue 知識大全（一）

年初第一個 flag 就是掌握 vue ，哈哈

Vue ，React ，Angular 三大主流框架，最後我選擇學習 Vue ，接觸過 React ，本身感受學習曲線有些陡峭，進而我選擇了學習 Vue ，他的學習曲線平穩不少；無論選擇什麼框架，除了對基礎的知識有必定的瞭解掌握，還應該對 ES6 有必定的瞭解；

這就是我腦海中的 Vue 知識體系；

一句話概況了 Vue 經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件;

Vue 的建立

一個簡單的 Vue 實例只須要四步便可

咱們的學習目的確定不止於建立簡單的 Vue 實例；而是用它去實現更加多變的功能需求；那咱們須要進一步去學習 Vue-router 和 Vuex 以及 Vue-cli；

先說說基礎的 Vue 吧，在建立了一個簡單 Vue 實例以後，咱們是否還能在實例中添加更加完善的數據選項，去完成咱們多變的功能需求；答案是確定能的；

指令

下面是我用上述指令寫的一個小案例，恰好全部的指令都上了用場

詳細請看 demo 源碼

自定義指令

在代碼的實例中

查看代碼源

Vue API

Vue 經常使用選項

這就是我在學習 Vue 的時候，在 Vue 實例中添加的比較多的； directives 和 components 在 Vue 實例中爲建立的 局部 自定義指令和註冊組件，Vue.directive() 和 Vue.component() 則是註冊全局

Vue 組件

生命週期鉤子

每一個 Vue 實例在被建立以前都要通過一系列的初始化過程。例如須要設置數據監聽、編譯模板、掛載實例到 DOM、在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，給予用戶機會在一些特定的場景下添加他們本身的代碼。

在 QQ 羣裏看到一張生命週期圖，我以爲寫的特別好,感謝總結這張圖的朋友

配合着實例代碼效果更佳 查看代碼源

生命週期鉤子的函數簡單說就是八個函數

如何讓 Vue 書寫更佳優美？

詳細 style-guide 請參看官網 進一步學習請參考 官方文檔

部分資源來自網絡；

歡迎繼續關注，後續持續更新補全