今天的码农女孩学习了关于v-on修饰符和v-model修饰符的知识

    <div id="app">
        <div @click="divClick">
            点这个显示divClick
            <!-- 点击这个按钮不仅会显示btnClick,还会显示divClick,所以要阻止事件冒泡，传统的方法是event.stopPropagation() -->
            <!-- 1.vue中使用.stop修饰符阻止单击事件冒泡 -->
            <button @click.stop="btnClick">按钮</button>
        </div>
        <!--2.prevent修饰符提交事件不再重载页面,传统阻止默认行为方法是event.preventDefault()-->
        <form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>
        <!--3.监听某个键盘的键帽 -->
        <input type="text" @keyup.enter="keyUp">
        <!--4.once修饰符不常用,用在只触发一次回调 -->
        <button @click.once="btn2Click">按钮2</button>
    </div>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:'hello kitty'
            },
            methods:{
                btnClick(){
                    console.log("btnClick");
                },
                divClick(){
                    console.log("divClick");
                },
                submitClick(){
                    console.log("submitClick")
                },
                keyUp(){
                    console.log("keyUp")
                },
                btn2Click(){
                    console.log("btn2Click")
                }
            }
        })
    </script>

1.vue中使用.stop修饰符阻止单击事件冒泡

2.prevent修饰符提交事件不再重载页面

3.监听某个键盘的键帽

4.once修饰符不常用,用在只触发一次回调

   <div id="app">
        <!-- 1.lazy修饰符可以让在数据在失去焦点或者回车时才会更新 -->
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>
        <!-- 2.number修饰符将输入值变成数值类型 -->
        <input type="number" v-model.number="age">
        <h2>{{age}}-{{typeof age}}</h2>
        <!-- 3.trim修饰符将用户输入值的前后空格省略 -->
        <input type="text" v-model.trim="name">
        <h2>你输入的名字:{{name}}</h2>
    </div>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:'hello',
                age:0,
                name:''
            }
        })
    </script>

1.lazy修饰符可以让在数据在失去焦点或者回车时才会更新

2.number修饰符将输入值变成数值类型

3.trim修饰符将用户输入值的前后空格省略