一、为什么要用？
之前基本上用的是jQuery，jQuery基于DOM操作，MVVM的开发模式也使前端从原先的DOM操作中解放出来，我们不再需要在维护视图和数据的统一上花大量的时间，只需要关注于data的变化，代码变得更加容易维护。
组件：复用性高，容易维护，方便测试，高内聚，低耦。
二、什么是MVVM?

双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

三、原理
数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

用JavaScript实现 github.com/DMQ/mvvm
演示：bing.2345.com/mvvm/mvvm.html （host: 172.16.0.156 bing.2345.com）

四、入门
简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

官网
cn.vuejs.org/v2/guide/installation...

直接引用

1

安装

不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。

使用淘宝镜像

npm install -g cnpm –registry=registry.npm.taobao.org

全局安装 vue-cli

$ npm install –global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖，走你
$ cd my-project
$ npm run dev

调试
github.com/vuejs/vue-devtools
五、示例
文档（作者是中国人） + 官网上的示例 + 自己练习（推荐jsfiddle）
主要了解：响应式机制 + 组件

Hello World：jsfiddle.net/han8gui/nnc957z4/10/
Form：jsfiddle.net/han8gui/g072h4x6/
ToDoList： jsfiddle.net/han8gui/r42pngbu/6/

六、组件
定义
软件组件，定义为自包含的、可编程的、可重用的、与语言无关的软件单元。

示例：
jsfiddle.net/han8gui/0c6xszjv/
注意：

一个组件的 data 选项必须是一个函数
定义组件名的方式有两种：
a. 使用 kebab-case
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。
b. 使用 PascalCase
当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
生命周期

数据传递
子组件中传递数据：Props
示例: jsfiddle.net/han8gui/hqmgnbhy/

子组件向父级组件触发一个事件
内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件，并传递一个参数

七、规模化
路由 vue-router
github.com/han8gui/vue-demo
状态管理 vuex
记录所有 store 中发生的 state 改变，后面有机会分享下
服务端渲染 ssr
主要用于SEO
八、其他
风格指南：cn.vuejs.org/v2/style-guide/
编码：开发过程中，可以看到bug报错
Examples: vuejsexamples.com/
————————————————

本作品采用《CC 协议》，转载必须注明作者和本文链接