初识 Vue(03)---(MVVM 设计模式)

MVP 设计模式

Model 层：模型层

Presenter 层：呈现层(业务逻辑控制层)

View 层：视图层（DOM 展示）

过程：视图层（V）发出一个事件交给控制器（P 呈现层）,控制器调用 Ajax 去模型层（M）获取数据 ; 或者直接去视图层（V）进行DOM 操作。控制器（P 呈现层）是核心，是模型层（M）和 视图层（V） 的中转站，其中大部分代码在进行 DOM 操作

（面向 DOM 开发）。模型层（M）比较边缘。

实例：

用 jQuery 实现 todo-list 功能

    
    
    


    

        
        提交
        
  
    

       


 init:function(){          // 控制器 P
                this.bindEvents()
            },
            bindEvents:function(){
                var btn = $('#btn'); 
            },
            handleBtnClick:function(){
                var inptutValue = $("#input").val();
                var ulElem = $("#list");
                ulElem.append('
' + inputValue + '
')：
                inputElem.val('');
            }
            })
            
            var page =  new Page();
            page.init();        
       

输出：

 

本段代码采用 MVP 的设计模式，并没有用 ajax 获取内容 ，故 M（模型层）被省略，通过控制器（P）来改变视图（V）

MVVM 设计模式

Model 层：模型层（存储数据）

View 层：视图层（显示数据）

ViemModel层：Vue 自带的，开发时无需关注具体如何实现

实例

    
    
    


    
                                       V 层
        
        提交
        

            
{{item}}
        
  
    

      


  
                                       V 层
        
        提交
        

            
{{item}}
        
  
    

      

通过操纵 M（模型层） 层 ，然后 V（视图层） 层会自动跟着变化 ，是通过 VM 层（API:Object.define.protein 和 虚拟DOM机制来实现）来实现的。 M（模型层） 层 与  V（视图层）之间双向联系，好处是在开发过程中只需关注 M（模型层）即可，M（模型层）是核心（面向数据开发），极大减少DOM 开发，减少代码量。