淺入深出Vue：事件處理

若羽。發表於2019-07-03

Vue事件

上一篇的最後留下了一個 v-on的思考，也就是本章的主題：事件處理

為什麼需要事件處理

在前端開發中，經常要面對各種表單、按鈕。而這裡面就住著一個事件：點選 (click)。

前端童鞋們肯定不陌生它，因為經常會出現。比如說：

表單提交
各式各樣的按鈕
列表多級選單摺疊

v-on支援監聽原生的 DOM事件，也就是 vue中也支援以前純js寫法中各式各樣的時間，只是在 vue中換了一種寫法。

使用事件處理的好處便在於我們可以通過事件來控制資料。

MVVM中強調的一點便是資料驅動，那麼在 vue中如果利用資料去驅動檢視呢，上一篇講了雙向繫結。繫結上去了，如果沒辦法對資料進行操作，那就變成了單向渲染了。對於這個問題，解決的方案便是：事件處理，利用事件去控制資料變化，再由資料的變化驅動著檢視。

事件處理是什麼

這一個問題在上面已經給出答案了：

從字面上理解，它就是DOM事件，只不過在 vue中使用方式不同。
深層次理解，它是控制資料變化的控制器，是連線檢視與資料的橋樑。

如何使用

通過按鈕標籤來看一下事件處理的寫法：

<button v-on:需要響應的事件名="處理事件的函式名"></button>

這裡需要注意一點：

處理事件的函式名必須寫在 methods中，要讓當前元件例項可訪問。

還是繼續昨天的例子，這裡讓我們解決最後一個問題：

利用按鈕的點選事件來改變 isDark的值。

首先頁面上加上按鈕：

<template>
  <div>
    <h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>
    <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>
    <br/><button v-on:click="change">改變背景</button>
  </div>
</template>

這裡我們指定響應 click事件的函式名是 change，接著我們去定義我們的函式：

  methods: {
    change: function() {
      this.isDark = !this.isDark
    }
  }

程式碼很簡潔，因為這是個布林值，我們直接取反就好了。

來看看效果：

淺入深出Vue：事件處理

現在是白色的，讓我們點一下看看：

淺入深出Vue：事件處理

點完之後變黑了，再點選一次又變回白色了~ 很完美的達到了我們的要求。

還可以通過其他的事件來完成一些特效，比如：

輸入框在失去焦距時的自動驗證
滑鼠移動到元素上時彈出提示文字

等等。

事件修飾符

如果我們只想讓這個按鈕生效一次怎麼辦？

點了一次之後，就不再讓它繼續變了。

vue在這方便提供了事件修飾符，目的就是為了避免開發者們手動去處理原生事件的一些邏輯。

語法如下：

<button v-on:事件名.事件修飾符="處理函式"></button>

所有的修飾符在下表列出：

.stop
.prevent
.capture
.self
.once
.passive

修飾符可以同時使用多個：

<button v-on:事件名.事件修飾符1.事件修飾符2.事件修飾符3="處理函式"></button>

上述修飾符待後面我們具體用到時再細細講解，其中的一些修飾符拿出來甚至足夠一篇長博文的內容了。

這裡我們使用到的修飾符是：

.once

程式碼：

<template>
  <div>
    <h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>
    <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>

    <!-- 在click後面新增 once 修飾符 -->
    <br/><button v-on:click.once="change">改變背景</button>
  </div>
</template>

先看看點選前的效果：

淺入深出Vue：事件處理