一、 class 与 style 绑定
1、理解
1）在应用界面中, 某个(些)元素的样式是变化的；
2）class/style 绑定就是专门用来实现动态样式效果的技术
2、class 绑定
1）:class='xxx'
2）表达式是字符串: 'classA'
3）表达式是对象: {classA:isA, classB: isB}
4）表达式是数组: ['classA', 'classB']
3、 style 绑定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 属性
二、条件渲染
1、条件渲染指令
1）v-if 与 v-else
2）v-show
2. 比较 v-if 与 v-show
3）如果需要频繁切换 v-show 较好
4）当条件不成立时, v-if 的所有子节点不会解析
三、列表渲染
1、 列表显示指令
数组: v-for / index
对象: v-for / key
2. 列表的更新显示
删除 item
替换 item
3. 列表的高级处理
列表过滤
列表排序
四、事件处理
1. 绑定监听:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(参数)"
4）默认事件形参: event
5）隐含属性对象: $event
2. 事件修饰符
1）.prevent : 阻止事件的默认行为 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
1）.keycode : 操作的是某个 keycode 值的键
2）.keyName : 操作的某个按键名的键(少部分)
五、表单输入绑定
使用 v-model 对表单数据自动收集
1）text/textarea
2）checkbox
3）radio
4）select
六、Vue实例生命周期
1、生命周期流程图
2、vue 生命周期分析
1）初始化显示
*beforeCreate()
*created()
*beforeMount()
*mounted()
2）更新状态: this.xxx = value
*beforeUpdate()
*updated()
3）销毁 vue 实例: vm.$destory()
*beforeDestory()
*destoryed()
3. 常用的生命周期方法
1）created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
2）beforeDestory(): 做收尾工作, 如: 清除定时器
七、过渡、动画
1. vue 动画的理解
1）操作 css 的 trasition 或 animation
2）vue 会给目标元素添加/移除特定的 class
3）过渡的相关类名
xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式
2. 基本过渡动画的编码
1）在目标元素外包裹
2）定义 class 样式
指定过渡样式: transition
指定隐藏时的样式: opacity/其它