v-on参数 当通过methods中定义方法，以供@click调用，需要注意参数问题， 情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加。（）
<!-- 1、 事件调用的方法没有参数--> <button @click="btnClick">按钮1</button> <button @click="btnClick()">按钮2</button> <!-- 2、 在事件定义时,方法本身需要一个参数，正常的写法应该是下面这样的--> <button @click="btn2Click(123)">按钮3</button> <!--,那么如果不给参数的话，那么浏览器就会返回一个 undefined，不会报错 <button @click="btn2Click()">按钮3</button>--> <!--如果连小括号都省了的话，Vue会默认将浏览器产生的event事件对象作为参数传给方法 <button @click="btn2Click">按钮3</button>--> <!-- 3、 方法定义时，既需要event事件对象，同时又需要其他对象--> <!-- 在调用方法时 如何手动获取event对象：$event--> <button @click="btn3Click(123,$event)">按钮4</button> <button>按钮5</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message:'你好啊' }, methods:{ btnClick(){ console.log('btnClick'); }, btn2Click(event){ console.log('......',event); }, btn3Click(abc,event){ console.log('+++++',abc,event); } } }) </script> <div id="app"> <h2>{{counter}}</h2> <!--<button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button>--> <!--<button v-on:click="increment">+</button> <button v-on:click="increment">-</button>--> <!-- v-on的语法糖 ，就是直接是一个@--> <button @click="increment">+</button> <button @click="increment">-</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods:{ increment(){ this.counter++ }, increment(){ this.counter++ } } }) </script>