<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="" name="" id="input">
<button type="" id="btn">提交</button>
<ul id="ul"></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 inputValue = inputElem.val();
var ulElem = $('#ul');
ulElem.append('<li>' + inputValue + '</li>');
inputElem.val('');
}
});
var page = new Page();
page.init();
</script>
</body>
</html>
这一段JQuery代码使用的是MVP设计模式，现在M层很弱，没有数据请求和接受，上面的dom代表的是V层（视图层），script里的内容是P控制器层，当我视图发生改变，点击提交按钮，调用控制器，控制器又通过dom操作来改变视图，控制器里也可以发送数据请求和M层相互交流
在这个MVP设计模式中P层其到了关键性的作用，不仅要接受视图的信息还要改变视图和Model，Model层就比较边缘了，就如上面的JQuery代码，我们有很大一部分操作都是在操作dom，给了P层很大的负担
MVVM模式也有View层和Model层，但是其没有了P层，改成了VM层，但是这一层我们不需要去编写，Vue会帮助我们完成，我们编程的重点就在View和Model层
当我们View层发生变化时，Model层就会自动发生变化，Model层发生变化，View也会发生变化
可以这样理解，当我们使用类似JQueryMVP模式是面向dom进行的编程，当我们使用类似Vue这种MVVM编程模式是面对数据进行编程，从代码量上来说，Vue也减少了极其多了dom操作，我们只需要关注数据的变化就可以了