Vue表单和动画使用

最新推荐文章于 2023-05-06 08:49:36 发布

weixin_49224192

最新推荐文章于 2023-05-06 08:49:36 发布

阅读量251

点赞数

本文链接：https://blog.csdn.net/weixin_49224192/article/details/109368565

版权

本文详细介绍了Vue.js中不同类型的表单元素（如文本输入、单选框、复选框、下拉选择）的使用，以及如何通过v-model实现数据双向绑定。此外，还讲解了事件绑定，包括禁用属性、事件修饰符（.stop, .prevent, .capture, .once, .self）的使用，以及Vue组件的生命周期和自定义动画。通过示例代码展示了如何在Vue应用中实现表单验证和交互效果。

摘要由CSDN通过智能技术生成

表单类

//单标签
<label for="">姓名</label><input type="text" v-model="user.texe">
//文字如何显示出来
 let v = new Vue({
        el: "#app",
        data: 
            user: {
                texe: "张三",   
            }
        },

//单选框通过v-model在js中定义sex默认值，这个默认是跟value有关联 如果js中user.sex值和value不一样  那就无效 而且二选一他们必须v-model="user.sex" 是一致性 其中user.sex是可以修改
  <label for="">性别</label>
  <input type="radio" v-model="user.sex" value="男"><label for="">男</label>
  <input type="radio" v-model="user.sex" value="女"><label for="">女</label>
  //vue js
   let v = new Vue({
        el: "#app",
        data: {
            tel: "", //先给一个空的让用户输入  确认密码
            user: {
                sex: "男",
            }
        }
    });

//复选框通过type="checkbox" 选择它类型，在这个复选框中他们的v-model="自定义名"自定义名必须一致 而且必须加value。配合js中把它定义的hobby:[]通过数组形式 里面写想给它默认的value对应字符串文字 他就把它对应value那个表单显示出来
 <input type="checkbox" v-model="user.hobby" value="跳舞"><label for="">跳舞</label>
 <input type="checkbox" v-model="user.hobby" value="吃饭"><label for="">吃饭</label>
 <input type="checkbox" v-model="user.hobby" value="写代码"><label for="">写代码</label>
//js代码
  let v = new Vue({
        el: "#app",
        data: {
            user: {
                hobby: ["唱歌", "写代码"],
            }
        }
    });

//多选下拉在select 加multiple属性就好  想多选按住shlft键 如果使用v-model 记得在js 里面data初始化哪里加默认文字如下图
 <select v-model="user.select" multiple>
            <option value="计算机二级">计算机二级</option>
            <option value="英语四级">英语四级</option>
            <option value="英语六级">英语六级</option>
        </select>
        let v = new Vue({
        el: "#app",
        data: {
            user: {
                select: "计算机二级",
            }
        }
    });

//事件绑定
//disabled这是设置禁用属性 通过冒号:disabled="!user.agg"绑定上面属性而且产生关联
  <label for="">我同意</label><input type="checkbox" v-model="user.agg">
        <br>
//<!-- :disabled="!user.agg"  绑定上面input事件 -->
 <input type="submit" :disabled="!user.agg" v-model="user.sub" @click="fan">

完整代码如下 html模块

 <div id="app" :key=>
        <label for="">姓名</label><input type="text" v-model="user.texe">
        <br>
        <label for="">电话</label><input type="tel" v-model="user.texe2">
        <br>
        <label for="">密码</label><input type="text" v-model="user.texe3">
        <br>
        <label for="">性别</label><input type="radio" v-model="user.sex" value="男"><label for="">男</label>
        <input type="radio" v-model="user.sex" value="女"><label for="">女</label>
        <br>
        <label for="">爱好</label><input type="checkbox" v-model="user.hobby" value="唱歌"><label for="">唱歌</label>
        <input type="checkbox" v-model="user.hobby" value="跳舞"><label for="">跳舞</label>
        <input type="checkbox" v-model="user.hobby" value="吃饭"><label for="">吃饭</label>
        <input type="checkbox" v-model="user.hobby" value="写代码"><label for="">写代码</label>
        <br>
        <label for="">密码</label><input type="tel" v-model="user.tel">
        <br>
        <!-- 用来做判断  不能放在user不然会被影响 -->
        <label for="">确认密码</label><input type="tel" v-model="tel">
        <br>
        <label for="">专业</label>
        <select v-model="user.select">
            <option value="计算机二级">计算机二级</option>
            <option value="英语四级">英语四级</option>
            <option value="英语六级">英语六级</option>
        </select>
        <br>
        <label for="">备注</label>
        <textarea name="" v-model="user.remark"></textarea>
        <br>
        <label for="">我同意</label><input type="checkbox" v-model="user.agg">
        <br>
        <!-- :disabled="!user.agg"  绑定上面input事件 -->
        <input type="submit" :disabled="!user.agg" v-model="user.sub" @click="fan">
    </div>

js部分

<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data: {
            tel: "", //先给一个空的让用户输入  确认密码
            user: {
                texe: "张三",
                texe2: "110",
                texe3: "123",
                sex: "男",
                // 原理  这是定义初始值   这个初始值是true时候就是选中状态  通过 v-model选中value的值 把值传到这里给它默认
                hobby: ["唱歌", "写代码"],
                tel: "123",
                select: "计算机二级",
                remark: "请输入备注信息",
                agg: true,
                sub: "提交"
            }

        },
        methods: {
            fan() {
                if (this.user.texe3 == this.tel) {
                    console.log("已发送");
                } else {
                    alert("密码错误")
                }
            }
        }
    });
</script>

点击事件五大部分
阻止如何冒泡在@click的后面添加.stop

  <div id="out" @click.stop="out"></div>
  
  <script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "#box",
        data: {},
        methods: {
            out() {
                console.log("我是out");
            }
        }
    });
</script>

阻止如何默认事件在@click的后面添加.prevent 如下图

  <div id="out" @click.prevent.right="out"></div>
  
  <script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "#box",
        data: {},
        methods: {
            out() {
                console.log("我是out");
            }
        }
    });
</script>

如何捕获事件在@click的后面添加.capture 谁添加谁最先捕获显示在前面

  <div id="out" @click.capture="out"></div>
  
  <script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "#box",
        data: {},
        methods: {
            out() {
                console.log("我是out");
            }
        }
    });
</script>

如何触发一次@click的后面添加.once谁添加谁添加谁只能触发一次

  <div id="out" @click.once="out"></div>
  
  <script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "#box",
        data: {},
        methods: {
            out() {
                console.log("我是out");
            }
        }
    });
</script>

如何设置只有自己点击触发自己@click的后面添加.self 但是有冒泡

  <div id="out" @click.once="out"></div>
  
  <script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "#box",
        data: {},
        methods: {
            out() {
                console.log("我是out");
            }
        }
    });
</script>

动画板块

1.给需要添加动画的元素用标签包裹起来

2.设置css样式 v-enter v-enter-active v-enter-to v-leave v-leave-active v-leave-to

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

 <div id="app">
     <transition>
     <div class="box" v-show='isShow'></div>
     </transition>

    <button @click = 'fade'>点击淡入淡出</button>
  </div>

如果在这里插入代码片有多个元素添加动画需要给transition添加name属性，同时修改style中的样式，把v-换为name的名字即可

  .aa-leave-active{
            transition: all 5s;
        }
        .aa-leave-to{
            transform: rotate(360deg);
        }
     <transition name="aa">
     		<div class="box" v-show='isShow'></div>
     </transition>

vue生命周期

beforeCreate，创建之前，指的是new Vue() 此时的el 还有data都是undefined

created，创建完成，此时的el是undefined，data已经获取到数据

beforeMount,挂载之前，此时的el是div 但是{{}}不能被解析， data已经获取到数据

mounted:挂载完成,此时的el已经加载完所有数据

beforeUpdate:更新之前，此时指的是页面的更新，更新前后数据是一致的

updated：更新按成，数据已经是最新的

beforeDestory：销毁之前

destroyed：销毁完成,此时的vm实例已经被销毁双向绑定数据不能使用

自定义动画函数

在transition 标签使用 @before-enter 开始动画 @enter 动画过程 @after-enter完成动画在js methods中方法直接调用这些属性写的值 afterEnter(el) {}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 15px;
            height: 15px;
            background: red;
            border-radius: 50%;
        }
        
        .box2 {
            width: 15px;
            height: 15px;
            background: red;
            border-radius: 50%;
        }
        
        .on {
            width: 30px;
            height: 30px;
            background: red;
            border-radius: 50%;
            border: none;
            color: white;
            font-weight: bold;
            font-size: 20px;
            outline: none;
        }
        
        .shop {
            position: absolute;
            left: 500px;
            top: 456px;
            width: 80px;
            height: 30px;
            background: orange;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="on" class="on">+</button>
        <!-- 自定义动画函数 通过    @before-enter开始动画  @enter 动画过程 @after-enter完成动画-->
        <transition @before-enter="beforeEnter" @enter='enter' @after-enter='afterEnter'>
            <div class="box" v-show='isShow'></div>
        </transition>
        <div class="box2" v-show='isShow2' v-html="conten">{{conten}}</div>
        <div class="shop">购物车</div>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            conten: 0,
            isShow: false,
            isShow2: false
        },
        methods: {
            on() {
                this.isShow = !this.isShow;
                this.conten++;
                if (this.conten > 0) {
                    this.isShow2 = true;
                } else {
                    this.isShow2 = false;
                }
            },
            beforeEnter(el) {
                // el是指这个box  
                el.style.transform = "translate(0,0)"
            },
            enter(el, done) {
                // 这是用来触发动画，不写动画无法执行也可以通过scroll还有client系列均可
                el.offsetWidth;
                // 是用来触发下面的函数的   不写下面函数不触发
                done()
                    // 小球终点位置
                el.style.transform = "translate(500px,400px)"
                    // 动画过渡得属性
                el.style.transition = "all 2s"
            },
            afterEnter(el) {
                this.isShow = !this.isShow;
            }
        }
    });
</script>

</html>

weixin_49224192

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue表单和动画使用

表单类//单标签<label for="">姓名</label><input type="text" v-model="user.texe">//文字如何显示出来 let v = new Vue({ el: "#app", data: user: { texe: "张三", } },//单选框通过v-model在js中定义se
复制链接

扫一扫