vue学习笔记-02-前端的发展历史浅谈mmvm设计理念

vue学习笔记-02-前端的发展历史浅谈mmvm设计理念

文章目录

  • 1. MVVM模式的实现者
  • 2.第一个vue程序
  • 3.什么是mvvm?
  • 4.为什么要用mvvm?
  • 5.mvvm的组成部分
  • 7.MVVM 模式的实现者
  • 8.为什么要使用 Vue.js

1. MVVM模式的实现者

  • Model:模型层,在这里表示JavaScript对象

  • View:视图层,在这里表示DOM (HTML操作的元素)

  • ViewModel:连接视图和数据的中间件,Vue.js 就是MVVM中的ViewModel层的实现者
    在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而
    ViewModel就是定义了一个Observer观察者

  • ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新

  • ViewModel能够监听到视图的变化,并能够通知数据发生改变

      至此,我们就明白了,Vue.js就是一个MVVM的实现者,他的核心就是实现了DOM监听与数
    据绑定

为什么要使用Vue.js

2.第一个vue程序

 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>第一个 Vue 应用程序</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script></head><body><div id="vue">{{message}}</div><script type="text/javascript">var vm = new Vue({el: '#vue',data: {message: 'Hello Vue!'}});</script></body></html>

3.什么是mvvm?

  一种软件架构模式MVVM 源自于经典的 MVC(Model-View-Controller)模式。MVVM 的核心是 ViewModel 层,负责转换 Model 中的数据对象来让数据变得更容易管理和使用,其作用如下:

  • 该层向上与视图层进行双向绑定
  • 向下与model层通过接口请求进行数据交互
    Vue.js就是一个mvvm架构的框架

4.为什么要用mvvm?

  MVVM 模式和 MVC 模式一样,主要目的是分离视图(View)和模型(Model),有几大好处:

  • 低耦合: 视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 View 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。

  • 可复用: 你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 View 重用这段视图逻辑。

  • 独立开发: 开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。

  • 可测试: 界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。

5.mvvm的组成部分

在这里插入图片描述

View
  View 是视图层,也就是用户界面。前端主要由 HTML 和 CSS 来构建,为了更方便地展现 ViewModel 或者 Model 层的数据,已经产生了各种各样的前后端模板语言,比如 FreeMarker、Thymeleaf 等等,各大 MVVM 框架如 Vue.js,AngularJS,EJS 等也都有自己用来构建用户界面的内置模板语言。

Model
  Model 是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的 接口规则

ViewModel
  ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层,前端开发者对从后端获取的 Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型。

  需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分,而 Model 层的数据模型是只包含状态的

  • 比如页面的这一块展示什么,那一块展示什么这些都属于视图状态(展示)
  • 页面加载进来时发生什么,点击这一块发生什么,这一块滚动时发生什么这些都属于视图行为(交互)

  视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定,ViewModel 的内容会实时展现在 View 层,这是激动人心的,因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图。

  MVVM 框架已经把最脏最累的一块做好了,我们开发者只需要处理和维护 ViewModel,更新数据视图就会自动得到相应更新,真正实现 事件驱动编程。

  View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的重要一环。

6.Vue

  Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,发布于 2014 年 2 月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库(如:vue-router,vue-resource,vuex)或既有项目整合。

7.MVVM 模式的实现者

  • Model:模型层,在这里表示 JavaScript 对象
  • View:视图层,在这里表示 DOM(HTML 操作的元素)
  • ViewModel:连接视图和数据的中间件,Vue.js 就是 MVVM 中的 ViewModel 层的实现者

  在 MVVM 架构中,是不允许 数据 和 视图 直接通信的,只能通过 ViewModel 来通信,而 ViewModel 就是定义了一个 Observer 观察者

  • ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新
  • ViewModel 能够监听到视图的变化,并能够通知数据发生改变

  至此,我们就明白了,Vue.js 就是一个 MVVM 的实现者,他的核心就是实现了 DOM 监听 与 数据绑定

8.为什么要使用 Vue.js

  • 轻量级,体积小是一个重要指标。Vue.js 压缩后有只有 20多kb (Angular 压缩后 56kb+,React 压缩后 44kb+)
  • 移动优先。更适合移动端,比如移动端的 Touch 事件
  • 易上手,学习曲线平稳,文档齐全
  • 吸取了 Angular(模块化)和 React(虚拟 DOM)的长处,并拥有自己独特的功能,如:计算属性
  • 开源,社区活跃度高

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/482989.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux——select、poll、epoll

文章目录1.多路I/O转接服务器2.select3.select代码4.poll5.epoll5.1 基础API5.3 epoll代码5.4 边沿触发和水平触发5.4.1 水平出发LT5.4.2 边缘触发5.4.3 服务器的边缘触发和水平触发5.4 边缘触发但是能一次读完6.epoll反应堆模型6.1 反应堆模型6.2 epoll反应堆代码7.心跳包8.线…

年终盘点:2021年中国科技的重大突破

来源&#xff1a;科技日报2021年已经步入尾声&#xff0c;过去的一年是科技界屡创新高、收获满仓的一年。这一年&#xff0c;恰逢中国共产党百年华诞&#xff0c;我国科技界更是取得多项重要突破。量子计算获得重大进展&#xff0c;使我国成为唯一在两个物理体系中实现量子计算…

vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值?

vue学习笔记-03-浅谈组件-概念&#xff0c;入门&#xff0c;如何用props给组件传值&#xff1f; 文章目录vue学习笔记-03-浅谈组件-概念&#xff0c;入门&#xff0c;如何用props给组件传值&#xff1f;什么是组件&#xff1f;为什么要使用组件&#xff1f;如何使用组件呢&…

iscsi-分区类型

iSCSI简介(Internet SCSI)&#xff1a; iSCSI 小型计算机系统接口&#xff0c;IBM公司研发&#xff0c;用于在IP网络上运行SCSI协议&#xff1b;解决了 SCSI需要直连存储设备的局限性&#xff1b;可以不停机扩展存储容量&#xff0c;iSCSI 将 SCSI 接口与 Ethernet 技术结合&am…

设计模式1——设计模式的原则

1.从面向对象说起 ~~~~~~变化是代码复用的天敌&#xff0c;面向对象的设计语言的优势就是抵御变化&#xff01;这里的所谓抵御变化&#xff0c;不是说采用面向对象的设计语言&#xff0c;就没有变化&#xff0c;而是将变化的范围降到最小。 ~~~~~~之前我们所认识的面向对象的语…

盘点:2021年度物理学十大突破|《物理世界》

来源&#xff1a;物理世界作者&#xff1a;哈米什约翰斯顿&#xff08;Hamish Johnston&#xff09;译者&#xff1a;王晓涛、乔琦2021年12月14日&#xff0c;《物理世界》&#xff08;Physics World&#xff09;编辑从其网站发表的近600项研究进展中评选出了年度物理学领域十大…

操作系统学习笔记-01-1.1课程概述

此课程来自于b站操作系统_清华大学(向勇、陈渝)&#xff0c;博客作为博主手打&#xff0c;当作参考笔记&#xff0c;回头复习223 1.1课程概述 课程简介 什么是操作系统 为什么学习以及如何学习操作系统 操作系统的实例&#xff0c;历史和结构介绍 基本概念及原理 操作系统…

Python实现二叉树的遍历

二叉树是有限个元素的集合&#xff0c;该集合或者为空、或者有一个称为根节点&#xff08;root&#xff09;的元素及两个互不相交的、分别被称为左子树和右子树的二叉树组成。 二叉树的每个结点至多只有二棵子树(不存在度大于2的结点)&#xff0c;二叉树的子树有左右之分&#…

tdms打开闪退问题

问题&#xff1a;tdms打开闪退 解决方法如下&#xff0c;打开excel&#xff0c;在菜单栏中点【文件】 左下方进入【选项】&#xff0c;然后在excel选项中点击【加载项】 然后在下方的管理&#xff0c;选择【COM加载项】&#xff0c;点击【转到】 将NI的TDMS【Add-in】的打勾&a…

操作系统学习笔记-02-1.2-什么是操作系统

1.2什么是操作系统 没有一个完整&#xff0c;精确&#xff0c;公认的定义从功能和特点上来介绍操作系统 用户角度上&#xff0c;操作系统是一个控制软件管理应用程序为应用程序提供服务杀死应用程序 资源管理管理外设&#xff0c;分配资源 操作系统架构层次 硬件之上应用程序之…

大脑活动与认知: 热力学与信息论的联系

来源&#xff1a;集智俱乐部作者&#xff1a;Guillem Collell、Jordi Fauquet译者:张澳审校&#xff1a;刘培源编辑&#xff1a;邓一雪导语信息和能量之间的关系已经在物理学、化学和生物学中得到了广泛的研究。然而&#xff0c;这种联系并没有在神经科学领域形式化。2015年&am…

我为能准时下班而做的准备,以及由此的收获,同时总结下不足

可能有人会说&#xff0c;做IT的想准时下班很难&#xff0c;尤其是在互联网公司。有些外企或国企倒能准时下班&#xff0c;原因是公司更像养老院。 其实这里存在个误区&#xff1a;能否准时下班其实和工作效率和质量有关&#xff0c;取决于自己&#xff0c;而不在于其它因素。公…

Ubuntu下进行截图的快捷方式

shiftFnPRT SC 截图结果保存在用户下的相册中

离散数学学习笔记-01-随机试验与随机事件

文章目录1.1.1随机试验与随机事件引言随机事件1.1.2.样本空间与事件的集合表示基本概念1.1.3事件之间的关系1.包含2.并&#xff08;和&#xff09;引入概率论的三个要素&#xff1a;1.1.1随机试验与随机事件 引言 确定性&#xff08;必然&#xff09;&#xff1a;一定发生&am…

18-ESP8266 SDK开发基础入门篇--TCP 服务器 RTOS版,串口透传,TCP客户端控制LED

https://www.cnblogs.com/yangfengwu/p/11112015.html 先规定一下协议 aa 55 02 01 F1 4C 控制LED点亮 F1 4C为CRC高位和低位aa 55 02 00 30 8C 控制LED熄灭 30 8C为CRC高位和低位 aa 55 03 占空比(四字节 高位在前,低位在后) CRC校验高位,CRC校验低位 预留一个问题 我用客…

Ubuntu下的git使用指南

1.创建账号&#xff0c;绑定邮箱 在Git或者Gitee中创建一个Git账号或者Gitee账号&#xff0c;绑定邮箱&#xff0c;Ubuntu下的git命令对Git或者Gitee都有效。 2.安装git Ubuntu下下载git命令&#xff1a; sudo apt-get install git在下载完之后&#xff0c;可以通过git --v…

人类、动物和人工智能意识的新理论

来源&#xff1a;ScienceAI编译&#xff1a;萝卜皮德国波鸿鲁尔大学&#xff08;RUB&#xff09;的两名研究人员提出了一种新的意识理论。他们一直在探索意识的本质&#xff0c;大脑如何产生意识以及在何处产生意识&#xff0c;以及动物、人工智能是否也有意识等问题。新概念将…

算法日记-01-算法和数据结构概览

算法日记-01-算法和数据结构概览 文章目录算法日记-01-算法和数据结构概览1.数据结构2.算法3.如何解题&#xff1f;4.刷题方法5.小结1.数据结构 一维 基础&#xff1a;数组arry&#xff08;string&#xff09;&#xff0c;链表 linked list高级&#xff1a;栈 stack&#xff0…

ffmpeg——简单播放器代码

1.媒体文件播放总体过程 媒体文件——>解复用——>解码——>调用播放接口——>播放 2.解复用 2.1 什么是解复用&#xff1f; 解复用&#xff1a;将媒体文件分解为视频流和音频流 avformat_open_input() /*打开对应的文件&#xff0c;查找对应的解复用器&…

Github项目汇总

阿里 https://github.com/alibaba腾讯 https://github.com/AlloyTeam百度 https://github.com/baidufehttps://github.com/ecomfe网易 https://github.com/netease豆瓣 https://github.com/douban大众点评 https://github.com/dianping转载于:https://www.cnblogs.com/annwyn/p…