Vue基础和MVC，MVP，MVVM简介

Vue.js

一、Vue基础

1 开发流程规范 与 Vue基础

1.0 前端开发流程规范

• 前端开发流程规范

1.1 前端框架发展历史

html

  html [1990]----> html5 [2008.1.12]

css

  css 1.0 1996 
  css 2.0 1998
  css 3.0 2001

EcmaScript 

  1997年诞生
  2015  EcmaScript 2015
  2016  EcmaScript 2016          dart语言  vs  javascript

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

    M  Model      数据层
    V  View       视图层
    VM ViewModel  视图模型（ 业务逻辑  VM 是 由  P 改名得来的）
    P  Presenter  提出者（ Controller 改名得来的 ）
    C  Controller 控制器 ( 业务逻辑 )

    Backbone.js  MVP    2010.10

    Angular.js( 1.0 )   MVC    2010.10

    Angular.ts ( 2.0 )  MVC -> MVVM 2016 目前已经更新到了 Angular8 ( 也属于angular2.0 版本 )

    Vue 1.0   MVVVM  2014/07

    Vue 2.0   MVVM   2016/09

    React 2012 不太认可前端MVC这种架构思想， 你可以将React单纯看做是MVC中V

    github统计量 （ 国际使用量 ）不代表大陆地区       单位是： K

    angular.js   angular.ts       vue             React  

      59.6          49.1                  142              131

    学习难度： Vue < React < Angular( 2.0 )

    前端流行

      移动  web    &&  hybird app( 混合app )

      app
        1. native app ( 安卓  ios  java ME)
        2. webapp ( 应用在浏览器中的app )
        3. Hybird app ( 混合app ) 
           1. webapp 嵌入 第三方原生应用库（ 可以访问原生设备（手机） 的接口权限，比如：照相机 ）

总结表：

[外链图片转存失败(img-jvR4FNUB-1566394616062)(E:\工作文件\2019-三阶段-授课笔记\2\img\前端框架时间图.png)]

• 前端js框架到底在干嘛! 为什么要用？

  • js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为如下几点：

    1. 渲染数据

       [外链图片转存失败(img-Uo0Vr9xN-1566394616064)(E:\工作文件\2019-三阶段-授课笔记\2\img\购物车.png)]

    2. 操作DOM

       [外链图片转存失败(img-IlwN6BCj-1566394616064)(E:\工作文件\2019-三阶段-授课笔记\2\img\2019-01-11-03.gif)]

    3. 操作cookie等存储机制api

       [外链图片转存失败(img-f49vOODP-1566394616064)(E:\工作文件\2019-三阶段-授课笔记\2\img\cookie.png)]

  • 在前端开发中

    • 难题: 如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题？？？
      • 解决:
        • 而js框架对上述的几个问题都有自己趋于完美的解决方案，
        • 开发成本降低。高性能高效率。
        • 唯一的缺点就是需要使用一定的成本来学习。

1.2 初始Vue.js

• 官网地址： 英文官网 中文官网

• Vue.js框架项目介绍

  • 作者： 尤雨溪

    [外链图片转存失败(img-QxCOTYdJ-1566394616065)(E:\工作文件\2019-三阶段-授课笔记\2\img\尤雨溪.jpg)]-

  • Vue.js是尤雨溪的个人项目

  • Vue.js是一个Js渐进式框架

    • 渐进式： 越学越难

  • 学习Vue的必要性

    	Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue不管从性能上，还是从成本上都隐隐超过了react，火的一塌糊涂
    
    	学习vue是现在前端开发者必须的一个技能
    

1.3 MV*模式介绍

MV*模式图示

Model:数据模型，View:用户界面，Controller：业务逻辑
MVC模式最早由Trygve Reenskaug在1978年提出[1]，是施乐帕罗奥多研究中心（Xerox PARC）在20世纪80年代为程序语言Smalltalk发明的一种软件架构。MVC模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式透过对复杂度的简化，使程序结构更加直观。软件系统透过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。专业人员可以依据自身的专长分组：
控制器（Controller）- 负责转发请求，对请求进行处理。
视图（View） - 界面设计人员进行图形界面设计。
模型（Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈
另一种是直接通过controller接受指令。
模型（Model） 用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。“ Model ”有对数据直接访问的权力，例如对数据库的访问。“Model”不依赖“View”和“Controller”，也就是说， Model 不关心它会被如何显示或是如何被操作。但是 Model 中数据的变化一般会通过一种刷新机制被公布。为了实现这种机制，那些用于监视此 Model 的 View 必须事先在此 Model 上注册，从而，View 可以了解在数据 Model 上发生的改变。（比如：观察者模式（软件设计模式））
视图（View）能够实现数据有目的的显示（理论上，这不是必需的）。在 View 中一般没有程序上的逻辑。为了实现 View 上的刷新功能，View 需要访问它监视的数据模型（Model），因此应该事先在被它监视的数据那里注册。
控制器（Controller）起到不同层面间的组织作用，用于控制应用程序的流程。它处理事件并作出响应。“事件”包括用户的行为和数据 Model 上的改变。
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向

1. 各部分之间的通信，都是双向的。
2. View 与 Model 不发生联系，都通过 Presenter 传递。
3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
   MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
   唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。