在vue中，我们有时候需要对浏览器事件进行事件监听，比如当鼠标点击某一个按钮时，触发某种事件，这时，Vue为我们提供了方便快捷的方式v-on：
v-on的基本使用 示例代码：定义两个按钮，点击对应的按钮，对数据进行相应的增加和减少： <div id="app"> <h3>{{counter}}</h3> <button v-on:click="add">+</button> <button v-on:click="sub">-</button> </div> <script> const app = new Vue({ el: '#app', data: { counter: 0, }, methods: { add() { this.counter++; }, sub() { this.counter--; } } }); </script>运行结果：点击对应的按钮，对文本实现相对应的增减 2.v-on的参数问题： 在我们使用v-on进行事件监听时，有可能需要对监听的事件传入相对于的参数，这时候需要对事件监听后的函数传递参数，其情况可以大致分为以下几种： 示例代码：
<div id="app"> <h3>{{counter}}</h3> <button v-on:click="add">+</button> <button v-on:click="sub">-</button> <!-- 不需要传参数，加不加括号都可以 --> <button @click="btn1()">按钮1</button> <button @click="btn1">按钮1</button> <!-- 需要传一个参数,传入的参数需要加引号，不加引号将会去data里面寻找 --> <button @click="btn2('abc')">按钮2</button> <!-- 未加参数undefined --> <button @click="btn2()">按钮2</button> <!-- 没有括号获取浏览器的事件event --> <button @click="btn2">按钮2</button> <!-- 手动获取浏览器的event对象，$event --> <button @click="btn(123,$event)">按钮</button> </div> <script> const app = new Vue({ el: '#app', data: { counter: 0, }, methods: { add() { this.counter++; }, sub() { this.counter--; }, btn1() { console.log("123"); }, btn2(str){ console.log(str); }, btn(str, event) { console.log(str, event); } } }); </script> 当不需要传递参数时，函数的括号加不加都可以，实现的效果是一样的： <!-- 不需要传参数，加不加括号都可以 --> <button @click="btn1()">按钮1</button> <button @click="btn1">按钮1</button>运行结果： 点击按钮1，因为不需要传递参数，所以两者的实现效果一致，都打印出123；
当需要传递一个参数时：需要传一个参数,传入的参数需要加引号，不加引号将会去data里面寻找； <!-- 需要传一个参数,传入的参数需要加引号，不加引号将会去data里面寻找 --> <button @click="btn2('abc')">按钮2</button> <!-- 未加参数undefined --> <button @click="btn2()">按钮2</button> <!-- 没有括号获取浏览器的事件event --> <button @click="btn2">按钮2</button>运行结果： 第一个按钮需要传递参数str，第一个按钮传递的时字符串abc因此在控制台打印出abc字符串，第二个按钮调用的时btn2方法，btn2需要传入一个参数，但是第二个按钮调用时并没有给该方法传入一个参数，因此打印出未定义； 在需要传入参数，没有给函数方法传入参数，并且也没有括号时：传入的是浏览器的event对象
当我们既需要传入参数，有需要获取浏览器的event对象时：可以通过$event获取： <button @click="btn(123,$event)">按钮</button>运行结果：
