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