大学生笔记

Alex_YueLi
于 2024-03-13 14:46:55 发布
阅读量353
点赞数 5
文章标签：笔记 javascript 开发语言
本文链接：https://blog.csdn.net/Alex_YueLi/article/details/136680128
版权
<!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>
        .box1{
            width: 300px;
            height: 300px;
            border: 5px solid red;
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 5px solid orange;
        }
        .box3{
            width: 100px;
            height: 100px;
            display: inline-block;
            border: 5px solid pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 事件修饰符
        .prevent阻止浏览器默认行为
        .stop阻止冒泡事件
        .once只能触发一次
        .capture捕获模式 ，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发
        打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，
        先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）
        .self阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式)
        给元素设置self后，点击当前设置的自身元素会触发
        点击设置self的子类，会跳过设置了self的元素-->
        <!-- event.stopPropagation();阻止冒泡事件 -->
        <a href="" @click.prevent="func1()">链接</a>
        <div @click.self="func2()" class="box1">
            我是div
            <p @click.self="func3()" class="box2">
                我是p
                <span @click="func4()" class="box3">我是span</span>
            </p>
        </div>
        <!-- v-model修饰符
        v-model.lazy失去焦点后提交数据(data)
        v-model.number可以将字符串转换为有效数字  "1"==1
        v.model.trim清除前后空格 -->
        <form action="" method="" @click.prevent="func()">
            姓名：<input type="text" v-model.trim="dataList.userName">
            <br>
            <!-- .number可以将字符串转换为有效数字  "1"==1 -->
            <!-- 注：通常使用v-model绑定表单v-model="",
            v-model:value="" 需要设置默认值-->
            年龄1：<input type="number" v-model.number="dataList.age">
            年龄2：<input type="number" v-model="dataList.ages">

            <br>
            性别：
            <label for="nan">男</label>
            <input type="radio" id="nan" name="1" v-model="dataList.sex" value="1">
            <label for="nv">女</label>
            <input type="radio" id="nv" name="1" v-model="dataList.sex" value="2">
            <br>
            <!-- .lazy失去焦点后提交数据(data) -->
            手机号1：<input type="tel" v-model.lazy="dataList.iphone">
            {{dataList.iphone}}
            手机号2：<input type="tel" v-model="dataList.iphones">
            {{dataList.iphones}}
            <br>
            爱好：
            <label for="sing">唱</label>
            <input type="checkbox" id="sing" v-model="dataList.hobby" value="1">
            <label for="dance">跳</label>
            <input type="checkbox" id="dance" v-model="dataList.hobby" value="2">
            <label for="rap">rap</label>
            <input type="checkbox" id="rap" v-model="dataList.hobby" value="3">
            <label for="basketball">篮球</label>
            <input type="checkbox" id="basketball" v-model="dataList.hobby" value="4">
            <br>
            <input type="submit" value="提交">
            <!-- <button>确定</button> -->
        </form>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    var vm = new Vue({
        data() {
            
        }

    })
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                dataList:{
                    userName:"",
                    age:0,
                    ages:0,
                    // sex中1：男，2女
                    sex:"",
                    iphone:"",
                    iphones:"",
                    // hobby：1：2,3,4
                    hobby:[]
                }
            }
        },
        methods: {
            func(){
                console.log(this.dataList.age+this.dataList.ages);
                console.log(typeof this.dataList.age);
                console.log(typeof this.dataList.ages);
                console.log(this.dataList);
            },
            func1(){
                console.log(111111111111111);
            },
            func2(){
                console.log("div元素");
            },
            func3(){
                // console.log(event);
                // event.stopPropagation();
                console.log("p元素");
            },
            func4(){
                console.log("span元素");
            }
        },
    })
</script>
</html>