<!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> .red1 { color: red; } </style> </head> <body> <div id="app"> <p>v-on的修饰符</p> <button v-on:click="btn1()">点击按钮</button> <!-- 1，.stop修饰符：阻止事件冒泡 相当于调用 event.stopPropagation()--> <button @click.stop="btnClick()">点击按钮</button> <!-- 2， .prevent修饰符：阻止默认事件 阻止自动提交。 相当于 event.preventDefault() --> <form action=""> <input type="submit" value="提交" @click.prevent="submitClick()" /> </form> <!-- 3，监听某个键盘事件 --> <input type="text" @keyup.enter="keyUp()" /> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: "#app", data: { firstName: "le01", lastName: "james", }, computed: {}, methods: { btnClick() {}, submitClick() { console.log("111"); }, keyUp() { console.log("键盘事件，按下"); }, }, }); </script> </html>