聊聊Vue的事件監聽指令v-on

在前端開發中，我們需要經常和使用者交互，這個時候，我們就必須監聽使用者發生的時間，例如點擊、拖曳、鍵盤事件等等在Vue中如何監聽事件呢？使用v-on指令。以下這篇文章就來帶大家了解Vue的事件監聽指令v-on，希望對大家有幫助！

v-on指令介紹

• ##v-on指令介紹

• ## 作用：綁定事件監聽器

• 縮寫：@

• #預期：Function (方法) | Inline Statement(內部表達式) |Object(物件)

參數：event

在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: &#39;#app&#39;,
    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"

。從外表現像看，他們寫法不一樣，但是起到的結果是一致的。在Vue中，我們也可以使用

@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(&#39;Hello&#39;, $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-event
• 時將呼叫事件處理器）：

  <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

：以

{passive: true}

模式加入偵聽器，（v2.3.0 才具有）

• Vue的官網對事件的處理和元件的自定義的事件都有詳細的介紹。如果有興趣的話，可以查看對應的內容：

• 事件處理器

元件自訂事件

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

（学习视频分享：web前端开发、编程基础视频）

以上是聊聊Vue的事件監聽指令v-on的詳細內容。更多資訊請關注PHP中文網其他相關文章！