这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战
vue入门-第四章
下文主要记录vue的一些基础常用特性。
1.指令
与jQuery手动操作dom的方式不同，vue采用指令进行双向数据绑定的方式，数据更新则dom更新
常用指令入如下：
1.v-bind
给dom元素属性赋值，可以是自定义属性或者原生属性 (v-bind:属性="" 可直接缩写成 属性="")),例如：
<div data="{{data}}"></div>
2.v-on
用于自定义原生事件；例如给button添加一个click事件（v-on:事件名="表达式" 可缩写为 @事件名=“表达式”）
3.v-model
双向数据绑定。使用频率最高的指令了。例如input
<input v-model="inputVal"/>
4.v-for
循环指令。常用于页面数组数据的循环展示。
语法 v-for="item in list" （list 可以是对象或者数组）
5.v-if/v-else
判断指令。与代码中的if/else类似，后跟可转换为布尔类型的表达式。用于显示或者隐藏dom。（else会自动匹配上一个if，多个判断时可采用v-else-if）
6.v-show
作用效果与v-if/else 类似。都是控制dom的展示与否。区别是v-if/else 表达式为false是不加载该部分dom，而v-show则是做css的display:block/none。
2.生命周期
每一个vue的实例对象在被创建、初始化、编译、挂载、渲染-更新、卸载时的一系列过程叫做生命周期。具体如下：
1.（创建前）
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 创建前，在实例化之后，数据观测和事件配置之前 |
| created | 创建后，此时实例已创建完成但未挂载；数据观测和事件配置已完成，$el不可见 |
| beforeMount | 在挂载开始前调用 |
| mounted | 挂载完成。dom渲染成功 |
| beforeUpdate | 数据更新前调用 |
| updated | 数据更新，dom重新渲染 |
| activated | keep-live组件激活时调用 |
| deactivated | keep-live组件停用时调用 |
| beforeDestroy | 实例销毁前调用。此时实例仍然可用 |
| destoryed | 实例销毁后调用。vue所有指令、事件全部解绑、销毁 |
3.监听器
通常我们会使用watch来监听data中的数据变化，然后触发事件进行处理。
watch:{
//监听数组
dataList:function(newV,oldV){
console.log('newV:',newV,','oldV:',oldV)
}
//监听对象
objInfo:{
immediate:true,//是否立即触发回调
deep:true,//是否监听对象内部某一属性值的变化
handler(newV,oldV){
console.log('newV:',newV,','oldV:',oldV)
}
}
//如只监听对象中单一属性（键路径）
'objInfo.status':{
handler(newV,oldV){
console.log('newV:',newV,','oldV:',oldV)
}
}
}
