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、微信 等软件来实现截屏。但是今天我们一起来看一下,怎么使用系统提供的功能,来优雅的实现截图和录屏。最开始的这几篇都比较基础…

数据库的辅助工具:My-SqlViewer

阅读目录开始My-SqlViewer 使用说明程序安装及启动说明程序主界面DataBase浏览器搜索数据库存储过程的复制比较数据库今天发一个我自己写的且经常使用的数据库的辅助工具:My-SqlViewer由于我比较喜欢使用存储过程,但发现不管是SQL Server Management Stu…

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

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

VSCode 开发Vue必备插件

工欲善其事,必先利其器 以下就是开发Vue必备插件: Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能, AltShiftF (格式化全文),CtrlK CtrlF(格式化选中代码,两个Ctrl需要同时…

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

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

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

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

前端错误日志收集方案

前言 公司的项目上线出现问题后难以定位错误,研究过现存的错误监控方案,受限于特殊条件只能定制自己的错误收集方案。 基于以上背景我撸出来一个错误日志收集方案 - Ohbug。 欢迎各位大佬 star ~ 监控错误 说起错误的捕获,首先想到的是 try c…

spring入门到放弃——spring事务管理

Spring事务提供了两种管理的的方式:编程式事务和声明式事务 简单回顾下事务: 事务:逻辑上的一组操作,组成操作的各个单元,要么全部成功,要么全部失败。 事务特性: 原子性:一个事务包…

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

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

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

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

Java实现MD5编码32位

加入依赖包 <dependency><groupId>org.apache.directory.studio</groupId><artifactId>org.apache.commons.codec</artifactId><version>1.8</version></dependency> 实现代码 DigestUtils.md5Hex(字符串)

计算机二级考试python_全国计算机等级考试考试大纲(2018年版)

级别 大纲名称 一级 一级计算机基础及WPS Office应用考试大纲&#xff08;2018年版&#xff09;点击下载 一级计算机基础及MS Office应用考试大纲&#xff08;2018年版&#xff09;点击下载 一级计算机基础及Photoshop应用考试大纲&#xff08;2018年版&#xff09;点击下载 一…

人工智能的就业方向

关于AI在的就业方向主要有&#xff0c;科研机构(机器人研究所等)&#xff0c;软硬件开发人员&#xff0c;高校讲师等&#xff0c;在国内的话就业前景是比较好的&#xff0c;国内产业升级&#xff0c;IT行业的转型工业和机器人和智能机器人以及可穿戴设备的研发将来都是强烈的热…

1亿像素的真相

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

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

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

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

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

爬虫的重要思想

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

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

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

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

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

B站视频下载(VideoHelper)

继续上次的知乎爬虫&#xff0c; 这次开始了哔哩哔哩的爬虫实践&#xff1b; 首先介绍下如何下载吧&#xff1a; VideoHelper 里面有三种方式下载b站视频。 同样的流程&#xff0c; 还是先抓包&#xff0c;分析参数&#xff0c;寻找参数&#xff08;包括之前的请求包和页面源码…