Vue
https://gyazo.com/aa82dae16b0fd922c4b47cb7c994e092
MVC架構
Virtual DOM: V-Node
Directives
Two-way Binding
Vue不需編譯,可以馬上開始使用
皆需編譯
Vue Router
提供在前端模擬路由的功能
切換頁面時不需要向後端發出請求
hash模式
預設
history模式
abstract模式
Vuex
將單向資料流Flux設計模式實作進Vue框架中
參考Flux design pattern與Redux狀態管理模式
取flux中的x得名
使用單一狀態樹統一管理應用程式的所有狀態
儲存狀態(State)於Store
Actions
定義App的所有行為
前端組件觸發事件時會dispatch給Actions
Actions不會直接修改State
而是提交(commit)mutation,讓對應的mutation handler去更改State
亦可非同步與Backend API溝通
Mutations
從commit接收Actions傳遞的資料與行為
透過計算處理後更改State
每個Mutation都有
一個字串型態的type
事件類型
handler
回調函數
實際更改狀態的地方
首個傳入參數便為State
只有commit mutation才可更改State中的狀態
不可直接調用mutation handler
State
使用一個物件型態記錄App所有狀態
由Mutation更改狀態
建議將所有App狀態存入Store中
Vuex仍可讓組件保有局部狀態
單向資料流
所有的動作從Actions出發
將結果存進Store中,改變State
State改變後,view會連同改變
這一連串的行為是不可逆 的
因此稱為單向資料流
VuePress
CarvueJS
Vuetify
Element UI
Vue Material