<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>