iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 3
0
Modern Web

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

[Day3] ＭVVM 架構

12th鐵人賽 vue.js
2106 瀏覽

  • 分享至 

  • twitterImage
    •  

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

上一篇
[Day2] 第一個 Vue 應用程式
下一篇
[Day4] 資料與畫面綁定的方法
系列文
少年學Vue，如隙中窺月 共 30 篇
  1. 26
    [Day26] jsES6語法-解構(上)
  2. 27
    [Day27]jsES6語法-解構(下)
  3. 28
    [Day0] 參賽初衷
  4. 29
    [Day29] CSS display複習
  5. 30
    [Day30] 完賽心得
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙