MVVM概念和Vue语法简介

MVVM

对于一个全栈开发工程师来说，懂前端才会开发出更好的后端程序（不懂前端的后端工程师会设计出非常难用的API），懂后端才会开发出更好的前端程序。（摘自廖雪峰的官方网站）

什么是MVVM

MVVM最早在微软的一篇博文《Model/View/ViewModel pattern for building WPF apps》被提出。

它是一个视图UI系统设计规约或者说范式，是一种用户视图开发的抽象设计模式。MVVC是MVC的一个演变，它将视图和模型隔离，使得视图设计师可以更专注于视图的设计，业务模块的开发者更专注于后端接口的设计，业务逻辑的实现。

MVVM由三部分组成，M(Model)，V(View)，VM(ViewModel)，Model为承载业务数据的实体，View则为展示给用户的视图，ViewModel作为连接两者的桥梁，将Mode和View绑定在一起。

通过Model和View的分离，我们可以将关注点集中在视图的设计，或者模型的状态变化当中，而这两者的联系由抽象层ViewModel完成。

MVVM.png

• M-Model : 实体模型(js对象)

• V-View : 布局文件(HTML)

• VM-ViewModel : binder所在之处，对外暴露出公共属性，View和Model的绑定器

一个简单的MVVM的示例

View

Hello, Bart!
You are 12.

Model

var person = {
    name: 'Bart',
    age: 12
};

操作

person.name = 'Homer';
person.age = 51;

在这个示例中，person的name和age发生改变时，页面中的内容也会发生相应的改变；通过改变Model的内容，视图的展示也随之发生变化，ViewModel在其中隐式地进行连接。

Vue

Vue 实例

一切都从new一个Vue实例开始。

var vm = new Vue({
  // 选项
})

Vue对象是整个Vue工程的根对象，它的作用就是ViewModel，它包含了整个工程的所有内容，包括所有的数据、视图和行为。也就是说整个工程就是一个Vue对象。

Vue 对象的主要成分

生命周期钩子

Vue对象生命周期中的一些钩子方法，包括beforeCreate、created、beforeMount、mounted、beforeUpdated、updated、beforeDestroy、destroyed等，这些属性均为函数类型。

Vue生命周期.png

el属性

Vue对象挂载点，页面当中的某个DOM元素，可以是指向该元素的CSS选择器或者是一个HTMLElement实例。

components属性

可以在视图中直接引用的组件，具有Vue对象相似的对象结构和功能，通过在Vue对象中添加该属性，可以作为全局组件被调用。

data属性

所有的Model的递归集合，该属性必须是纯粹的对象，也就是只包含属性不包含行为。（注意：在组件当中该属性为返回Model的函数）

template属性

String类型的页面模板，将会替换掉挂载点DOM元素，作为挂载点处页面的视图。

data属性和template属性分别对应MVVM中的Model和View，通过作为ViewModel的Vue对象联系在一起。

组件介绍

将整个页面划分为各种组件，实现关注点分离，页面解耦。

组件注册

prop属性

model属性

router介绍

用于页面路由，由于是单页面应用（SPA），页面路由是通过组件的切换完成的。