Vue_ MVVM架構說明

MVVM 是Model-View-ViewModel 的縮寫,它是一種基於前端開發的架構模式,其核心是提供對View 和View Model 的雙向數據綁定,這使得View Model的狀態改變可以自動傳遞給View,這就是所謂的數據雙向綁定。注意Vue非MVVM框架,但MVVM概念影響Vue.js的運作。

MVVM 圖解

透過ViewModel將view及model做串連綁定,因此透過在view的變更,後端的資料也會同步更新數值,相較於jQ需寫程式碼去重新匯入view及改變資料的狀態,較為多工,並且需操作畫面上的dom元素,

而Vue是以資料狀態操作畫面

  • 透過DOM裡面的監聽event來控制/影響View Model,然後去修改Model中的資料內容;
  • 當Model中的資料變更,會讓View Model知道,再去修改相對應DOM中的內容