Vue的事件監聽指令v-on怎么使用

這篇文章主要介紹了Vue的事件監聽指令v-on怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue的事件監聽指令v-on怎么使用文章都會有所收獲，下面我們一起來看看吧。

v-on指令介紹

• 作用：綁定事件監聽器

• 縮寫：@

• 預期：Function (方法) | Inline Statement(內部表達式) | Object(對象)

• 參數： event

在Vue中綁定事件監聽器，事件類型由參數指定；表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。

從v2.4.0開始v-on同樣支持不帶參數綁定一個事件/監聽器鍵值對的對象。注意當使用對象語法時，是不支持任何修飾器的。

用在普通元素上時，只能監聽 原生DOM事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

在監聽原生DOM事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個$event屬性：v-on:click="handle('ok', $event)"。

先來看一個簡單的示例

<!-- Template -->
<div id="app">
    <h2 v-on:click="clickMe">點擊我</h2>   
</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"。從外表現象看，他們寫法不一樣，但是起到的結果是一致的。在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('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-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。

對于這么簡單的效果，我們也可以直接在v-on中處理完：

<button v-on:click="count += 1">+</button>

比如我們前面的示例，修改下：

<div id="app">
  <button v-on:click="count += 1">+</button>
  <span>{{ count }}</span>
  <button v-on:click="count -= 1">-</button>
</div>

// JavaScript
let app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

效果一樣：

關于“Vue的事件監聽指令v-on怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue的事件監聽指令v-on怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。