溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2022-10-26 09:11:44 來源：億速云 閱讀：129 作者：iii 欄目：編程語言

本篇內(nèi)容主要講解“MVVM模型在Vue中如何應(yīng)用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“MVVM模型在Vue中如何應(yīng)用”吧!

理解MVVM模型

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

什么是 MVVM 模型

我們知道了 Vue 借鑒了 MVVM模型的原理，但是我們只知道借鑒這件事，卻不知道什么是MVVM模型，這里簡單說明一下什么是 MVVM 模型。

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

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

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

MVVM的組成部分

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

Model(模型)：代表真實(shí)狀態(tài)的內(nèi)容，即數(shù)據(jù)訪問層(包含數(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ù)的變化，并對視圖對應(yīng)的內(nèi)容進(jìn)行更新；ViewModel能夠監(jiān)聽到視圖的變化，并能夠通知數(shù)據(jù)發(fā)生變化。

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

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

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

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

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

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

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

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

舉一個(gè)簡單的 Vue 案例，來說明 MVVM 的主要三種組成部分在 Vue 中分別代表什么，如下：

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

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

Model：模型層，data里面的數(shù)據(jù)，表示JS的對象

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

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

到此，相信大家對“MVVM模型在Vue中如何應(yīng)用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手