通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式

时间:2023-02-01 07:47:21

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设计模式的更多相关文章

  1. 【Vue&period;js实战案例】- Vue&period;js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  2. Vue&period;js – 基于 MVVM 实现交互式的 Web 界面

    Vue.js 是用于构建交互式的 Web  界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并 ...

  3. Vue&period;js 和 MVVM 的小细节

    Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...

  4. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  5. Vue&period;js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  6. Vue&period;js与MVVM

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  7. Vue&period;js 和 MVVM

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  8. Vue&period;js前端MVVM框架实战篇

    相信大家对vue.js这个前端框架有了一定的了解.想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法. 我们一起来看看“Webpack+Vue”的开发模式相比以往 ...

  9. Vue&period;js与React的全面对比

    Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两 ...

随机推荐

  1. 如何配置pch文件

    pre-Compile Header(预编译头文件) pre-Compile Header简称PCH,由编译器在建立工程时自动生成; 其中存放有工程中已经编译的部分代码; 在以后建立工程时不再重新编译 ...

  2. 如何利用tomcat搭建一个动态服务器

    这篇文章只记录已解压缩包的方式安装,通常linux服务器上也是这样. 1.下载tomcat.zip压缩包. http://tomcat.apache.org/download-70.cgi 2.把zi ...

  3. 引擎设计跟踪&lpar;九&period;10&rpar; Max插件更新&comma;地形问题备忘

    最近没有大的更新. 最近本来要做max的骨骼/动画导出, 看导出插件代码的时候, 突然想起之前tagent space导出的疑问, 于是确认了一下. http://www.cnblogs.com/cr ...

  4. 【转】Maven实战(五)---两个war包的调用

    原博文出自于: http://blog.csdn.net/liutengteng130/article/details/42879803    感谢! 开篇前提   1.为什么要用两个war包的调用? ...

  5. scrollview中edittext失去焦点问题

    //edittext获取焦点后会瞬间失去,暂时使用这种笨方法解决(获取到焦点后过300ms再获取一次) public void requesFocus() { mEditName.setOnFocus ...

  6. 1&period;1初识python

    1.目前大量的公司都在使用python,功能强大很是牛逼! 2.运维要懂开发,做个全栈的工程师贼牛逼 3.python是一个解释型语言,编译型和解释型的区别是: ①编译型语言由编译器(Compiler ...

  7. DWR实现服务器向客户端推送消息

    原文链接 http://www.blogjava.net/stevenjohn/archive/2012/07/07/382447.html这片文章还是给了我很大帮助,再次表示感谢,下面我将这两天的研 ...

  8. &lbrack;转&rsqb;NLP Tasks

    Natural Language Processing Tasks and Selected References I've been working on several natural langu ...

  9. 【刷题】BZOJ 2820 YY的GCD

    Description 神犇YY虐完数论后给傻×kAc出了一题给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对kAc这种傻×必然 ...

  10. ansible安装文档

    一.系统环境 [root@ansible ~]# cat /etc/redhat-release CentOS release 6.6 (Final) [root@ansible ~]# uname ...