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 构造单元测试。
- 易用 灵活 高效。
Vue.js 概述与 MVVM 模式相关推荐
- Vue.js的IoC容器模式探索
IoC概念阐述 IoC(Inversion of Control),意为控制反转,不是什么技术,而是一种设计思想.==Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内部直接控制==. ...
- 一、Vue.js 概述
本章概要 Vue 2.x 响应式系统的实现原理 Vue 3.0 响应式系统的实现原理 体验 Vue 3.0 响应式系统 Vue 3.0 带来的新变化 1.1 Web 前端技术的发展 略,自行百度. 1 ...
- Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
- Vue.js – 基于 MVVM 实现交互式的 Web 界面
Vue.js 是用于构建交互式的 Web 界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并 ...
- Vue.js 基础学习
Vue.js官网: https://cn.vuejs.org/v2/guide/index.html 一.Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- Vue.js 核心精要实战解析
课程简介 前端框架领域,Angular.React.Vue.js 三足鼎立,而 Vue.js 因其性能.通用.易用.体积.学习成本低等特点深受广大前端们的追捧,并吸引了一大批前端初学者.作为 Vue. ...
- 渐进式框架 Vue.js
渐进式框架 Vue.js 1. Vue.js 概述 2 快速创建.部署.运行和打包一个 Vue.js 项目 2.1. 创建项目 2.2. 安装依赖 2.3. 项目部署和访问 2.4. 打包 Vue 项 ...
- 三十、开始前端Vue.js的学习之路
@Author:Runsen @Date:2019/08/07 @modified Date:2019/08/07 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼 ...
最新文章
- javascript 两个数组组成一个对象
- 从java中的hibernate看Ado.net 与NHibernate的关系
- 设计模式复习-单例模式
- Linux vi编辑器的使用
- OpenGL parallax mapping视差映射的实例
- 动效如何构成连接 篇肆
- 搭建Maven私有仓库
- [1.1]XMI 与UML结合开发企业应用中业务模型
- OpenStack精华问答 | OpenStack是云吗?
- 通讯录 app 使用哪种协议查找服务器上存储的联系人?,uniapp通讯录查找
- openfire mysql 乱码_Openfire:解决乱码问题
- 性能计数器驱动_Vulkan 探密:AMD Vulkan 开源驱动源码解析-零
- 帆软填报报表的使用教程
- 2016年不可错过的21个深度学习视频、教程和课程
- 老王的JAVA基础课:第2课 JDK安装和环境变量配置
- Photoshop 制作水晶按钮
- 面试必备SQL调优方案
- scrapy rule follow的理解和应用
- Jquery datetimepicker插件基本使用
- 高级网络配置(包括链路聚合和网络桥接)
热门文章
- win7装mysql一直未响应6_win7重装mysql最后一步无响应解决方法
- android gsensor 坐标,MTK Android G sensor 原理,配置,调试
- android 克隆对象,克隆会破坏单例对象吗?
- 《软件需求分析(第二版)》第 3 章——需求工程的推荐方法 重点部分总结
- 达内计算机毕业好找工作吗,大学生学什么好找工作 转行IT行业需要多久
- 泰禾光电机器人研发_机器之眼 | 3D相机能让机器人看见什么?
- spark算子_十、Spark之详解Action类算子
- php carbon 连续日期,日期及时间处理包 Carbon 在 Laravel 中的简单使用
- html中.inner样式,JavaScript-DOM动态控制Html标签对象样式和innerHTML、className属性
- python读取文件最后几行_如何用python获取文件的最后一行,文件可能会比较大