2018-09-29

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）在目标元素外包裹

2）定义 class 样式

指定过渡样式: transition

指定隐藏时的样式: opacity/其它