日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2023/12/19 vue 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 vue实现多行数据提交_（Vue起步）3.Vue设计模式：MVVM模式 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

①公眾號：王醬醬記
②記錄跟著文檔學習Vue的一些關鍵點，持續更新。感興趣的小白建議關注一下
③Vue的MVVM模式與傳統的MVC模式有什么區別呢？這道題被面試大大虐過，之前無知的我好慘，趕快看起來吧。
  • 關鍵詞：MVP、MVVM
  • 需求實現：（使用todolist）傳統MVP模式實現邏輯、MVVM模式實現邏輯

一、傳統的MVP(MVC)模式

MVP設計模式

1、代碼分成三層

  • Model： 數據層。
  • Presenter： 呈現層（或與Vue相關的控制層）
  • View： 視圖層（一般指頁面中的dom展示）

2、用 JQuery 實現一個 TodoList

  • 目的：符合傳統的MVP設計開發模式
//用面向對象編寫的一段JQuery代碼<!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>

實現輸入內容，點擊“提交”后，內容出現在頁面列表中

<body><div><input id="input" type="text"/><button id="btn">提交</button><ul id="list"></ul></div><script>//用面向對象編寫的一段JQuery代碼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輸入框輸入完為空：當掛在完成之后，input的值設置為空}})var page = new Page();page.init();</script> </body>

（1）Model：(數據層&模型層）這里的Model，功能非常弱。因為我們并沒有通過Ajax獲取遠程的數據

（2）View：(視圖層)

<div><input id="input" type="text"/><button id="btn">提交</button><ul id="list"></ul> </div>

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

<script>//用面向對象編寫的一段JQuery代碼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輸入框輸入完為空：當掛在完成之后，input的值設置為空}})var page = new Page();page.init(); </script>

這里 View——>Prensenter 進行通信，如何進行？

當View(視圖層) 輸入內容、點擊“提交” 時，Prensenter(控制器) 會去執行對應的業務邏輯，同時控制器 調Model(模型層)去發Ajax請求（在這里這一塊的數據功能較弱）

此時 Prensenter(控制器) 是 View(視圖層) 和 Model(模型層) 的中介，再回看 Prensenter 又都是使用dom操作來執行業務邏輯。

二、MVVM設計模式

代碼的重點

  • View：視圖層。會監聽數據、事件的觸發(主要是Vue的指令）
<div id = "app"><input type="text" v-model="inputValue"/><button v-on:click="handleBtnClick">提交</button><ul><li v-for="item in list">{{item}}</li></ul> </div>
  • Model：數據層。在Vue中，我們主要在寫數據。【重點關注這一層】——面向數據開發
var app = new Vue ({el: '#app',data: {list: [],inputValue: ''},methods: {handleBtnClick : function(){this.list.push(this.inputValue), //實現列表+輸入+點擊this.inputValue = '' //實現輸入后框內變空// alert(this.inputValue) //實現輸入+提交的結合}}}) </script>
  • ViewModel：將 View 層和 Model 層連接起來，當視圖層變化時，數據層也跟著變化，這其中ViewModel 帶動其視圖和數據的變化。

三、MVP & MVVM區別

  • MVP 重點關注 P層 的開發，主要是面向 dom 開發；
  • MVVM 重點關注第一個 M層 開發，主要是面向數據開發

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。