MVVM模型在Vue中的使用詳解
理解MVVM模型
我們知道每一個 Vue 應(yīng)用都是從創(chuàng)建一個新的實例開始的,根據(jù) Vue2 的官方文檔我們可以得知 Vue 的設(shè)計是得到了 MVVM 模型 的啟發(fā),所以就有了在我們創(chuàng)建 Vue 實例時,文檔中經(jīng)常使用vm這個變量名來表示 Vue 實例。
什么是 MVVM 模型
我們知道了 Vue 借鑒了 MVVM模型的原理,但是我們只知道借鑒這件事,卻不知道什么是MVVM模型,這里簡單說明一下什么是 MVVM 模型。
MVVM (Model-View-ViewModel) 就是將其中的 View 的狀態(tài)和行為抽象化,MVVM 模式和 MVC 模式一樣,主要目的是分離視圖和模型,MVVM 旨在利用 WPF 中的數(shù)據(jù)綁定函數(shù),通過從視圖層中幾乎刪除所以 GUI 代碼,更好地促進視圖層開發(fā)與模式其余部分的分離,不需要用戶體驗開發(fā)人員編寫 GUI 代碼,他們可以使用框架標(biāo)記語言,并創(chuàng)建到應(yīng)用程序開發(fā)人員編寫和維護的視圖模型的數(shù)據(jù)綁定。如下圖所示:
MVVM模型主要是為了分離視圖(View)和模型(Model),其優(yōu)點為:低耦合、可重用性、獨立開發(fā)以及可測試。 視圖和模型分離的特點給了 Vue 很大的啟發(fā)。
MVVM的組成部分
在 MVVM 模式中的組成部分分為以下四種:
Model(模型):代表真實狀態(tài)的內(nèi)容,即數(shù)據(jù)訪問層(包含數(shù)據(jù)實體以及數(shù)據(jù)實體的操作)
View(視圖):用戶能在屏幕上看到的結(jié)構(gòu)、布局和外觀,負(fù)責(zé)數(shù)據(jù)顯示以及交互方面
ViewModel(視圖模型):暴露公共屬性和命名的視圖的抽象,將Model和View進行綁定,兩者在進行數(shù)據(jù)更改時能實時刷新。ViewModel能夠觀察到數(shù)據(jù)的變化,并對視圖對應(yīng)的內(nèi)容進行更新;ViewModel能夠監(jiān)聽到視圖的變化,并能夠通知數(shù)據(jù)發(fā)生變化。
綁定器:在視圖模型中,在視圖與數(shù)據(jù)綁定器之間進行通信。
Vue中的實現(xiàn)
MVVM即模型-視圖-視圖模型。模型指的是后端傳遞的數(shù)據(jù);視圖指的是所看到的頁面。視圖模型是mvvm模式的核心,它是連接view和model的橋梁。它有兩個方向:一是將模型轉(zhuǎn)化成視圖,即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面。實現(xiàn)的方式是:數(shù)據(jù)綁定。二是將視圖轉(zhuǎn)化成模型,即將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù)。實現(xiàn)的方式是:DOM 事件監(jiān)聽。這兩個方向都實現(xiàn)的,我們稱之為數(shù)據(jù)的雙向綁定。
所以說得到MVVM模型啟發(fā)的Vue,其核心就是實現(xiàn)了DOM監(jiān)聽與事件綁定,如下一個經(jīng)典圖例:
MVVM模型在 Vue 中的應(yīng)用
舉一個簡單的 Vue 案例,來說明 MVVM 的主要三種組成部分在 Vue 中分別代表什么,如下:
<body> <div id="id"> <h1>姓名:{{name}}</h1> <h1>國籍:{{address}}</h1> </div> <script> Vue.config.productionTip = false; //阻止 vue 在啟動時生成生產(chǎn)提示 const vm = new Vue({ data:{ name:'張三', address:'中國' } }) vm.$mount('#id') console.log(vm); </script> </body>
Model:模型層,data里面的數(shù)據(jù),表示JS的對象
View:視圖層,HTML內(nèi)容部分,表示HTML中能操作的DOM元素
ViewModel:充當(dāng)連接視圖和數(shù)據(jù)的中間人,即就是定義了 Observer 觀察者身份,即橋梁
當(dāng)然 MVVM 模型的思想不僅僅只應(yīng)用在 Vue 上面,其他主流的前端框架也都能看到 MVVM 模型的影子。希望看完這篇文章,能夠幫助你對 MVVM 模型有了更深一步的了解。
到此這篇關(guān)于MVVM模型在Vue中的使用的文章就介紹到這了,更多相關(guān)Vue使用MVVM模型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vxe-table中vxe-grid(高級表格)的使用方法舉例
vxe-table是一個基于vue的表格組件,下面這篇文章主要給大家介紹了關(guān)于vxe-table中vxe-grid(高級表格)的使用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05Vue3實戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例
這篇文章主要為大家介紹了Vue3實戰(zhàn)學(xué)習(xí)配置使用vue?router路由步驟示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06vue基礎(chǔ)之事件簡寫、事件對象、冒泡、默認(rèn)行為、鍵盤事件實例分析
這篇文章主要介紹了vue基礎(chǔ)之事件簡寫、事件對象、冒泡、默認(rèn)行為、鍵盤事件,結(jié)合實例形式分析了vue.js事件簡寫、冒泡及阻止冒泡等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03vue使用原生js實現(xiàn)滾動頁面跟蹤導(dǎo)航高亮的示例代碼
這篇文章主要介紹了vue使用原生js實現(xiàn)滾動頁面跟蹤導(dǎo)航高亮的示例代碼,滾動頁面指定區(qū)域?qū)Ш礁吡痢P【幱X得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10Vue3使用transition實現(xiàn)組件切換的過渡效果
<Transition> 是一個內(nèi)置組件,這意味著它在任意別的組件中都可以被使用,無需注冊,它可以將進入和離開動畫應(yīng)用到通過默認(rèn)插槽傳遞給它的元素或組件上,本文介紹了Vue3使用transition實現(xiàn)組件切換的過渡效果,需要的朋友可以參考下2024-09-09springboot+vue+對接支付寶接口+二維碼掃描支付功能(沙箱環(huán)境)
這篇文章主要介紹了springboot+vue+對接支付寶接口+二維碼掃描支付(沙箱環(huán)境),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10