运行结果： 当我们点击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函数
