Vue中的表单以及修饰符，生命周期，动画

标题一.表单

姓名 name eg:“张三”
性别 sex eg:“0” 说明：男-0 女-1
电话 tel eg:“15747474747”
密码 pass eg:“123”
爱好 hobby eg:[“codding”,“playing”] 说明：唱歌-sing 跳舞-dancing 打游戏-playing 写代码-codding
专业 job eg:“web” 说明：java工程师-java web工程师-web php工程师-php
证书 cert eg:[“erji”,“siji”] eg:计算机二级-erji 英语四级-siji 英语6级-liuji
备注 des eg:“他是一个党员”
是否同意 isAgree eg:true 同意-true 不同意-false

信息表

姓名:

性别: 男女

电话:

密码:

确认密码:

爱好: 唱歌 跳舞 打游戏 写代码

专业 java工程师 web工程师 php工程师

计算机二级 英语四级 英语6级 {{user.cert}}

我同意

单选框:

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

性别: 男 女

多选框：

1.如果初始值为数组:会把value的值赋值给数组 2.如果初始值是对象，则会把数据类型转为布尔值，那么最终的结果就会以true/false展示

唱歌 跳舞 敲代码 {{hobby}}

唱歌2 跳舞2 敲代码2 {{hobby2}}

下拉框:

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

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

文本域

用户名:

性别: 男 女

唱歌 跳舞 敲代码 {{hobby}}

唱歌2 跳舞2 敲代码2 {{hobby2}}

小学 中学 大学

    <div>
        <textarea  cols="30" rows="10" v-model='text'></textarea>
    </div>
</div>

PS:VUE单页应用

SPA：signal page application（单页应用）

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

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

二.修饰符
event
event事件：如果方法调用没有带括号，则是隐式传参，那么直接在方法中调用event
如果方法调用带参数，那么参数中第一位就是event对象，那么此时实参需要用$event来传参 $event 不允许换名 直接在方法中调用event

{{num}}

事件修饰符

stop :阻止事件冒泡
标准浏览器：ev.stopPropagation()
ie浏览器:ev.cancelBubble = true

prevent:阻止默认行为
元素.事件 : return false
元素.addEventListener() : 标准浏览器 : ev.preventDefault()
元素.attachEvent() : ie浏览器 : ev.returnValue = false

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

once:只执行一次

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

鼠标修饰符

left:左键触发

right:右键触发

middle:中间滚轮

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

键盘修饰符

up,down,left,right,enter

表单修饰符

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

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

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

三.vue生命周期

钩子函数：8个

beforeCreate : el data name 都是undefined

created：el ：undefined data：可以拿到数据

beforeMount：el：有节点了，data：有数据 此时el中的数据没有渲染

mounted:页面渲染完成

beforeUpdate:更新数据

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

beforeDestory：销毁之前

destory:销毁完成

四.动画

一,基础使用

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

第二步：设置6个样式

     .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换成自己定义的类名即可

    .aa-enter{
        opacity: 0;
    }
    .aa-enter-to{
        opacity: 1;
    }
    .aa-enter-active{
        transition: all 2s;
    }
    .aa-leave{
        opacity: 1;
    }
    .aa-leave-to{
        opacity: 0;
    }
    .aa-leave-active{
        transition: all 2s;
    }

    <transition name='aa'>
        <div class="box" v-show='isShow'></div>
    </transition>
    <button @click='change'>点击切换</button>
</div>

五、动画库的使用

引入animate.css这个库

地址;https://animate.style/

案例

小球动画