day02
一、表单操作
单选框
-
单选框的使用,在绑定属性时,绑定的属性一定要与value的值保持一致,同时提交还是提交到的value值
复选框(多选框)
-
在绑定属性时,初始值为对象时,会将对象转换为布尔值进行展示,同时在对复选框进行点击操作时,会造成一改全改的情况;初始值为数组时,则会在复选框进行点击的时候,将对应的value值一次传入,也就是说,复选框会将自己的value的值赋值给数组
下拉列表
-
下拉框 把初始值需要绑定到select上,还是根据value的值对select进行赋值
二、修饰符
-
事件修饰符
-
stop:阻止事件冒泡
-
prevent:阻止事件默认行为
-
capture:阻止事件捕获
-
once:指定事件只执行一次
-
self:只会触发自己范围内的事件,不包括子元素
-
-
鼠标修饰符
-
left:鼠标左键
-
middle:鼠标滚轮
-
right:鼠标右键
-
-
键盘修饰符
-
enter:回车键
-
up:向上键
-
down:向下键
-
left:向左键
-
right:向右键
-
-
表单修饰符
-
lazy修饰符:加在v-model上,让其不会进行实时的更新数据,让其会在离焦以后在进行实时的数据更新
-
number修饰符:加在v-model上,只匹配第一个字符,如果是数组,则返回数字类型,如果返回的是非数字类型返回字符串
-
trim修饰符:去除用户输入的首位空格字符
-
三、生命周期
钩子函数：8个
-
beforeCreate : el data name 都是undefined
-
created：el ：undefined data：可以拿到数据
-
beforeMount：el：有节点了，data：有数据 此时el中的数据没有渲染
-
mounted:页面渲染完成
-
beforeUpdate:更新数据
-
updated：更新完成 注意：更新前后数据是一致的
-
beforeDestory：销毁之前
-
destory:销毁完成
四、动画
动画的设置有两个步骤:
第一步:给需要添加动画的元素使用transition标签包裹起来
第二步:设置六个样式
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 2s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 2s;
transform: rotate(360deg);
}
注意:如果需要添加多个动画，只能修改样式中的v 把v换成自己定义的类名即可