Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。
Vue和MVVM模式
MVVM模式即Model-View-ViewModel。
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。
ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。
DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
Vue.js特点
简洁：页面由HTML模板+Json数据+Vue实例组成
数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面
轻量：代码量小，不依赖其他库
快速：精确有效批量DOM更新
模板友好：可通过npm，bower等多种方式安装，很容易融入
Vue.js入门小例子
声明式渲染
本例子由HTML模板（View）+Json数据（Model）+Vue实例（ViewModel）组成。
创建Vue的实例，需传入一个选项对象，如：数据、挂载元素、方法、模生命周期钩子等。本例子中，选项对象的el属性为#app，表示Vue实例挂载在<div id="app">...</div>元素上，data属性为exampleData，表示Model为exampleData。View中{{message}}是Vue的一种数据绑定语法，在运行时，{{message}}会被数据对象的message属性替换。
双向绑定
在Vue中使用v-model在表单元素上实现双向绑定。
Vue指令
Vue指令以v-开头，可将指令视作特殊的HTML属性（attribute），用于扩展html标签功能。
v-for
v-show
v-if
v-bind
v-on
Vue组件
组件可以扩展HTML元素，封装可重用的代码。
动态组件
多个组件可以使用同一个挂载点，然后动态的在他们之间切换。
嵌套组件
组件本身也可以包含组件
=========================================================
// 定义组件
var MyComponent = {
template: '<div>这是自定义组件</div>'
}
// 注册全局组件
Vue.component('aaa', MyComponent)
// 创建根实例
new Vue({
el: '#box'
})
//使用组件
<div id="box">
<aaa></aaa>
</div>
自定义元素的作用只是作为一个挂载点
=============================================================
// 定义组件
var MyComponent = {
template: '<div>A custom component!</div>'
}
// 创建根实例
new Vue({
el: '#example'
components:{ //注册局部组件
"aaa":MyComponent
}
})
//使用组件
<div id="example">
<aaa></aaa>
</div>