溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“MVVM模型在Vue中如何應用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“MVVM模型在Vue中如何應用”吧!
我們知道每一個 Vue 應用都是從創建一個新的實例開始的，根據 Vue2 的官方文檔我們可以得知 Vue 的設計是得到了 MVVM 模型 的啟發，所以就有了在我們創建 Vue 實例時，文檔中經常使用vm這個變量名來表示 Vue 實例。
我們知道了 Vue 借鑒了 MVVM模型的原理，但是我們只知道借鑒這件事，卻不知道什么是MVVM模型，這里簡單說明一下什么是 MVVM 模型。
MVVM (Model-View-ViewModel) 就是將其中的 View 的狀態和行為抽象化，MVVM 模式和 MVC 模式一樣，主要目的是分離視圖和模型，MVVM 旨在利用 WPF 中的數據綁定函數，通過從視圖層中幾乎刪除所以 GUI 代碼，更好地促進視圖層開發與模式其余部分的分離，不需要用戶體驗開發人員編寫 GUI 代碼，他們可以使用框架標記語言，并創建到應用程序開發人員編寫和維護的視圖模型的數據綁定。如下圖所示：
MVVM模型主要是為了分離視圖(View)和模型(Model)，其優點為：低耦合、可重用性、獨立開發以及可測試。 視圖和模型分離的特點給了 Vue 很大的啟發。
在 MVVM 模式中的組成部分分為以下四種：
Model(模型)：代表真實狀態的內容，即數據訪問層(包含數據實體以及數據實體的操作)
View(視圖)：用戶能在屏幕上看到的結構、布局和外觀，負責數據顯示以及交互方面
ViewModel(視圖模型)：暴露公共屬性和命名的視圖的抽象，將Model和View進行綁定，兩者在進行數據更改時能實時刷新。ViewModel能夠觀察到數據的變化，并對視圖對應的內容進行更新；ViewModel能夠監聽到視圖的變化，并能夠通知數據發生變化。
綁定器：在視圖模型中，在視圖與數據綁定器之間進行通信。
MVVM即模型-視圖-視圖模型。模型指的是后端傳遞的數據；視圖指的是所看到的頁面。視圖模型是mvvm模式的核心，它是連接view和model的橋梁。它有兩個方向：一是將模型轉化成視圖，即將后端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。二是將視圖轉化成模型，即將所看到的頁面轉化成后端的數據。實現的方式是：DOM 事件監聽。這兩個方向都實現的，我們稱之為數據的雙向綁定。
所以說得到MVVM模型啟發的Vue，其核心就是實現了DOM監聽與事件綁定，如下一個經典圖例：
舉一個簡單的 Vue 案例，來說明 MVVM 的主要三種組成部分在 Vue 中分別代表什么，如下：
<body>
<div id="id">
<h2>姓名：{{name}}</h2>
<h2>國籍：{{address}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在啟動時生成生產提示
const vm = new Vue({
data:{
name:'張三',
address:'中國'
}
})
vm.$mount('#id')
console.log(vm);
</script>
</body>
Model：模型層，data里面的數據，表示JS的對象
View：視圖層，HTML內容部分，表示HTML中能操作的DOM元素
ViewModel：充當連接視圖和數據的中間人，即就是定義了 Observer 觀察者身份，即橋梁。
到此，相信大家對“MVVM模型在Vue中如何應用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
