Vue学习09_v-on的修饰符

v-on的修饰符

1. stop：stop修饰符的使用是为了解决事件冒泡问题：
   示例代码：在div块级标签内定义一个按钮，并且为div和按钮都添加了点击的事件监听：

        <!-- 事件冒泡，当按钮被点击时，div也会被点击 -->
        <div @click="divClick">
            div内容
            <button @click="btnClick">按钮</button>
        </div>
        <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },
            methods: {
                btnClick() {
                    console.log("btnClick");
                },
                divClick() {
                    console.log("divClick");
                }
            }
        });
    </script>

运行结果：

当我们点击div中的button时，由于button是div的一部分，因此div也被点击，这就是事件冒泡，有时候我们并不希望点击button时，div也被点击，因此引入了stop修饰符：
示例代码：

        <div @click="divClick">
            div内容
            <button @click.stop="btnClick">按钮</button>
        </div>

运行结果：

为v-on事件监听添加修饰符stop，当点击button时，div的事件监听不再被调用：
2. prevent：修饰符prevent阻止默认事件：
在表单中，当我们在输入框中输入文本后，点击提交按钮submit时，浏览器的默认事件是将表单内的内容提交到action所指定的路径，有时候我们并不希望当我们点击时，按照浏览器的某人时间去做某件事情，因此可以引入prrevent修饰符：
示例代码：

        <form action="baidu">
            <input type="submit" value="提交" @click="submitClick">
        </form>
        <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },
            methods: {
                submitClick() {
                    console.log('submitClick');
                }
            }
        });
    </script>

**运行结果：**当没有添加添加prevent修饰符时，按照默认定义的事件执行，前往action中寻找提交的位置：提示错误信息

示例代码：

        <form action="baidu">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>

**运行结果：**当为click添加修饰符prevent时，阻止了默认事件的发生，调用自定义的事件submitClick：不再报错

3. once：once为一次调用，有时候我们希望我们第一次展示的内容就是最终的展示内容，不会因为data数据的改变，界面同时发生改变，因此可以引用修饰符once：
示例代码：

        <!-- 一次回调 -->
        <button @click.once="onceClick">按钮</button>

**运行结果：**当第一次点击时，执行onceClick函数，在控制台打印出onceClick，多次点击时，控制台并没有多次打印，因此只有第一次的点击时有效的，once为一次回调：

4. 监听键盘键帽：有时候我们也需要对键盘的点击事件进行监听，比如当我们敲回车时，执行某些操作等，因此v-on可以对键盘键帽进行监听：
示例代码：

        <!-- 监听回车键 -->
        <input type="text" @keyup.enter="keyup">

运行结果：当再输入框内输入完一串字符串后，点击回车键，v-on对键盘回车键进行了事件监听，执行了keyup函数