vue 发展历程时间轴动画_VUE的事件生命周期渲染及动画

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/其它