new Vue()创建 Vue 实例，其中Vue.components()也可以创建 Vue 实例。Vue生命周期函数：vue 实例在某一时间点会自动执行的函数。 生命周期图示
vue模板语法：
-
{{}}表示的插值表达式 -
v-text表示的文本（标签不会被解析）插值 -
v-html表示的html文件（可解析标签）插值
这插值表达式和其他的模板指令在“=”后内容都表示js表达式，所以都可以跟简单的js表达式，如：
{{name + ' word'}}
- 计算属性、方法与侦听器
其中计算属性（computed）和侦听器（watch）都存在一个缓存机制（即与之相关的属性不发生变化时，会复用先前值），但是相同情况下计算属性的代码较侦听器更为简洁。
{{fullName}}
{{year}}
如图所示：当修改与计算属性
fullName 无关的属性 year 时，计算属性并没有执行，而是进行复用，当修改与之相关的属性时，便会执行一次。这就是计算属性（computed）就缓存机制，侦听器（watch）同理。
注意：计算属性直接通过名字（键值）就可以调用，方法必须是调用才可以。
4.1 计算属性的getter和setter
fullName: {
get: function(){
return this.firstName + " " + this.lastName
},
set: function(value){
var arr = value.split(" ")
this.firstName = arr[0]
this.lastName = arr[1]
}
}
其中：当取计算属性的值（ {{fullName}} ）时，get 方法被执行。当设置计算属性的值时，set 方法被执行。
当在控制台执行 vm.fullName = "Bye bye" 时，这时 set 方法被执行，更改了 firstName 和 lastName 的值，此时计算属性发现get方法中使用到的属性被改变，执行 set 方法，此时页面中显示的是“Bye bye”。
- Vue中的样式绑定
5.1 class的对象语法（使用对象的形式）
动态绑定 class ，其中:class="{activated: isActivated}" ：activated表示类名，该类型是否绑定在该标签中取决于isActivated的值（Boolean值）。
{{message}}
5.2 class的数组语法（使用数组的形式）
其中 :class="[activated]" 数组中绑定的是变量，即 data 中属性的值。
{{message}}
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
- 条件渲染
v-if和v-show都可以控制页面中元素是否显示。区别：v-if直接控制 dom 元素是和否在页面中（dom销毁和重建），v-show是给 dom 元素添加 display 属性（基于css切换）。其中如果 dom 元素频繁的显示和隐藏，使用 v-show 性能更好。
注意，v-show 不支持 元素，也不支持 v-else。
this is a
this is b
this is c
this is show
此时在控制台执行 vm.show = 'b' 会发现页面中只显示 ‘this is b’ 其中 ‘this is show’ 对应的 dom 元素的 display 为 none。如下：
注意：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。所以在切换 dom 时，尽可能添加 key 值，减少复用带来的 bug 。
- 列表渲染（in 或 of 都可以，of 更接近 JavaScript 迭代器的语法）
在 Vue 中使用v-for进行列表渲染。为了提升循环显示的性能，都会给循环添加一个唯一的 key 值。不推荐使用 index ，不一定唯一，会影响性能。所以一般列表的数据格式如下：
{{item.name}} -- {{item.id}} -- {{index}}
当要修改数组内容的时候，不能通过数组下标（索引）的形式改变数组（不是响应性的），可以通过 Vue 提供的几个变异方法（变异方法 (mutation method)）改变数组且动态显示，或者修改数据的引用（替换数组）。 push（向最后一位添加） 、 pop（删除最后一位并返回删除项） 、 shift（删除第一位并返回删除项） 、 unshift（向第一位添加） 、 splice（截取某一位） 、 sort（排序） 、 reverse（反转）
在控制台输入 vm.list.splice(1, 1, {id: "003", name: "bye"}) ，此时页面中显示 hello -- 001 -- 0 bye -- 002 -- 1
当修改数据的引用时，页面也会随之变化。在就控制台执行 vm.list = [{id: "001", name: "hello"}, {id: "002",name: "bye"}] ，此时页面显示与上述方法一致， hello -- 001 -- 0 bye -- 002 -- 1
相同方法，对象也可以与数组一样的方法进行循环渲染。在对象循环中，可以传入三个参数 v-for="(item, key, index) of list"，item 为对象的键值， key 为对象的键名， index 为其下标值。对象的列表循环渲染中可以使用 vm.list.name = "bye" ，直接修改页面渲染的数据，但是如果要向其添加数据，只能使用修改引用的方法。
- Vue的set方法
data: {
list: [{
id: "001",
name: "hello"
}, {
id: "002",
name: "word"
}],
list1: {
name: "name",
age: 18
}
}
对于对象数据（list1）响应式修改除引用实现页面响应性的方法，还有一种是使用 Vue.set(object, propertyName, value) ，即 Vue.set(vm.list, "address", "beijing") 或者 vm.$set(vm.list, "address", "beijing") （全局 Vue.set 的别名）。
对于数组数据（list）响应式修改除使用vue提供的变异方法和修改引用外，也可以使用 Vue 的 set 方法，即 Vue.set(vm.list, 2, {id: '003', name: 'name'}) 或者 vm.$set(vm.list, 2, {id: '003', name: 'name'}) （全局 Vue.set 的别名）