vue簡介

1.vue特性

vue框架有兩個特性

  • 數(shù)據(jù)驅(qū)動視圖
  • 雙向數(shù)據(jù)綁定

1.1 數(shù)據(jù)驅(qū)動視圖

在使用vue的頁面中，vue會監(jiān)聽數(shù)據(jù)的變化，從而自動重新渲染頁面的結(jié)構(gòu)。示意圖如下：

  • 好處：當(dāng)數(shù)據(jù)發(fā)生變化，頁面會重新進(jìn)行渲染
  • 注意：數(shù)據(jù)驅(qū)動視圖是單向數(shù)據(jù)綁定。

1.2 雙向數(shù)據(jù)綁定

在填寫表單時，雙向數(shù)據(jù)綁定可以讓開發(fā)者在不操作DOM的前提下，自動將用戶所填寫的最新的數(shù)據(jù)同步到數(shù)據(jù)源中。

  • 好處：開發(fā)者可以不操作DOM，來獲取表單元素的值

  • js數(shù)據(jù)的變化，會自動渲染到頁面上

  • 頁面上數(shù)據(jù)的變化，會被vue自動同步到j(luò)s數(shù)據(jù)中。

2.MVVM

MVVM是數(shù)據(jù)驅(qū)動視圖和雙向數(shù)據(jù)綁定的原理。MVVM指的是Model、View、ViewModel，它把每個HTML頁面拆分了三個部分

  • Model是頁面渲染時所依賴的數(shù)據(jù)源
  • View是指頁面渲染的DOM結(jié)構(gòu)
  • ViewModel是指vue的實(shí)例，它是MVVM的核心
28.png

3.MVVM的工作原理

ViewModel是MVVM的核心，是它把當(dāng)前頁面的數(shù)據(jù)源(Model)和頁面的結(jié)構(gòu)(DOM)連接在了一起

  • 當(dāng)數(shù)據(jù)源發(fā)生變化時，會將ViewModel監(jiān)聽到，VM會根據(jù)最新的數(shù)據(jù)源自動更新DOM結(jié)構(gòu)
  • 當(dāng)表單元素的值發(fā)生變化時，也會被VM監(jiān)聽到，VM會將變化過后最新的值自動同步到Model數(shù)據(jù)源中
29.png

4.總結(jié)

vue的簡介.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容