上一篇的最后留下了一個 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開發會變得更加有趣和多變。