一 基础认知

vue.js的核心是一个允许采用简洁的模板语法来声明地将数据渲染进dom系统

var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})

绑定元素特性

var app2 = new Vue({
el: ‘#app-2’,
data: {
message: '页面加载于 ’ + new Date().toLocaleString()
}
})

v-bind特性被称为指令，在渲染的dom上应用特殊的响应式行为，该指令的意思:将这个元素节点的title特性和vue实例message属性保持一致。

条件与循环

例子说明不仅把数据绑定到DOM文本或特性，还可以绑定到DOM结构。

v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

组件化应用构建
组件系统是以一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

二 vue例子

创建一个vue实例
var vm=new Vue({
//选项
})
vue设计收到mvvm模型的启发，一个Vue应用由一个new Vue创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。
根实例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
数据与方法
当一个vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中。
// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3
只有当实例被创建时data中存在的属性才是响应式的，添加一个新的属性不会触发任何视图的更新，如果打算添加新的属性为未来使用做打算，可以设置一些初始值。
data:{
a : ’ ',
b: 0,
c:false,
d: [ ],
e: null
}
存在唯一的例外，Object.freeze(),阻止现有的属性，也意味着响应系统无法追踪变化。
var obj = {
foo: ‘bar’
}

Object.freeze(obj)

new Vue({
el: ‘#app’,
data: obj
})

vm. $data === data // => true vm.$el === document.getElementById(‘example’) // => true

// $watch 是一个实例方法 vm.$watch(‘a’, function (newValue, oldValue) {
// 这个回调将在 vm.a 改变后调用
})

实例生命周期钩子

类型：Function

beforeCreate
详细:在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前的调用

created
详细:在实例创建完成后被立即调用，在这一步，实例已经完成以下的配置:数据观测(data observer)，属性和方法的运算，watch/event事件回调，$el属性目前不可见。

beforeMount
详细：在挂载开始之前被调用:相关的render函数首次被调用 该钩子在服务器端渲染期间不被调用。

mounted
详细: el被新创建的vm. $el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
该钩子在服务器端渲染期间不被调用。

beforeUpdate
详细:数据更新时调，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

updated
详细
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：

updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
该钩子在服务器端渲染期间不被调用。

activated
详细:
keep-alive 组件激活时调用。

该钩子在服务器端渲染期间不被调用.

beforeDestroy
详细:实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

destroy
详细:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

该钩子在服务器端渲染期间不被调用。
errorCaptured

类型:(err: Error, vm: Component, info: string) => ?boolean
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。

错误传播规则

默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。

如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。

如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler。

一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。