iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
Modern Web

少年學Vue,如隙中窺月系列 第 3

[Day3] MVVM 架構

  • 分享至 

  • xImage
  •  

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

架構示意圖

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

View

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

Model

主要取用資料的部分

ViewModel

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

實際例子

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

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 綁定來作為資料與畫面的綁定器。

上一篇
[Day2] 第一個 Vue 應用程式
下一篇
[Day4] 資料與畫面綁定的方法
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言