你可以使用 v-on 指令來綁定并監(jiān)聽 DOM 事件。綁定的內(nèi)容可以是一個當(dāng)前實例上的方法 (后面無需跟括號) 或一個內(nèi)聯(lián)表達(dá)式。如果提供的是一個方法，則原生的 DOM event 會被作為第一個參數(shù)傳入，同時這個 event 會帶有 targetVM 屬性，指向觸發(fā)該事件的相應(yīng)的 ViewModel：

<div id="demo">
    <a v-on="click: onClick">觸發(fā)一個方法函數(shù)</a>
    <a v-on="click: n++">觸發(fā)一個表達(dá)式</a>
</div>

    new Vue({
        el: '#demo',
        data: {
            n: 0
        },
        methods: {
            onClick: function (e) {
                console.log(e.targetVM.n);
                console.log(e.target.tagName);// "A"
                console.log(e.targetVM === this);// true
            }
        }
    });

執(zhí)行表達(dá)式

當(dāng)在 v-repeat 里使用 v-on 時，targetVM 顯得很有用，因為 v-repeat 會創(chuàng)建大量子 ViewModel。但是，通過執(zhí)行表達(dá)式的方式，把代表當(dāng)前 ViewModel 數(shù)據(jù)對象的別名傳進去，會更方便直觀一些：

<ul id="list">
    <li v-repeat="item in items" v-on="click: toggle(item)">
        {{item.text}}
    </li>
    <button v-on="click: submit('hello!', $event)">Submit</button>
</ul>

    new Vue({
        el: '#list',
        data: {
            items: [
                { text: 'one', done: true },
                { text: 'two', done: false }
            ]
        },
        methods: {
            toggle: function (item) {
                console.info(item.done);
                item.done = !item.done;
                console.info(item.done);
            },
            submit: function (msg, e) {
                e.stopPropagation();
                console.info(msg + ' submit is called!');
            }
        }
    })

當(dāng)你想要在表達(dá)式中訪問原來的 DOM event，你可以傳遞一個 $event 參數(shù)進去。

key過濾器

當(dāng)監(jiān)聽鍵盤事件時，我們常常需要判斷常用的 key code。Vue.js 提供了一個特殊的只能用在 v-on 指令的過濾器：key。它接收一個表示 key code 的參數(shù)并完成判斷：

    <!-- 只有當(dāng) keyCode 等于 13 時才調(diào)用方法 -->
    <input v-on="keyup:mySubmit | key 13">

系統(tǒng)有很多預(yù)設(shè)值可以使用，例如：

<!-- 效果同上 -->
<input v-on="keyup:submit | key 'enter'">

預(yù)設(shè)值為：enter tab delete esc up down left right space

為什么在HTML中使用監(jiān)聽器

你可能會注意到整個事件監(jiān)聽的方式違背了 “separation of concern” 的傳統(tǒng)理念。不必?fù)?dān)心，因為所有的 Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會導(dǎo)致任何維護困難。實際上，使用 v-on 還有更多好處：

它便于在 HTML 模板中輕松定位 JS 代碼里的對應(yīng)方法實現(xiàn)。
因為你無須在 JS 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦。這會更易于測試。
當(dāng)一個 ViewModel 被銷毀時，所有的事件監(jiān)聽都會被自動移除。你無須擔(dān)心如何自行清理它們。