淺入深出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在這方便提供了事件修飾符，目的就是爲了不開發者們手動去處理原生事件的一些邏輯。

語法以下：

<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>

先看看點擊前的效果：

如今是黑色的，點擊以後：

毫無疑問這裏確定是白色的，重點是接下來的一次點擊！：

沒有變化，依舊是白色，再點一次，仍是白色。.once修飾符很好的解決了咱們的需求。

寫在文末

至此，對於 vue中的一些基礎語法，事件咱們已經有了初步的瞭解和使用了。

接下來將要一塊兒學習路由與組件這兩大Boss了，有了它們，vue開發會變得更加有趣和多變。