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.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

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

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

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

  3. Vue.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.js 和 MVVM 小细节

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

  6. Vue.js与MVVM

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

  7. Vue.js 和 MVVM

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

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

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

  9. Vue.js与React的全面对比

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

随机推荐

  1. servlet几个常用的方法

    servlet继承了HTTPServlet所以可以重写父类的方法,下面一 一介绍方法Dopost DoGet 比较常用不再介绍. 一.Init(),和Init(ServletConfig config ...

  2. BufferedWriter与BufferedRead --------------------------Test2

    package com.test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; ...

  3. 我对git的认识

    Git 真的是不了解 也没听说过git 所以真的不知道从何谈起 所以就参考度娘啦! Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 Linus To ...

  4. 在新的电脑上部署 Hexo，保留原有博客的方法

    用U盘从旧的电脑拷贝整个blog文件夹. 在新的电脑上装好git并配置好用户名和密钥. 安装 node.js 安装 hexo:npm install hexo-cli -g 用U盘把blog文件夹拷贝 ...

  5. Team饭来了团队作业3需求改进与系统设计

    团队名称:饭来了 人员组成: 队长:侯晓东          学号:2016012087 队员:崔啸寒          学号:2016012006 队员:方柱权          学号:201601 ...

  6. Java面试&编写程序：使子线程循环10次,紧接着主线程循环100次，来回50次

    package com.cwcec.test; public class TraditionalThreadCommunication { /** * @param args */ public st ...

  7. Gulp插件笔记

    初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...

  8. PHP学习心得2

    对于PHP的语法结构,刚开始真的很不习惯,真搞不懂为什么每个变量之前都要加个“$”符号,每个语句写完之后都必须加上“分号”来表示此句已经结束,还有,PHP对字母的大小写是敏感的,写的时候一定要注意大小 ...

  9. E-commerce 中促销系统的设计

    在电商平台中,促销是必不可少的营销手段,尤其在国内 各种玩法层出不穷,最开始的满减/秒杀 到优惠卷 再到 拼团/砍价等等 一个良好的促销系统应该具备易于扩展,易于统计促销效果等特点,在遇到秒杀类促销时 ...

  10. Caffe使用step by step：faster-rcnn目标检测matlab代码

    faster-rcnn是MSRA在物体检测最新的研究成果,该研究成果基于RCNN,fast rcnn以及SPPnet,对之前目标检测方法进行改进,faster-rcnn项目地址.首先,faster r ...