在前端開發中，我們需要經常和使用者交互，這個時候，我們就必須監聽使用者發生的時間，例如點擊、拖曳、鍵盤事件等等在Vue中如何監聽事件呢？使用v-on指令。以下這篇文章就來帶大家了解Vue的事件監聽指令v-on，希望對大家有幫助！
在Vue中綁定事件監聽器，事件類型由參數指定；表達式可以是一個方法的名字或一個內嵌語句，如果沒有修飾符也可以省略。 （學習影片分享：vue影片教學
v2.4.0
開始v-on同樣支援不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用物件語法時，是不支援任何修飾器的。 用在普通元素上時，只能監聽 原生DOM事件。用在自訂元素元件上時，也可以監聽子元件觸發的自訂事件。 在監聽原生DOM事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以存取一個$event屬性：v-on:click="handle('ok', $event)"。
先來看一個簡單的範例
<!-- Template -->
<div id="app">
<h1 v-on:click="clickMe">点击我</h1>
</div>
// JavaScript
var app = new Vue({
el: '#app',
methods: {
clickMe: function() {
alert("点击我，我就出来了!(^_^)")
}
},
data: {
}
})看到的效果如下：在Vue的範本中，我們使用了v-on，並且綁定了一個click事件（v-on:click），然後給這個click事件綁定了一個事件clickMe。而這個clickMe在Vue中，我們一般是放在methods: {}
clickMe這個函數寫在methods中。 看到v-on:click="clickMe"，是不是很像HTML中的onclock="clickMe"
@click來取代v-on:click
在Vue中，對於v-on
<!-- 方法处理器 -->
<button v-on:click="clickMe"></button>
<!-- 对象语法 （v2.4.0版本以上才支持） -->
<button v-on="{ mousedown: doThis, mouseup: doThat}"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('Hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为， 没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符， 键别名 -->
<input @keyup.13="onEnter" />
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button><my-component @my-event="handleThis"></my-component> <!-- 内联语句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- 组件中的原生事件 --> <my-component @click.native="onClick"></my-component>
從上面的簡單範例中，可以看出Vue在事件處理的過程中自帶了一些修飾符：.stop：呼叫event.stopPropagation()
. prevent：呼叫event.preventDefault()
.capture：新增事件偵聽器時使用capture模式
.self：只當事件是從偵聽器綁定的元素本身觸發時才觸發回呼
.{keyCode | keyAlias }：只當事件是從特定鍵觸發時才觸發回呼
#.native：監聽元件根元素的原生事件
.once：只觸發一次回呼
#.left：只當點擊滑鼠左鍵時觸發， （v2.2.0 才有）
.right：只當點擊滑鼠右鍵時觸發，（v2.2.0 才有）
#.middle：只當點擊滑鼠中鍵時觸發，（v2.2.0 才有）
{passive: true}
模式加入偵聽器，（v2.3.0 才具有）v-on範例
我們來做一個簡單的效果，就是一個計數器，效果如下：
數字往下加，點選###-###數字往下減。 ######在Vue中，我們的模板中有三個元素，兩個按鈕，一個顯示數字的容器，第一個按鈕做加的計算，第二個按鈕做減的計數。簡單的結構如下圖所示：###
<div id="app">
<button v-on:click="increase">+</button>
<span>{{ count }}</span>
<button v-on:click="reduce">-</button>
</div>两个按钮上都绑定了一个click事件，点击按钮分别触发increase和reduce两个函数，前者做加法，后者做减法。另外一个元素中我们有一个值{{ count }}。每次点击按钮这个{{ count }}都会做相应的变化。
模板有了之后，需要添加对应的功能。
let app = new Vue({
el: '#app',
methods: {
increase: function() {
this.count++
},
reduce: function() {
this.count--
}
},
data: {
count: 0
}
})在Vue中，我们在methods中声明了两个函数，分别是increase（加法）和reduce（减法）。另外需要在数据源中声明count。
演示demo地址：https://codepen.io/airen/pen/PJbKNg
对于这么简单的效果，我们也可以直接在v-on中处理完：
<button v-on:click="count += 1">+</button>
比如我们前面的示例，修改下：
<button v-on:click="count += 1">+</button> {{ count }}// JavaScript let app = new Vue({ el: '#app', data: { count: 0 } })
效果一样：
演示demo地址：https://codepen.io/airen/pen/veyeLY
以上是聊聊Vue的事件監聽指令v-on的詳細內容。更多資訊請關注PHP中文網其他相關文章！
