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

最新推荐文章于 2024-04-23 12:25:54 发布

weixin_39609527

最新推荐文章于 2024-04-23 12:25:54 发布

阅读量376

点赞数

文章标签： vue实现多行数据提交 vue获取输入框得内容

①公众号：王酱酱记
②记录跟着文档学习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层开发，主要是面向数据开发

weixin_39609527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实现多行数据提交_（Vue起步）3.Vue设计模式：MVVM模式

①公众号：王酱酱记②记录跟着文档学习Vue的一些关键点，持续更新。感兴趣的小白建议关注一下③Vue的MVVM模式与传统的MVC模式有什么区别呢？这道题被面试大大虐过，之前无知的我好惨，赶快看起来吧。关键词：MVP、MVVM需求实现：（使用todolist）传统MVP模式实现逻辑、MVVM模式实现逻辑一、传统的MVP(MVC)模式MVP设计模式1、代码分成三层Model：数据层。Presenter...
复制链接

扫一扫