笔记2

一、表单

1、单选框

绑定的属性一定要于value的值保持一致，提交的是value值

性别: <input type="radio" name="sex" value="0" v-model='sex'>男
<input type="radio" name="sex" value="1" v-model='sex'>女

 

2、多选框

a、初始值为数组：会把value值赋给数组

<input type="checkbox" checked value="sing" v-model='hobby'>唱歌
<input type="checkbox" value="dance" v-model='hobby'>跳舞
<input type="checkbox" value="coding" v-model='hobby'>敲代码

 

b、初始值为对象：则会把数据类型转换为布尔值，结果以true/false显示

<input type="checkbox" checked value="sing" v-model='hobby2'>唱歌2
<input type="checkbox" value="dance" v-model='hobby2'>跳舞2
<input type="checkbox" value="coding" v-model='hobby2'>敲代码2

 

3、下拉框

把初始值绑定到select上，根据option的value值对select赋值

<select v-model='edu'>
<option value="小学">小学</option>
<option value="中学">中学</option>
<option value="大学">大学</option>
</select>

4、文本框

写啥就是啥

 

PS:VUE单页应用

SPA：signal page application（单页应用）

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

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

 

二、修饰符

1.事件修饰符

stop :阻止事件冒泡

prevent:阻止默认行为

capture:事件捕获 给谁添加谁先出来

once:只执行一次

self:只有自己才可以触发自己

2.鼠标修饰符

left:左键触发

right:右键触发

middle:中间滚轮

注意：对于修饰符自多只能写两个

3.键盘修饰符

up,down,left,right,enter

4.表单修饰符

lazy:失去焦点后获取最新数据

number:只判断第一个值是否是number类型 是number返回number 不是返回string

trim:去除用户输入内容的首位空格

三、生命周期

钩子函数：8个

1.创建之前： 　　beforeCreate : el data name 都是undefined

2.创建完成：　　created：el ：undefined data：可以拿到数据

3.挂载之前：　　beforeMount：el：有节点了，data：有数据 此时el中的数据没有渲染

4.挂载完成：　　mounted:页面渲染完成

5.更新之前　　　beforeUpdate:更新数据

6.更新完成　　   updated：更新完成 注意：更新前后数据是一致的

7.销毁之前　　   beforeDestory：销毁之前

8.销毁完成　　   destory:销毁完成

 

四.动画

1、基础使用

第一步：给需要添加动画的元素用<transition>包裹起来

第二步：设置6个样式

1.v-enter{}

2.v-enter-to{}

3.v-enter-active{}

4.v-leave-to{}

5.v-leave-to{}

6.v-leave-active{}

注意:如果需要添加多个动画，只能修改样式中的v 把v换成自己定义的类名即可

2、动画库的使用

引入animate.css这个库

地址;https://animate.style/