传统的MVP设计模式（面向DOM进行开发）
View （视图层，页面上的Dom展示）= Presenter （控制层）= Model （数据层）
视图层发出一个事件交给控制层，控制层根据业务逻辑要么调用Ajax获取数据，要么去操作DOM根据视图发生的事件。
大量的代码写在Presenter层，大量的代码在操作DOM。
<body>
<div>
<input type="text" id="input" >
<button id="btn">提交</button>
<ul id="list">
</ul>
</div>
<script>
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 ulElem = $("#list");
var inputValue =inputElem.val();
ulElem.append('<li>' + inputValue + '</li>');
inputElem.val() = '';
}
});
var page = new Page();
page.init();
</script>
</body>
TodoList MVP 小例子
MVVM设计模式（面向数据进行开发）
view （显示数据） viewModel （不需要自己编写，vue 内置） model（存储数据）
在写vue代码时，并没有任何Dom操作，对于MVVM编码重点一部分在与view视图层，一部分在与model模型层。
model层数据变化对应的view层页面自动就会变化，这就是ViewModel层实现的。Vue层（就是viewmodel层）会监听到数据改变从而改变视图层，vue也会监听到视图层的事件触发通过viewmodel层调用你写的逻辑代码，通过这些代码你又改变了model层的数据，当数据发生变化的时候，vue又自动把数据的变化映射到视图层来。
vue这种mvvm设计模式进行开发时，只需要关注model层的开发，将数据进行修改，页面就会自动跟着变化，同时页面的变化vue实例也能感知得到，可以方便的帮你操作数据。
<body>
<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>
<script>
var app = new Vue({
el: '#app',
data: {
list: [],
inputValue:''
},
methods: {
handleBtnClick: function() {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
});
</script>
</body>
TodoList MVVM 小例子
viewModel 怎么知道数据改变，又怎么主动改变视图呢？
vue源码的实现，用到了es5的api Object.Properties 与 虚拟dom机制 实现了vm层的架构体系。(后续继续研究）
