Vue表单输入和动画

Vue表单输入和动画
一.表单元素
1.input
单选 radio
多选 checkbox
下拉 select
文本域
二. 解决插值表达式闪烁问题
[v-cloak]{
display: none;
}
三.修饰符
1.事件修饰符：直接在事件后面添加**.**修饰符即可
stop 阻止冒泡事件
prevent 阻止默认事件
capture 阻止捕获事件 给谁增加谁先触发 之后的还是按照冒泡触发
once 只能点击一次
self 只有自己本身可以触发，但是依然会有冒泡

2.键盘修饰符：keydown**.**up/down/left/right
up 向上键盘
down 向下键盘
left 向左键盘
right 向右键盘

3.鼠标修饰符
@click.left/middle/right
left 鼠标左键
middle 鼠标滚轮键
right 鼠标右键

4.表单修饰符
v-model.lazy/number/trim
lazy 懒加载，光标离开输入后更新数据
number 判断第一个字符是否为数组，是返回number类型，不是返回string类型
trim 过滤首尾空格（输入内容）

四.vue生命周期
钩子函数
1.beforeCreate：创建之前，new Vue（）中的el和data为undefined
created：创建完成，el为undefined，data以获取到数据
beforeMount：挂载之前，el中的{{}}不能被解析
mounted:挂载完成,此时的el已经加载完所有数据
beforeUpdate:更新之前
updated：更新完成
beforeDestory：销毁之前
destroyed：销毁完成

五.动画
1.给需要添加动画的元素用标签包裹起来
2.设置样式
v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to
3.引入animate.css库