站長資訊網(wǎng)
vue是mvvm模式。vue中支持的雙向綁定就是利用mvvm模式，當(dāng)m層數(shù)據(jù)進行修改時，vm層會檢測到變化，并且通知v層進行相應(yīng)的修改來實現(xiàn)的，也就是數(shù)據(jù)影響視圖，視圖影響數(shù)據(jù)，極大了提高了開發(fā)效率。
本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。
vue是mvvm模式嗎
MVVM就是Model-View-ViewModel，vue是mvvm模式。
-
Model就是數(shù)據(jù)模型（亦指數(shù)據(jù)層）可以是我們固定死的數(shù)據(jù)，也可以是來自服務(wù)器請求來的數(shù)據(jù)。
-
View就是頁面DOM（亦指視圖層）主要就是向用戶展示信息的。
-
ViewModel 在vue中就是指vue實例（亦指數(shù)據(jù)模型層）充當(dāng)View與Model之間通信的橋梁。
ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是作用于某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。
創(chuàng)建了ViewModel后的雙向綁定達成
首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實現(xiàn)雙向綁定的關(guān)鍵。
從View側(cè)看，ViewModel中的DOM Listeners工具會幫我們監(jiān)測頁面上DOM元素的變化，如果有變化，則更改Model中的數(shù)據(jù)；
從Model側(cè)看，當(dāng)我們更新Model中的數(shù)據(jù)時，Data Bindings工具會幫我們更新頁面中的DOM元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- div鋪滿全屏而不是縮放網(wǎng)頁 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Edge 模式通知 Windows Internet Explorer 以最高級別的可用模式顯示內(nèi)容， 這實際上破壞了“鎖定”模式。即如果你有IE9的話說明你有IE789，那么就調(diào)用高版本的那個也就是IE9。 --> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原生實現(xiàn)js實現(xiàn)M-V-VM</title> <script> /* MVVM : model 模型對象--》指的是構(gòu)成界面內(nèi)容的相關(guān)數(shù)據(jù) view 視圖對象--》指的給給用戶或者開發(fā)者展示數(shù)據(jù)的界面 viewmodel 視圖模型對象--》 指的是view與model之間的橋梁 */ let msg="Hello world!";//相當(dāng)于model window.onload=function(){ let h4Dom = document.getElementById("h4Dom"); let inputDom = document.getElementById("inputDom"); h4Dom.innerHTML=msg; inputDom.value=msg; //通過對事件源的監(jiān)聽來實現(xiàn)，為js對象實現(xiàn)動態(tài)事件監(jiān)聽 //input輸入事件 inputDom.addEventListener("input",function(){ msg=this.value; h4Dom.innerHTML=msg; }); } </script> </head> <body> <div> <h4 id="h4Dom"></h4> <input type="text" value="" id="inputDom"/> </div> </body> </html>
實現(xiàn)效果：
【
