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 請參看官網 進一步學習請參考官方文件

部分資源來自網路；

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