## 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) } } ```