day02

表单的操作

1.单选框

单选框的使用，绑定的属性一定要与value的值保持一致，提交还是会提交value中的值，在表单中value与v-model一样的意思，是同步的。

2复选框

1.如果初始值为数组，会把value中的值赋值给数组，

2.如果初始值为对象，会把数值类型转换为布尔值，那么最终的结果就会以true/false展示

3.下拉框

把初始值需要绑定到select上，还是根据value的值对selset进行赋值,

vue单页应用

多页面：1个url->1个html文件，多个url->多个html文件

单页面:1个url->多个组件，他们之间的切换是通过路由

修饰符

事件修饰符

@click.stop 阻止事件冒泡行为
@click.prevent 阻止事件默认行为
@click.captrue 遵从捕获机制
@click.once 只执行一次
@click.self 只有点击他的时候才会触发

鼠标修饰符

@click.left 鼠标左键事件
@click.right 鼠标右键事件
@click.moddle 鼠标中键事件

键盘事件

@keydown.up 鼠标点击上箭头时的事件
@keydown.left 鼠标点击左箭头时的事件
@keydown.right 鼠标点击右箭头时的事件
@keydown.down 鼠标点击下箭头时的事件
@keydown.enter 鼠标点击回车时的事件

表单修饰符

v-model.lazy  只有当输入完成时才会触发(失去焦点)
v-model.number 检测输入的第一个字符
v-model.trim 去除输入的首尾空格

vue生命周期

8个钩子函数

beforeCreate  创建之前
created  创建完成
beforeMount 挂载之前
mounted  挂载完成
beforeUpdata 更新之前
updataed 更新完成
beforeDestory 数据销毁之前
destory 数据销毁之后

动画

1.当给一个元素添加动画时,需要降这个元素用transition包起来
在css中利用v-evter  v-enter-to v-enter-active v-leave  v-leave-to v-leave-active 进行样式的描写
2.也可以利用transition中的钩子语法进行动画的设置
在transition中添加
@before-enter  在执行之前处理函数 
@enter  在执行中处理的函数
@after-enter    在执行结束时处理的函数

数据问题

如果数据没有在data中提前声明，那么后续的修改添加不会引起页面的重新渲染

解决方法

1.this.$set(对象，'属性','属性值');

2.Vue.set(对象，'属性','属性值');