Vue MVVM设计模式：
在使用vue进行编程时，不会再涉及到DOM的操作，取而代之的是修改数据层，当把数据进行变更的时候，vue之中它的底层会自动的根据数据的不同帮助我们去重新渲染页面。
编码时不需要关注VM层是如何实现的，它是vue内置的，只需要关注M层（模型层）和V层（视图层）。
使用MVVM设计模式进行编码时，编码的重点一部分在于视图层，一部分在于模型层。
data：指M层。
<div>模板标签：指V层。
vue：自身实现VM层。vue会监听到数据变了会帮你改变视图层，vue也能监听到视图层有一些事件触发然后帮助你通过VM这一层去调用一些你写的逻辑代码，通过这些代码改变了M层的数据，当数据发生变化时，VM层又会自动的把数据的变化映射到视图层的上面来。
VM层的实现：引入虚拟DOM+ES5的一个核心API：Object.defineProperty()，来实现VM层的架构体系。
MVVM设计模式的好处：
开发时只需要关注M层的开发。代码会得到显著的减少。
MVVM里最重的一层是M层。
vue是面向数据进行编程。
JQuerty:MVP设计模式:
M(model):模型层(数据层)(弱)V(view):视图层，页面上的DOM展示P(presenter):控制器(最核心的一层)，视图和模型层的中转站，大量代码做DOM的操作，模型层非常弱。视图发生改变点击提交时控制器会去执行，控制器里负责了所有的业务逻辑，控制器可以去调模型层去发Ajax请求，控制器通过DOM操作再改变视图层。在大型项目中，JQuery编写的百分之七八十以上的代码都在操作DOM。JQuery是面向DOM在做开发。
vue实现todolist：
1 <!DOCTYPE html> 2 <html lang="en"> 3 ?4 <head> 5 ????<meta charset="UTF-8"> 6 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 ????<title>todolist</title> 9 ????<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>10 </head>11 12 <body>13 ????<div id="app">14 ????????<!-- v-model:数据的双向绑定 -->15 ????????<!-- 把input里的value值和data里的value值做了绑定 -->16 ????????<input type="text" name="" id="" v-model="inputValue">17 ????????<!-- v-on:绑定事件 -->18 ????????<button v-on:click="handleBtnClick">提交</button>19 ????????<ul>20 ????????????<!-- item指list中的每一项(循环过程的每一项内容) -->21 ????????????<!-- v-for指令：循环数据 -->22 ????????????<li v-for="item in list">{{item}}</li>23 ????????</ul>24 ????</div>25 26 ????<script>27 ????????var app = new Vue({28 ????????????el: ‘#app‘,29 ????????????data: {30 ????????????????list: [],31 ????????????????inputValue: ‘‘32 ????????????},33 ????????????methods: {34 ????????????????handleBtnClick: function() {35 ????????????????????this.list.push(this.inputValue);36 ????????????????????this.inputValue = ‘‘;37 ????????????????}38 ????????????}39 ????????})40 ????</script>41 </body>42 43 </html>jquery实现todolist：
1 <!DOCTYPE html> 2 <html lang="en"> 3 ?4 <head> 5 ????<meta charset="UTF-8"> 6 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 ????<title>TodoList Jquery</title> 9 ????<script src="https://code.jquery.com/jquery-3.3.1.js"></script>10 </head>11 12 <body>13 ????<div>14 ????????<input type="text" id="input">15 ????????<button id="btn">提交</button>16 ????????<ul id="list"></ul>17 ????</div>18 19 ????<script> 20 ????????function Page() {21 22 ????????}23 ????????$.extend(Page.prototype, {24 ????????????init: function() {25 ????????????????this.bindEvents()26 ????????????},27 ????????????bindEvents: function() {28 ????????????????var btn = $(‘#btn‘);29 ????????????????btn.on(‘click‘, $.proxy(this.handleBtnClick, this)); //proxy:改变this的指向30 ????????????},31 ????????????handleBtnClick: function() {32 ????????????????var inputEle = $(‘#input‘);33 ????????????????var inputValue = inputEle.val(); //获取input框的内容34 ????????????????var ulEle = $(‘#list‘);35 ????????????????ulEle.append(‘<li>‘ + inputValue + ‘</li>‘);36 ????????????????inputEle.val(‘‘);37 ????????????}38 ????????})39 ????????var page = new Page();40 ????????page.init();41 ????</script>42 </body>43 44 </html>通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式
原文地址：https://www.cnblogs.com/knuzy/p/9257623.html