雖然 Vue.js 有自己介紹它不是採用 MVVM 的框架,但 MVVM 的概念卻影響 Vue.js 的運作,因此讓我們先了解什麼是 MVVM 架構 。
架構示意圖
View
代表顯示在畫面的樣子,像是按鈕、文字輸入欄位等等
Model
主要取用資料的部分
ViewModel
將資料和畫面綁定的連結器
實際例子
透過下面例子,就可了解 Vue 資料與畫面雙向綁定還有 MVVM 架構
View
- input 輸入視窗
- input 輸入視窗內的資料顯示
- 當我們修改 input 輸入視窗值,資料 text 值也會改變
Model
- data 物件中的 text
- 當我們用 Vue 開發者工具修改資料 text 值,input 輸入視窗值也會改變
ViewModel
- 宣告ㄧ個變數 vm Vue 物件,將這個物件與畫面 div 綁定來作為資料與畫面的綁定器。