你可以使用 v-on 指令來(lái)綁定并監(jiān)聽(tīng) DOM 事件坪稽。綁定的內(nèi)容可以是一個(gè)當(dāng)前實(shí)例上的方法 (后面無(wú)需跟括號(hào)) 或一個(gè)內(nèi)聯(lián)表達(dá)式。如果提供的是一個(gè)方法刨肃，則原生的 DOM event 會(huì)被作為第一個(gè)參數(shù)傳入让虐，同時(shí)這個(gè) event 會(huì)帶有 targetVM 屬性，指向觸發(fā)該事件的相應(yīng)的 ViewModel：
<div id="demo">
<a v-on="click: onClick">觸發(fā)一個(gè)方法函數(shù)</a>
<a v-on="click: n++">觸發(fā)一個(gè)表達(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 時(shí)蜡歹，targetVM 顯得很有用，因?yàn)?v-repeat 會(huì)創(chuàng)建大量子 ViewModel涕烧。但是月而，通過(guò)執(zhí)行表達(dá)式的方式，把代表當(dāng)前 ViewModel 數(shù)據(jù)對(duì)象的別名傳進(jìn)去议纯，會(huì)更方便直觀一些：
<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á)式中訪問(wèn)原來(lái)的 DOM event父款，你可以傳遞一個(gè) $event 參數(shù)進(jìn)去。
key過(guò)濾器
當(dāng)監(jiān)聽(tīng)鍵盤(pán)事件時(shí)瞻凤，我們常常需要判斷常用的 key code憨攒。Vue.js 提供了一個(gè)特殊的只能用在 v-on 指令的過(guò)濾器：key。它接收一個(gè)表示 key code 的參數(shù)并完成判斷：
<!-- 只有當(dāng) keyCode 等于 13 時(shí)才調(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)聽(tīng)器
你可能會(huì)注意到整個(gè)事件監(jiān)聽(tīng)的方式違背了 “separation of concern” 的傳統(tǒng)理念浓恶。不必?fù)?dān)心玫坛，因?yàn)樗械?Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上结笨，它不會(huì)導(dǎo)致任何維護(hù)困難。實(shí)際上湿镀，使用 v-on 還有更多好處：
它便于在 HTML 模板中輕松定位 JS 代碼里的對(duì)應(yīng)方法實(shí)現(xiàn)炕吸。
因?yàn)槟銦o(wú)須在 JS 里手動(dòng)綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯勉痴，和 DOM 完全解耦赫模。這會(huì)更易于測(cè)試。
當(dāng)一個(gè) ViewModel 被銷毀時(shí)蒸矛，所有的事件監(jiān)聽(tīng)都會(huì)被自動(dòng)移除瀑罗。你無(wú)須擔(dān)心如何自行清理它們胸嘴。
