Vue (3）-CSDN博客

本文链接：https://blog.csdn.net/daiism/article/details/136969199

v-model修饰符

lazy 失去焦点后提交值
number有效转换"1"== 1 为数字
trim清除前后空格
（使用v-model时尽量使用v-model=“” 不要使用v-model:value=“”,
只有在需要设置初始值才使用v-model:value=“”）

<body>
    <div id="app">
        <form action="" method=""  @click.prevent="func()">
            姓名：<input type="text" v-model.trim="formData.userName">
            <br>
            <textarea v-model.lazy="formData.other" name="" id="" cols="30" rows="10"></textarea>
            {{formData.other}}
            <br>
        </form>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                formData:{
                    userName:"",
                    other:"",
                }
            }
        },
        methods: {
            func(){
                console.log(this.formData);
            },
        },
    })
 </script>

事件修饰符

prevent 阻止浏览器默认事件
stop阻止冒泡事件
once只触发一次
capture捕获模式打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发
self 阻止自身事件促发，但不会阻止冒泡，间接性有捕获效果
在冒泡事件中，点击设置了self的子类，才不会触发自身
点击设置了self本身是可以触发的

 <div id="app">
        <!--  -->
        <a href="" @click.prevent="func1()">链接</a>
        <div @click.self="func2()" class="box1">
            1
            <p @click.self.once="func3()" class="box2">
                2
                <span @click="func4()" class="box3">3</span>
            </p>
        </div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
            }
        },
        methods: {
            func1(){
                console.log(1111111111111111111);
            },
            func2(){
                console.log("div元素");
            },
            func3(){
                console.log("p元素");
            },
            func4(){
                console.log("span元素");
            }
        },
    })
    </script>

v-model是什么

双向数据绑定，既可以从data流向页面，也可以由页面流向data
通常用于表单收集，v-model默认绑定value值
v-model:value=““或v-model=””(简写)

v-model原理

v-model本质是一个语法糖
v-bind绑定数据
oninput数据传递

e和event区别

定义函数()，接收时e,当为形参
e自身某个事件带有的方法，event是window带有的
e = window.event;兼容
event.stopPropagation()阻止冒泡

 <div id="app">
        <div>
            <input type="text" :value="val" @input="func1()">
           <button @click="func2()">按钮</button>
        </div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
            }
        },
        methods: {
            func1(){
                console.log(e);
                this.val = event.target.value;
            },
            func2(){
                console.log(event);
            }
        },
    })
</script>