## v-on给元素添加监听 ## 可以简写为@符号 我们学习的JavaScript的元素的事件监听都可以再vue中使用 原生的JavaScript的事件监听  ## 上表的方法都是原生的JavaScript的事件方法，在vue中的使用是一律去除on，然后 添加v-on：或者@ ``` 比如单击 <button @click="add">点击加1</button> <button v-on:click="minus">点击减1</button> ``` ## 需要注意的是所有的方法都 必须写在vue的methods中，不允许在外部罗列方法名称 ## 代码案例： ``` var vue = new Vue({ el: "#app", data: { a: 100 }, methods:{ add() { this.a++ }, minus() { this.a -- } } }) ```  ## 方法重名的时候，后写的方法会覆盖先前的方法 下列程序中执行a+5操作 ~~~ methods:{ add(){ this.a++ }, add(){ this.a+=5 / }, ~~~ # 方法中是可以传入参数的 ``` <button @click="add(5)">点击加1</button> ``` ``` methods:{ add(num) { this.a+= num } } ```  ## 如果方法中没有传入值，默认输入会有该方法的事件参数 ``` <button @click="add">点击加1</button> //方法名称 methods:{ add(event) { console.log(event) } } ```