Leo's Space

我寫故我在

0%

[Day3] ＭVVM 架構

發表於 更新於 分類於 ， Disqus：
文章字數： 325 所需閱讀時間 ≈ 1 分鐘

雖然 Vue.js 有自己介紹它不是採用 ＭVVM 的框架，但 MVVM 的概念卻影響 Vue.js 的運作，因此讓我們先了解什麼是 ＭVVM 架構 。

架構示意圖

https://i.imgur.com/lDYVYfr.png

View

代表顯示在畫面的樣子，像是按鈕、文字輸入欄位等等

Model

主要取用資料的部分

ViewModel

將資料和畫面綁定的連結器

實際例子

透過下面例子，就可了解 Vue 資料與畫面雙向綁定還有 ＭVVM 架構

https://i.imgur.com/PMhzc1W.png

https://i.imgur.com/lti9C7G.png

View

  • input 輸入視窗
  • input 輸入視窗內的資料顯示
  • 當我們修改 input 輸入視窗值，資料 text 值也會改變

Model

  • data 物件中的 text
  • 當我們用 Vue 開發者工具修改資料 text 值，input 輸入視窗值也會改變

ViewModel

  • 宣告ㄧ個變數 vm Vue 物件，將這個物件與畫面 div 綁定來作為資料與畫面的綁定器。