通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式
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：
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<!-- v-model:数据的双向绑定 -->
<!-- 把input里的value值和data里的value值做了绑定 -->
<input type="text" name="" id="" v-model="inputValue">
<!-- v-on:绑定事件 -->
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!-- item指list中的每一项(循环过程的每一项内容) -->
<!-- v-for指令：循环数据 -->
<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> </html>
jquery实现todolist：
<!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 Jquery</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head> <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)); //proxy:改变this的指向
},
handleBtnClick: function() {
var inputEle = $('#input');
var inputValue = inputEle.val(); //获取input框的内容
var ulEle = $('#list');
ulEle.append('<li>' + inputValue + '</li>');
inputEle.val('');
}
})
var page = new Page();
page.init();
</script>
</body> </html>
通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式的更多相关文章
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- Vue.js – 基于 MVVM 实现交互式的 Web 界面
Vue.js 是用于构建交互式的 Web 界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并 ...
- Vue.js 和 MVVM 的小细节
Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...
- Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js与MVVM
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js 和 MVVM
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js前端MVVM框架实战篇
相信大家对vue.js这个前端框架有了一定的了解.想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法. 我们一起来看看“Webpack+Vue”的开发模式相比以往 ...
- Vue.js与React的全面对比
Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...
随机推荐
- 利用JAVA制作简单登录窗口
import java.awt.Container; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; ...
- sprint会议1
昨天:进行第一次站立会议,讨论冲刺阶段,目标,任务认领,制作索引卡. 今天:准备查找安卓APP开发的有关资料,安装有关软件. 遇到的问题:对这方面毫无了解,不知道怎么开始,从哪开始,完全没经验.
- BETA5/7
前言 我们居然又冲刺了·五 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 过去两天完成了哪些任务 前一份代码方案全部垮掉,我,重构啦 接下来的计划 加速加速,一定要完成速度模块 ...
- Codeforces Round #284 (Div. 1) C. Array and Operations 二分图最大匹配
题目链接: http://codeforces.com/problemset/problem/498/C C. Array and Operations time limit per test1 se ...
- Backlog和冲刺结果以及产品Demo市场调研
Backlog和第一阶段冲刺结果以及产品Demo 博客停更了一段时间,但是我们团队没有闲着,现在一次性汇报团队工作进度,Backlog和第一阶段冲刺结果以及产品Demo. 在一段时间的分工合作以及调整 ...
- 9th 本周工作量及进度统计
本周psp C(类别) C(内容) S(开始时间) ST(结束时间) I(中断时间) T(实际时间) 文档 11月10日 Beta发布的评论 20:30 21:18 0:05 43 活动 11月12日 ...
- [转帖]PCI-E的部分知识
PCI-E PCI-E全称是PCI Express,是新一代的总线接口.采用了目前业内流行的点对点串行连接,比起PCI以及更早期的计算机总线的共享并行架构,每个设备都有自己的专用连接,不需要向整个总线 ...
- C# id 字符串之类的拼接
背景 : id数组 [1,2,3,4,45,7] 要拼接字符串‘1’,‘2’,‘3’,看了同事自己写了代码 string+=‘,’ 之类的 头大 解决:string有静态函数 ,string.Jo ...
- BZOJ 3143 游走(贪心+期望+高斯消元)
一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点,获得等于这条边的编号的分 ...
- 加密，解密web.config数据库连接字符串
"connectionStrings" 路径是web.config所在的工程目录. 1.加密EncryptWebConfig.bat @echo offC:\Windows\Mic ...