vue-day02第二天

表单操作
 
<body>
    <div id="app">
        <h2>添加学员</h2>
        <span>姓名</span> <input type="text" v-model='user.name'>
        <br>
        <!-- 对于单选框来说，选中的时候，会把自己的value值赋值给变量 -->
        <span>性别</span> <input type="radio" v-model='user.sex' value="男">男<input type="radio" v-model='user.sex' value="女">女
        <br>
        <span>电话</span> <input type="text" v-model='user.tel'>
        <br>
        <span>密码</span> <input type="text" v-model='user.pwd'>
        <br>
        <span>确认密码</span> <input type="text" v-model='user.pass'>
        <br>
        <span>专业</span>
        <!-- 对于下拉菜单来说，option中间的内容是给用户看的，我们是通过value获取我们需要的值给变量 -->
        <select v-model='user.job'>          
            <option value="web工程师">web工程师</option>
            <option value="java工程师">java工程师</option>
            <option value="c++">c++</option>
        </select>
        <br>
        <span>爱好</span>
       <!-- 对于多选框来说,如果初始值是数组，则会把数据之间放到数组中，如果非数组类型，则会以布尔值展示结果 -->
       <input type="checkbox" value="唱歌" v-model='user.hobby'>唱歌
       <input type="checkbox" value="跳舞" v-model='user.hobby'>跳舞
       <input type="checkbox" value="打游戏" v-model='user.hobby'>打游戏
       <input type="checkbox" value="写代码" v-model='user.hobby'>写代码
       <br>
       <span>证书</span>
       <select v-model='user.zs' multiple>          
        <option value="计算机二级">计算机二级</option>
        <option value="英语四级">英语四级</option>
        <option value="英语六级">英语六级</option>
    </select>
    <br>
    <span>备注:</span>
    <textarea  cols="30" rows="10" v-model='user.text'></textarea>
    <br>
    <input type="checkbox" v-model='user.check'>我同意
    <br>
    <input type="submit" value="提交" @click = 'submit' :disabled='!user.check'>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            user:{
                name:'zs',
                sex:'女',
                tel:'1111',
                pwd:'123',
                pass:'',
                job:'web工程师',
                hobby:['唱歌','跳舞'],
                zs:'',
                text:'哈哈',
                check:true
            }
        },
        methods: {
            submit(){
                if(this.user.pwd!=this.user.pass){
                    alert('两次输入的密码不一致')
                    return
                }
                console.log('发请求')
            }
        },
    })
</script>
 
 
key的使用   作用添加数据
1.:key的取值必须是number类型或者是string类型，不能是对象 
2.v-for循环中的唯一值，只要使用循环就必须添加
 
事件修饰符
  <!-- 阻止事件冒泡 -->
    <!-- <div id="app" @click="box">
        <div @click.stop="fath" class="d1">
            <div @click.stop="see" class="d2"></div>
        </div>
    </div> -->

    <!-- 阻止事件默认行为 -->
    <!-- <div id="app">
        <a href="https//www.baidu.com" @click.prevent="ttt">点我不跳转</a>
    </div> -->

    <!-- self是点击自己触发 -->
    <!-- <div id="app" @click="box">
        <div @click.self="fath" class="d1">
            <div @click="see" class="d2"></div>
        </div>
    </div> -->

    <!-- once是点击一次 -->
    <!-- <div id="app" @click="box">
        <div @click="fath" class="d1">
            <div @click.once="see" class="d2"></div>
        </div>
    </div> -->
 
事件捕获
    <!-- capture捕获的盒子先出来,全都加的话从外到内出来 -->
    <!-- <div id="app" @click="box">
        <div @click.capture="fath" class="d1">
            <div @click ="see" class="d2"></div>
        </div>
    </div> -->
 
 
常用的键盘修饰符  （方法）
    <input type="text" @keydown.up = 'up' placeholder="向上">向上
        <input type="text" @keydown.down = 'down' placeholder="向下">向下
        <input type="text" @keydown.left = 'left' placeholder="向左">向左
        <input type="text" @keydown.right = 'right' placeholder="向右">向右
        <input type="text" @keydown.enter = 'enter' placeholder="回车">回车
 
鼠标修饰符（方法）
 
       <input type="text" @click.left = 'left' placeholder="左键">左键
       <input type="text" @click.middle = 'middle'  placeholder="滚轮">滚轮
       <input type="text" @click.right = 'right'  placeholder="右键">右键
 
生命周期
vue声明周期
代码示例
 
   // 创建之前  什么都是undefined
        beforeCreate() {
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 创建完成， vue实例化初始化完成，但是el还是undefined
        created() {
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 挂载之前  已经找到挂载点，但是数据还未渲染 此时的el是div元素
        beforeMount() {
            console.log('挂载之前')
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        //挂载完成 数据加载完成
        mounted() {
            console.log('挂载完成')
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 更新之前  和更新之后的数据都是最新数据
        beforeUpdate() {
            console.log('更新之前')
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 更新完成
        updated() {
            console.log('更新完成')
            console.log('el:',this.$el);
            console.log('data:',this.$data);
        },
        // 销毁之前
        beforeDestroy() {
            console.log('销毁之前')
        },
        // 销毁完成
        destroyed() {
            console.log('销毁完成')
        },
 
 
表单修饰符
    <!-- .lazy   只有光标离开输入框，才会动态更新数据 -->
         <input type="text" v-model.lazy='str'>{{str}}
        <!-- .number 只要第一个值是数字类型，结果就是数字类型，不管第一个值后面是什么类型. 如果第一个值不是数字，那么就没有效果-->
         <input type="text" v-model.number='num' placeholder="请输入数字">
         <br>
         <!-- .trim   去除收尾空格  需要是用户输入的默认值-->
         <input type="text" v-model.trim='content'>
 
字符串反转代码
 
表单数据增加案例
 
posted @ 2020-10-11 14:20  默默的1  阅读(102)  评论(0)    收藏  举报