Vue.js 概述与 MVVM 模式

一、Vue.js

1. Vue.js 是什么

Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库,拥有非常容易上手的 API;
Vue.js是一个构建数据驱动的 Web 界面的库。

2. Vue.js 的特性

1. 轻量级的框架
2. 双向数据绑定
3. 指令
4. 插件化(组件化)

3. MVVM 框架

  • MVVM(Model-View-ViewModel)是对 MVC(Model-View-Control)和 MVP(Model-View-Presenter)的进一步改进。

『View』:视图层(UI 用户界面)
『ViewModel』:业务逻辑层(一切 js 可视为业务逻辑)
『Model』:数据层(存储数据及对数据的处理如增删改查)

  • MVVM 将数据双向绑定(data-binding)作为核心思想,View 和 Model 之间没有联系,它们通过 ViewModel 这个桥梁进行交互。

  • Model 和 ViewModel 之间的交互是双向的,因此 View 的变化会自动同步到 Model,而 Model 的变化也会立即反映到 View 上显示。

  • 当用户操作 View,ViewModel 感知到变化,然后通知 Model 发生相应改变;反之当 Model 发生改变,ViewModel 也能感知到变化,使 View 作出相应更新。


  • Angular 和 Ember 都采用这种模式。

4. Vue 的开发模式

  • 通过 script 标签直接引入 vue.js
  • 通过 Vue 的脚手架工具 vue-cli 来进行一键项目搭建

5. Vue.js 的优点

  • 简单轻巧,功能强大,拥有非常容易上手的 API;
  • 可组件化 和 响应式设计;
  • 实现数据与结构分离,高性能,易于浏览器的加载速度;
  • MVVM 模式,数据双向绑定,减少了 DOM 操作,将更多精力放在数据和业务逻辑上。

二、问答

1. 简述 MVVM

  • MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。
  • 在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。
  • ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

2. 简述 Vue.js 的优点

  • 低耦合。视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 "View" 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。
  • 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 View 重用这段视图逻辑。
  • 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
  • 方便测试。界面素来是比较难于测试的,开发中大部分 Bug 来至于逻辑处理,由于 ViewModel 分离了许多逻辑,可以对 ViewModel 构造单元测试。
  • 易用 灵活 高效。

 

 

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

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

相关文章

ipad录屏软件_如何在 Mac 上优雅的截图和录屏

在使用电脑的时候,很多时候我们都需要截屏或者录屏分享。所以你可能已经听过 snip,或者经常使用 QQ、微信 等软件来实现截屏。但是今天我们一起来看一下,怎么使用系统提供的功能,来优雅的实现截图和录屏。最开始的这几篇都比较基础…

安卓平板微信和手机微信同时登陆_Mac电脑如何同时登陆多个微信或QQ

现如今,微信和QQ已经不单单是简单的社交软件了,也成了工作必备软件,工作中用它传个文件,发个通知,不知道有多方便。但是很多人希望将工作圈和生活圈分开,有人想出拿两部手机的方法,倒是可以&…

苹果x人脸识别突然失灵_教你解决mac电脑键盘失灵的问题

无论是使用WIN系统还是苹果电脑都有可能遇到键盘失灵,无法使用的问题,那么苹果电脑键盘失灵该怎么解决呢?这里macw小编为大家带来了苹果电脑键盘失灵解决教程,赶紧收藏起来吧!无线键盘失灵解决教程1、确保蓝牙已启用并…

产品文档如何说清楚产品业务?关注这几点就够了

如果产品文档没把产品业务说清楚会有什么影响? 常见的:产品不符合业务(实际使用场景),验收不通过,需要加班修改,调整。产品经理被骂。 严重的:甲方爸爸受不了了,换供应…

高德百度地图如何获取附近小区酒店银行等?

概述 实现以下功能:根据当前定位,查找附近小区 实现步骤 高德,百度地图实现方式相同,步骤都是如下: 1.获取当前位置的经纬度 2.查询poitype编码。 (小区,写字楼,银行&#xff0…

angular 字符串转换成数字_Python基础语法大全:字符串的处理与使用

本文来自牛鹭学院学员:邓瑞杰字母处理string.capitalize()返回元字符串,且将字符串第一个字母转为大写,其它字母小写string.title()返回元字符串,且将字符串第一个字母转为大写,其它字母小写string.swapcase()用于对字…

1亿像素的真相

世界那么大,谢谢你来看我!!关注我你就是个网络、电脑、手机小达人 乔布斯曾说,“手机拍照上主打高像素,是手机厂商利用广大消费者对照片成像原理知识漏洞的表现。” 小米发布了一款有1亿像素的概念型手机&#xff0c…

python实现链表的删除_Python中 为我们提供了一些独特的解决方案的方法特性

实际上,在日常的工作中,我们很多需求,无论是常见的、还是不常见的,Python 都为我们提供了一些独特的解决方案,既不需要自己造轮子,也不需要引入新的依赖(引入新的依赖势必会增加项目的复杂度)。但是 Python…

打通C/4HANA和S/4HANA的一个原型开发:智能服务创新案例

2019独角兽企业重金招聘Python工程师标准>>> 今年6月SAP发布C/4HANA之后,有顾问朋友们在公众号后台留言,询问C/4HANA如何同SAP的数字化核心S/4HANA系统结合起来,从而打通企业的前后端业务,帮助企业实现数字化转型。 有…

爬虫的重要思想

1.理论上讲只要网页上面能够看到的数据都是可以爬取的,因为所有看到的网页上的数据都是服务器发送到我们电脑上面的,只是有的数据加密过,很难解密。 2.在网页上无法看到或者无法获取的数据,爬虫同样不可能拿到,比如一…

python web环境傻瓜搭建_python——web 环境搭建

1.安装引用第三方库 selenium pip install selenium 2.下载浏览器驱动(驱动版本和浏览器版本要对应参考链接 http://npm.taobao.org/mirrors/chromedriver/) 查看浏览器驱动对应关系,本次已最新驱动版本作为教材讲解 版本2.42 发布时间2018.9…

项目管理十大知识领域,为何不含

问:项目管理十大知识领域,为何不含以下几项:立项管理,合同管理,文档管理,变更管理? 答: 立项完了才有项目; 合同管理包含在采购管理; 变更管理在整体管理&am…

在职场遇到一个总是说话带刺的同事怎么相处?

网友: 带刺的人如果总是扑空,或者总是戳进一团棉花,你说他,她还能坚持多久。职场重心是工作,是做事,不要为这些无聊的人事太费心,刺猬带着刺到处转,最后结果不会好的。 网友&#xf…

postgresql 怎么读_大数据采集和抽取怎么做?这篇文章终于说明白了!

本文来源于公众号【胖滚猪学编程】,转载请注明出处! 关于数据中台的概念和架构,我们在大白话 六问数据中台和数据中台全景架构及模块解析!一文入门中台架构师!两篇文章中都说明白了。从这一篇文章开始分享中台落地实战…

ZooKeeper应用——解决分布式系统单点故障

1.单点故障问题什么是分布式系统中的单点故障:通常分布式系统采用主从模式,就是一个主控机连接多个处理节点。主节点负责分发任务,从节点负责处理任务,当我们的主节点发生故障时,那么整个系统就都瘫痪了,那…

生活之难:生活到底难在哪里

生活之难:生活到底难在哪里 一、总结 一句话总结:难在天性,难在竞争,难在积累,难在追求,难在自己 难在天性 人的天性就是好吃懒做好玩不动脑的,但是生存的压力(食物,房子…

python中元祖 字典 列表的区别_Python中元祖,列表,字典的区别

原博文 2016-08-16 15:25 − Python中有3种內建的数据结构:列表、元祖和字典: 1.列表 list是处理一组有序项目的数据结构,即你可以在一个列表中存储一个序列的项目。 列表中的项目应该包括在方括号中,这样Python就知道你是指明一个…

Intellij IDEA展示类中的方法树形结构

在intellij Idea中叫Structure(结构体),如下图; 也可以直接AltF7快捷键,这样默认会把Structure显示在屏幕下方,如下图操作就可以移动到右侧。 效果如下:

时间计算题100道_2019四校及分校自招开放日情况汇总(含时间安排、考试内容难度、到场人数等)...

点击上方“上海初升高”,选择“星标公众号”回复“加群”就能加入上万家长信赖的升学群受到疫情的影响,今年各市重点的自招开放日报名迟迟没有提上日程。但不管怎样,自招应该是不会取消的,以下是去年四校及分校自招开放日情况汇总…

linux I/O 栈 预习(上)

二、预习 在我们进去device mapper的dm dedup学习之前,我们先要预习一下,什么是device mapper,和为什么device mapper能够做块重删。 1、device mapper照旧,我们先看一下维基百科对它的介绍。The device mapper is a framework pr…