vue的生命周期
指定挂载的容器
例：el:'#app'
指定模板（如果有模板，vue会渲染整个模板；如果没有模板，vue会将el里面的所有内容当成模板使用）
例：template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>'
数据初始化之前
例：beforeCreate(){
console.log('beforeCreate:',this.name,this.age);
},
数据初始化完成
例：created(){
console.log('created:',this.name,this.age);
},
页面挂载之前，此时页面是模板
例：beforeMount(){
// 通过$el返回Vue实例使用的根 DOM 元素
console.log(this.$el);console.log('beforeMount');
},
页面挂载完成，此时页面已经渲染完成
例：mounted(){
console.log(this.$el);console.log('mounted');
},
数据更新之前
例：beforeUpdate(){
// 在这个阶段，数据已经发生了变化，但是页面还没有重新渲染
console.log('beforeUpdate',this.name,this.age);
},
数据更新完成
例：updated(){
// 在这个阶段，页面会重新渲染
console.log('updated',this.name,this.age);
},
销毁之前
例：beforeDestroy(){
// 我们通常会在这个生命周期函数中做一些收尾的工作
// 比如：停掉开启的定时器，初始化一些数据等等。
console.log('beforeDestroy');
},
销毁完成
例：destroyed(){
console.log('destroyed');console.log(this);
},
over(){
// $destroy()方法，用于销毁当前Vue实例
// 注意：销毁当前Vue实例，不是删除这个对象，而且这个对象再也不具备响应式页面的能力了。
this.$destroy()
}
写在方法里面----->methods
计算属性&侦听器&过滤器
绑定样式（:class是绑定类选择器，:style是绑定内联样式。）
:class
可以绑定一个对象，对象的属性名是类选择器的名称，属性值返回true，表示添加该选择器。
可以绑定字符串一个数组，数组中的每一个元素就是一个选择器
可以直接绑定一个表达式
可以通过数组绑定多个表达式
:style通常也是绑定一个对象，对象的属性名是原生CSS的属性名，但是要采用小驼峰命名规范。
计算属性
计算属性的优势是：有缓存，当页面数据发生变化时，所有的方法都要重新执行，当计算属性用到的数据发生变化时，计算属性才会重新执行。
例：<div>
<input type="text" :value="fullName">
</div>
<script>
//定义计算属性
computed: {
fullName() {
return this.firstName + '.' + this.lastName
}
}
</script>
