Vue（1）概述

前端开发模式的发展

• 静态页面

  • 开发人员只需要关心页面的样式和内容：HTML

• 异步刷新，操作DOM

  • JavaScript的诞生使开发人员可以操作DOM元素和样式，页面有一定的动态效果，还是以静态为主
  • ajax的盛行，使开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。例如：JQuery框架

• MVVM，关注模型和视图

  • 例如下面的这些前端框架

    框架	架构	最初发布时间
    Knockout	MVVM	2010.7
    Backbone	MVP	2010.10
    Angular	MVC->MVVM	2010.10
    Ember	MVVM	2011.12
    Meteor	MVC	2012.1
    Vue	MVVM	2014.7

  • MVVM模式

    • M：即Model，模型，包括数据和一些基本操作
    • V：即View，视图，页面渲染结果
    • VM：即View-Model，模型与视图间的双向操作（之前需要开发人员使用dom操作视图或者是视图使用DOM操作获取数据，现在无需开发人员干涉，自动实现双向操作）

  • 如果没有使用MVVM的这些框架的话

    1. 开发人员从后端获取需要的数据模型，

    2. 然后要通过DOM操作Model渲染到View中。

    3. 而后当用户操作视图，我们还需要通过DOM获取View中的数据，

    4. 然后同步到Model中。

  • 使用MVVM后：DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的

    1. 只要Model发生了改变，View上自然就会表现出来。
    2. 当用户修改了View，Model中的数据也会跟着改变。

    

认识Vue

Vue (读音 /vjuː/，类似于 view) ：是一套用于构建用户界面的渐进式框架

• 渐进式：可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且用了这些组件也不要求你的系统全部都使用该框架。
• MVVM通过视图与模型的双向绑定，简化前端操作。
• Vue是一款前端渐进式框架，可以提高前端开发效率。

官网：https://cn.vuejs.org/