<body> <div id="app"> <!-- 事件调用的方法没有参数 小括号可以省略 --> <button @click="btnClick()">导航1</button> <button @click="btnClick">导航2</button> <!-- 在事件定义时。写方法时省略小括号 但是方法本身需要一个参数 这时候 Vue会默认把浏览器生成的event事件对象 传入方法 --> <button @click="btnClick2">导航3</button> <!-- 定义方法时 需要event对象 也需要传其他参数 直接写 event会报错 因为会被以为时一个变量 去data里面找 没找到定义的变量就报错了 所以要传event对象 应该在在前面加$ $event --> <button @click="btnClick3(abc,$event)">导航4</button> <!-- 或者形参和实参 都写一个参数 打印的时候写形参 和 event 也可以得到event对象和实参 --> <button @click="btnClick5(abc)">导航5</button> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> const app = new Vue({ el: '#app', data: { abc: "李银河~你好啊" }, methods: { btnClick() { console.log("click"); }, btnClick2(num) { console.log("-------", num); }, btnClick3(abc, event) { console.log("+++++", abc, event); }, btnClick5(abc) { console.log("~~~~~~", abc, event); } } }) </script> </body>