vue.js是一套构建用户界面的渐进式框架，与其他框架不同的是，vue采用的是自底向上增量开发的设计
this
在使用vue开发的过程中，this的指向让我吃了不少亏。所有的生命周期钩子自动绑定this上下文到实例中，因此可以通过this访问数据，对属性和方法进行运算操作。
不能使用箭头函数来定义一个生命周期方法，因为箭头函数绑定了上下文，因此this的指向和你期待的vue实例不一样。
遇到过的坑，使用setTimeout的时候，function里面使用this指向的是window，而不是vue实例。解决的话，可以直接使用vue实例，也可以在一开始用一变量指向this
var _self = this;
实例生命周期
- created这个钩子在实例创建之后被调用
- mounted el被新创建的vm.$el替换，并被挂载到实例上去之后调用该钩子。该钩子在服务器端渲染期间不被调用
- updated
-destroyed
vue生命周期示意图
模板语法
相关概念：在底层的实现上，vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态发生改变的时候，vue能够以最小的代价将改变渲染进DOM操作中
列表渲染
注意：由于js的限制，vue不能检测以下变动的数组
- 当你直接使用索引设置一项内容的时候
vm.items[indexOfItem] = newValue
- 当你修改数组的长度的时候
vm.items.length = newLength
解决第一点：
两种方法：
1.Vue.set
//Vue.set
Vue.set(example.items,indexOfItem,newvalue)
2.数组的splice方法
example.items.splice(indexOfItems,1,newValue)
解决第二个：
使用数组的splice方法
example.items.splice(newLength)
事件处理器
有时候我们需要在内联语句中访问原生DOM事件。可以使用特殊变量$event把它传进方法
<button v-on:click="warn('message',$event)">
Submit
</button>
methods:{
warn:function(message,event){
//现在我们可以访问原生事件对象
if(event)event.preventDefault()
alert(message)
}
}
深入响应式原理
- vue不允许在已经创建的实例上动态的添加新的根级响应式属性，然而它可以使用Vue.set(object,key,value)方法将响应属性添加到嵌套的对象上：
Vue.set(vm.someobject,'b',2)
也可以使用vm.$set实例方法 ，这也是Vue.set方法的别名：
this.$set(this.someobject,'b',2)
Vue.nextTick(callback)
原因：vue异步执行DOM更新
为了在数据变化之后等待Vue完成更新dom,可以在数据变化之后立即使用Vue。nextTick(callback).这样回调函数在dom更新完成之后就会调用。
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: '123'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
vm.$el.textContent === 'new message' // true
})
