Vue 是一套用于构建用户界面的渐进式JavaScript框架，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。初学Vue的时候，第一个实现是todolist。
<body>
<div id=‘app‘>
<input type=‘text‘ v-model="inputValue"/> <!--双向绑定-->
<button v-on:click="handleBtn">Submit</button> <!--注册事件-->
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: ‘#app‘, //接管范围
data: {
list: [],
inputValue: ‘‘
},
methods: {
handleBtn:function() {
this.list.push(this.inputValue)
this.inputValue=‘‘ //清除文本框内容
}
}
})
</script>
同样的功能如果用jQuery实现，则是以下方式：
<body>
<div>
<input type=‘text‘ id=‘input‘ />
<button id=‘Btn‘>Submit</button>
<ul id=‘list‘></ul>
</div>
<script>
function Page() {
}
$.extend(Page.prototype, { //$.extend将第二个参数对象合并到第一个
init: function(){
this.bindEvents();
},
bindEvents: function(){
var btn=$(‘#Btn‘);
btn.on(‘click‘, $.proxy(this.handleBtn, this));
}, //$.proxy接受已有的函数并返回带上下文的新的函数,解决this转移问题
handleBtn: function(){
var ulElem=$(‘#list‘);
var inputElem=$(‘#input‘);
var inputValue=inputElem.val();
ulElem.append(‘<li>‘+inputValue+‘</li>‘);
//jq文档操作append() 方法在被选元素的结尾（仍在内部）插入内容
inputElem.val(‘‘);
}
})
var page=new Page();
page.init();
</script>
</body>
可以看出vue框架取代了大量DOM操作，只需明确使用数据的逻辑，这就是MVVM模式。
MVP模式分为model（数据层），presenter（控制层），view（视图层）。上述JQ例子中，用于存储数据的M层比较弱，没有通过ajax；V层是DOM部分；P层当视图改变时，控制器会发挥作用（很大一部分代码都在做DOM操作）。
MVVM模式的VM层是vue内置的，ViewModel负责连接 View 和 Model，保证视图和数据的一致性（改变视图层以及感知视图的变化），这种轻量级的架构让前端开发更加高效、便捷。这个模式我们主要关注操作数据的M层，极大简化了DOM操作。
另外，如果将列表项组件化，则可以应用vue的component。下面提供一种全局组件方法：
<todo-item v-bind:content="item" v-for="item in list"></todo-item>
Vue.component("TodoItem",{
props: [‘content‘] //item借助content传递
template:"<li>{{content}}</li>"
}) //全局(名字+模板)
Vue及JQuery实现todolist以及MVP,MVVM模式的理解
原文：https://www.cnblogs.com/lora404/p/12324214.html