讲解MVVM模式之前，我们先了解一下MVP设计模式。
- Model 数据层
- Presenter 呈现层，大家可以将其理解为业务逻辑相关的控制层
- View 视图层 一般指的页面上DOM的显示
上篇文章中，我们实现了一个Vue.js的TodoList，如果使用jQuery我们应该如何实现呢？
jQuery实现方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TodoList</title>
<script src="./jquery.js"></script>
</head>
<body>
<div id="app">
<input type="text" id="input">
<button id="btn">提交</button>
<ul id="list">
</ul>
</div>
<script>
let Page = {
init: function(){
this.bindEvents();
},
bindEvents: function(){
let $btn = $('#btn'),
$input = $('#input'),
$list = $('#list');
$btn.on('click',function(){
if($input.val()){
let $li = $(document.createElement('li'));
$li.text($input.val());
$list.append($li);
$input.val('');
}
});
$($list,'li').on('click',function(){
$(this).remove();
})
},
}
Page.init();
</script>
</body>
</html>
可以看到同样的实现效果，Vue.js实现的代码比jQuery实现的代码少了很多，在Vue.js中
我们将数据看成M层，将模板标签看成V层，我们写的代码大多数是对数据进行操作，而数据进行变化页面的V层自动进行变，这样的实现是VM帮我们实现的，VM不是我们自己实现的，Vue就是VM层，它会帮我们监听数据的改变，Vue也能帮我们监听事件的触发。
当我们使用Vue这种MVVM这种框架进行开发的时候，我们只需要去关注M层的开发就可以了，我们将数据进行修改，页面会自动跟着变，同时页面上的变化，你的Vue实例也能感知到，可以方便的帮你去操作数据，所以当我们使用MVVM框的时候，重心是在M层的开发上。
因此你可以这样理解，以前我们使用jQuery进行开发的时候，我们是面向DOM进行开发。
现在使用MVVM进行开发的时候，我们是面向数据进行编程，在大量的实战中，如果我们使用MVP进行开发，我们的代码中会有很多关于DOM的操作，而使用MVVM进行开发的时候，DOM的操作被极大的简化了，也就是在大型项目开发中使用Vue这种框架进行开发，你的代码量会得到显著的减少，一般来说至少减少30%的代码量。
