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代码




   
   
   	

 
  

    
    提交
    

  
 

实现输入内容，点击“提交”后，内容出现在页面列表中

  

    
    提交
    

  
 

（1）Model：(数据层&模型层）这里的Model，功能非常弱。因为我们并没有通过Ajax获取远程的数据

（2）View：(视图层)

  
  提交
  

（3）Presenter：(控制器) 用jQuery写，主要是dom操作。【重点关注这一层开发】——面向dom开发

这里 View——>Prensenter 进行通信，如何进行？

当View(视图层) 输入内容、点击“提交” 时，Prensenter(控制器) 会去执行对应的业务逻辑，同时控制器 调Model(模型层)去发Ajax请求（在这里这一块的数据功能较弱）

此时 Prensenter(控制器) 是 View(视图层) 和 Model(模型层) 的中介，再回看 Prensenter 又都是使用dom操作来执行业务逻辑。

二、MVVM设计模式

代码的重点

• View：视图层。会监听数据、事件的触发(主要是Vue的指令）

    
    提交
    

        
{
      {item}}
    
 

• Model：数据层。在Vue中，我们主要在写数据。【重点关注这一层】——面向数据开发

  var app = new Vue ({
	el: '#app',
	data: {
	 list: [],
	 inputValue: ''
	 },
        methods: {
	 handleBtnClick : function(){
	 this.list.push(this.inputValue), //实现列表+输入+点击
	 this.inputValue = '' //实现输入后框内变空
	 // alert(this.inputValue)  //实现输入+提交的结合
        }
       }
     })

• ViewModel：将 View 层和 Model 层连接起来，当视图层变化时，数据层也跟着变化，这其中ViewModel 带动其视图和数据的变化。

三、MVP & MVVM区别

• MVP 重点关注 P层 的开发，主要是面向 dom 开发；
• MVVM 重点关注第一个 M层 开发，主要是面向数据开发