欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

MVVM模型在Vue中的使用詳解

 更新時(shí)間:2022年11月23日 10:51:03   作者:亦世凡華、  
MVVM模型主要是為了分離視圖(View)和模型(Model),其優(yōu)點(diǎn)為:低耦合、可重用性、獨(dú)立開(kāi)發(fā)以及可測(cè)試,視圖和模型分離的特點(diǎn)給了 Vue 很大的啟發(fā),這篇文章主要介紹了MVVM模型在Vue中的使用,需要的朋友可以參考下

理解MVVM模型

我們知道每一個(gè) Vue 應(yīng)用都是從創(chuàng)建一個(gè)新的實(shí)例開(kāi)始的,根據(jù) Vue2 的官方文檔我們可以得知 Vue 的設(shè)計(jì)是得到了 MVVM 模型 的啟發(fā),所以就有了在我們創(chuàng)建 Vue 實(shí)例時(shí),文檔中經(jīng)常使用vm這個(gè)變量名來(lái)表示 Vue 實(shí)例。

什么是 MVVM 模型

我們知道了 Vue 借鑒了 MVVM模型的原理,但是我們只知道借鑒這件事,卻不知道什么是MVVM模型,這里簡(jiǎn)單說(shuō)明一下什么是 MVVM 模型。

MVVM (Model-View-ViewModel) 就是將其中的 View 的狀態(tài)和行為抽象化,MVVM 模式和 MVC 模式一樣,主要目的是分離視圖和模型,MVVM 旨在利用 WPF 中的數(shù)據(jù)綁定函數(shù),通過(guò)從視圖層中幾乎刪除所以 GUI 代碼,更好地促進(jìn)視圖層開(kāi)發(fā)與模式其余部分的分離,不需要用戶體驗(yàn)開(kāi)發(fā)人員編寫(xiě) GUI 代碼,他們可以使用框架標(biāo)記語(yǔ)言,并創(chuàng)建到應(yīng)用程序開(kāi)發(fā)人員編寫(xiě)和維護(hù)的視圖模型的數(shù)據(jù)綁定。如下圖所示:

MVVM模型主要是為了分離視圖(View)和模型(Model),其優(yōu)點(diǎn)為:低耦合、可重用性、獨(dú)立開(kāi)發(fā)以及可測(cè)試。 視圖和模型分離的特點(diǎn)給了 Vue 很大的啟發(fā)。

MVVM的組成部分

在 MVVM 模式中的組成部分分為以下四種:

Model(模型):代表真實(shí)狀態(tài)的內(nèi)容,即數(shù)據(jù)訪問(wèn)層(包含數(shù)據(jù)實(shí)體以及數(shù)據(jù)實(shí)體的操作)

View(視圖):用戶能在屏幕上看到的結(jié)構(gòu)、布局和外觀,負(fù)責(zé)數(shù)據(jù)顯示以及交互方面

ViewModel(視圖模型):暴露公共屬性和命名的視圖的抽象,將Model和View進(jìn)行綁定,兩者在進(jìn)行數(shù)據(jù)更改時(shí)能實(shí)時(shí)刷新。ViewModel能夠觀察到數(shù)據(jù)的變化,并對(duì)視圖對(duì)應(yīng)的內(nèi)容進(jìn)行更新;ViewModel能夠監(jiān)聽(tīng)到視圖的變化,并能夠通知數(shù)據(jù)發(fā)生變化。

綁定器:在視圖模型中,在視圖與數(shù)據(jù)綁定器之間進(jìn)行通信。

Vue中的實(shí)現(xiàn)

MVVM即模型-視圖-視圖模型。模型指的是后端傳遞的數(shù)據(jù);視圖指的是所看到的頁(yè)面。視圖模型是mvvm模式的核心,它是連接view和model的橋梁。它有兩個(gè)方向:一是將模型轉(zhuǎn)化成視圖,即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁(yè)面。實(shí)現(xiàn)的方式是:數(shù)據(jù)綁定。二是將視圖轉(zhuǎn)化成模型,即將所看到的頁(yè)面轉(zhuǎn)化成后端的數(shù)據(jù)。實(shí)現(xiàn)的方式是:DOM 事件監(jiān)聽(tīng)。這兩個(gè)方向都實(shí)現(xiàn)的,我們稱之為數(shù)據(jù)的雙向綁定。

所以說(shuō)得到MVVM模型啟發(fā)的Vue,其核心就是實(shí)現(xiàn)了DOM監(jiān)聽(tīng)與事件綁定,如下一個(gè)經(jīng)典圖例:

MVVM模型在 Vue 中的應(yīng)用

舉一個(gè)簡(jiǎn)單的 Vue 案例,來(lái)說(shuō)明 MVVM 的主要三種組成部分在 Vue 中分別代表什么,如下:

<body>
    <div id="id">
        <h1>姓名:{{name}}</h1>
        <h1>國(guó)籍:{{address}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false; //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示
        const vm = new Vue({
           data:{
                name:'張三',
                address:'中國(guó)'
            }
        })
        vm.$mount('#id')
        console.log(vm);
    </script>
</body>

Model:模型層,data里面的數(shù)據(jù),表示JS的對(duì)象

View:視圖層,HTML內(nèi)容部分,表示HTML中能操作的DOM元素

ViewModel:充當(dāng)連接視圖和數(shù)據(jù)的中間人,即就是定義了 Observer 觀察者身份,即橋梁

當(dāng)然 MVVM 模型的思想不僅僅只應(yīng)用在 Vue 上面,其他主流的前端框架也都能看到 MVVM 模型的影子。希望看完這篇文章,能夠幫助你對(duì) MVVM 模型有了更深一步的了解。

到此這篇關(guān)于MVVM模型在Vue中的使用的文章就介紹到這了,更多相關(guān)Vue使用MVVM模型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論