圖說VUE的MVVM
1.png
Vue是MVVM架構(gòu)熟史，響應(yīng)式馁害，輕量級(jí)框架。
主要特點(diǎn)：1蹂匹、輕量級(jí)2碘菜、雙向數(shù)據(jù)綁定3、指令4怒详、組件化5炉媒、客戶端路由6踪区、狀態(tài)管理
2.png
MVVM架構(gòu)是指：
數(shù)據(jù)層（Model）：應(yīng)用數(shù)據(jù)以及邏輯昆烁，主要指從后端獲取的數(shù)據(jù)
視圖層（View）：頁面UI組件，主要由 HTML 和 CSS 來構(gòu)建
視圖數(shù)據(jù)模型（ViewModel）：數(shù)據(jù)與視圖關(guān)聯(lián)起來缎岗，數(shù)據(jù)和 DOM 已經(jīng)建立了關(guān)聯(lián)静尼，是響應(yīng)式的，使編程人員脫離復(fù)雜的界面操作
ViewModel主要功能是實(shí)現(xiàn)數(shù)據(jù)雙向綁定：
數(shù)據(jù)變化后更新視圖传泊，既：model有數(shù)據(jù)更新時(shí)UI組件會(huì)響應(yīng)變化
視圖變化后更新數(shù)據(jù)鼠渺，界面上如果有input輸入框，輸入數(shù)據(jù)時(shí)眷细，model中的數(shù)據(jù)也會(huì)更新
與jQuery比較會(huì)更清晰：
jQuery想要修改界面中某個(gè)標(biāo)簽拦盹，需要以下幾步：
搜索web頁面DOM樹
根據(jù)選擇器選擇到DOM
將數(shù)據(jù)更新到節(jié)點(diǎn)
以上步驟在操作更新節(jié)點(diǎn)時(shí)都需要進(jìn)行一遍流程
3.png
