當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

vue实现多行数据提交_（Vue起步）3.Vue设计模式：MVVM模式

發(fā)布時(shí)間：2023/12/19 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue实现多行数据提交_（Vue起步）3.Vue设计模式：MVVM模式小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

①公眾號(hào)：王醬醬記
②記錄跟著文檔學(xué)習(xí)Vue的一些關(guān)鍵點(diǎn)，持續(xù)更新。感興趣的小白建議關(guān)注一下
③Vue的MVVM模式與傳統(tǒng)的MVC模式有什么區(qū)別呢？這道題被面試大大虐過(guò)，之前無(wú)知的我好慘，趕快看起來(lái)吧。

關(guān)鍵詞：MVP、MVVM
需求實(shí)現(xiàn)：（使用todolist）傳統(tǒng)MVP模式實(shí)現(xiàn)邏輯、MVVM模式實(shí)現(xiàn)邏輯

一、傳統(tǒng)的MVP(MVC)模式

MVP設(shè)計(jì)模式

1、代碼分成三層

Model：數(shù)據(jù)層。
Presenter：呈現(xiàn)層（或與Vue相關(guān)的控制層）
View：視圖層（一般指頁(yè)面中的dom展示）

2、用 JQuery 實(shí)現(xiàn)一個(gè) TodoList

目的：符合傳統(tǒng)的MVP設(shè)計(jì)開發(fā)模式

//用面向?qū)ο缶帉懙囊欢蜫Query代碼<!DOCTYPE html> <html lang="en"> <head><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><meta charset="UTF-8"><title>TodoList Jquery</title> </head><body><div><input type="text"/><button id="btn">提交</button><ul></ul></div><script>function Page(){}$.extend(Page.prototype, {init: function() {this.bindEvent()} ,bindEvents: function() {var btn = $('#btn');btn.on('click', $proxy(this.handleBtnClick, this)) },handleBtnClick: function(){alert('123) }})var page = new Page();page.init();</script> </body> </html>

實(shí)現(xiàn)輸入內(nèi)容，點(diǎn)擊“提交”后，內(nèi)容出現(xiàn)在頁(yè)面列表中

<body><div><input id="input" type="text"/><button id="btn">提交</button><ul id="list"></ul></div><script>//用面向?qū)ο缶帉懙囊欢蜫Query代碼function Page(){}$.extend(Page.prototype, {init: function() {this.bindEvents()},bindEvents: function() {var btn = $('#btn');btn.on('click', $.proxy(this.handleBtnClick, this))},handleBtnClick: function() {var inputElem = $('#input')var inputValue = inputElem.val();var ulElem = $('#list');ulElem.append('<li>' + inputValue + '</li>')inputElem.val('');//input輸入框輸入完為空：當(dāng)掛在完成之后，input的值設(shè)置為空}})var page = new Page();page.init();</script> </body>

（1）Model：(數(shù)據(jù)層&模型層）這里的Model，功能非常弱。因?yàn)槲覀儾]有通過(guò)Ajax獲取遠(yuǎn)程的數(shù)據(jù)

（2）View：(視圖層)

（3）Presenter：(控制器) 用jQuery寫，主要是dom操作。【重點(diǎn)關(guān)注這一層開發(fā)】——面向dom開發(fā)

這里 View——>Prensenter 進(jìn)行通信，如何進(jìn)行？

當(dāng)View(視圖層) 輸入內(nèi)容、點(diǎn)擊“提交” 時(shí)，Prensenter(控制器) 會(huì)去執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯，同時(shí)控制器調(diào)Model(模型層)去發(fā)Ajax請(qǐng)求（在這里這一塊的數(shù)據(jù)功能較弱）

此時(shí) Prensenter(控制器) 是 View(視圖層) 和 Model(模型層) 的中介，再回看 Prensenter 又都是使用dom操作來(lái)執(zhí)行業(yè)務(wù)邏輯。

二、MVVM設(shè)計(jì)模式

代碼的重點(diǎn)

View：視圖層。會(huì)監(jiān)聽數(shù)據(jù)、事件的觸發(fā)(主要是Vue的指令）

Model：數(shù)據(jù)層。在Vue中，我們主要在寫數(shù)據(jù)。【重點(diǎn)關(guān)注這一層】——面向數(shù)據(jù)開發(fā)

var app = new Vue ({el: '#app',data: {list: [],inputValue: ''},methods: {handleBtnClick : function(){this.list.push(this.inputValue), //實(shí)現(xiàn)列表+輸入+點(diǎn)擊this.inputValue = '' //實(shí)現(xiàn)輸入后框內(nèi)變空// alert(this.inputValue) //實(shí)現(xiàn)輸入+提交的結(jié)合}}}) </script>

ViewModel：將 View 層和 Model 層連接起來(lái)，當(dāng)視圖層變化時(shí)，數(shù)據(jù)層也跟著變化，這其中ViewModel 帶動(dòng)其視圖和數(shù)據(jù)的變化。

三、MVP & MVVM區(qū)別

MVP 重點(diǎn)關(guān)注 P層的開發(fā)，主要是面向 dom 開發(fā)；
MVVM 重點(diǎn)關(guān)注第一個(gè) M層開發(fā)，主要是面向數(shù)據(jù)開發(fā)

總結(jié)

以上是生活随笔為你收集整理的vue实现多行数据提交_（Vue起步）3.Vue设计模式：MVVM模式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：理想回应雷达在无人陵园内显示全是人影：融
下一篇：小米最强旗舰！小米13 Ultra 4月