WEB基础入门十八：Vue的事件生命周期渲染及动画

一、 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、生命周期流程图

image.png

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: 指定隐藏时的样式

image.png

2. 基本过渡动画的编码
1）在目标元素外包裹

2）定义 class 样式

指定过渡样式: transition

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