????????指令 v-on 用于監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼，簡寫為 @ ，其事件類型由參數(shù)決定，與 v-bind 指令相同，冒號后面是參數(shù)，舉個栗子如下

<div id="app"><button v-on:click='count++'>click</button>count: {{count}} </div> const vm = new Vue({el: '#app',data:{count: 0} })

【結(jié)果】

v-on 還可以接收一個需要調(diào)用的方法名稱，方法寫在 methods 對象中。舉個栗子如下

<div id="app"><button v-on:click='addCount'>click</button>count: {{count}} </div> const vm = new Vue({el: '#app',data: {count: 0},methods: {addCount() {this.count++;}} })

【結(jié)果】

【注】methods 中的函數(shù)，可以直接代理給Vue實例對象，因此可以直接運行 vm.addCount()

除了直接綁定到一個方法，也可以在內(nèi)聯(lián)JavaScript語句中調(diào)用方法

<div id="app"><button v-on:click='addCount(5)'>click</button>count: {{ count }} </div> const vm = new Vue({el: '#app',data: {count: 0},methods: {addCount(num) {this.count += 5;}} })

【結(jié)果】

在內(nèi)聯(lián)語句中使用事件對象時，可以利用特殊變量?$event.

<div id="app"><button v-on:click='addCount(5, $event)'>click</button>count: {{ count }} </div> const vm = new Vue({el: '#app',data: {count: 0},methods: {addCount(num, e) {this.count += 5;console.log(e.target)}} })

【結(jié)果】

【注】可以動態(tài)綁定事件，Vue版本需要2.6.0+

<div id="app"><button v-on:[event]='addCount(5)'>click</button>count: {{ count }} </div> const vm = new Vue({el: '#app',data: {event:'click',count: 0},methods: {addCount(num, e) {this.count += 5;}} })

可以不帶參數(shù)綁定一個對象，Vue版本需要2.4.0+，不支持修飾符和函數(shù)傳參，語法如下

.bg {width: 100px;height: 100px; } <div id="app"><div class="bg" v-on="{mousedown:doThis, mouseup:doThat}" v-bind:style="objectA"></div> </div> const vm = new Vue({el: '#app',data: {count: 0,objectA:{backgroundColor: '#f88'}},methods: {doThis() {this.objectA = {backgroundColor: '#88f'}},doThat() {this.objectA = {backgroundColor: '#f8f'}}} })

【結(jié)果】

【拓展】為什么在HTML中監(jiān)聽事件

輕松定位JavaScript代碼里對應(yīng)的方法

ViewModel?代碼可以是非常純碎的邏輯，和DOM完全解耦，更易于測試

當(dāng)ViewModel被銷毀時，所有事件處理器都會自動被刪除

總結(jié)

以上是生活随笔為你收集整理的Vue如何绑定事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。