Vue.JS入門教程之事件監聽

你可以使用 v-on 指令來綁定並監聽 DOM 事件。綁定的內容可以是一個目前實例上的方法 (後面無需跟括號) 或一個內聯表達式。如果提供的是一個方法，則原生的DOM event 會被當作第一個參數傳入，同時這個event 會帶有targetVM 屬性，指向觸發該事件的對應的ViewModel：

<div id="demo">
 <a v-on="click: onClick">触发一个方法函数</a>
 <a v-on="click: n++">触发一个表达式</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
 }
}
});

執行表達式

當在v-repeat 裡使用v-on 時，targetVM 顯得很有用，因為v-repeat 會創建大量子ViewModel。但是，透過執行表達式的方式，把代表目前ViewModel 資料物件的別名傳進去，會更方便直觀一些：

<ul id="list">
 <li v-repeat="item in items" v-on="click: toggle(item)">
 {{item.text}}
 </li>
 <button v-on="click: submit(&#39;hello!&#39;, $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!');
 }
}
})

當你想要在表達式中存取原來的DOM event，你可以傳遞一個$event 參數進去。

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

<!-- 只有当 keyCode 等于 13 时才调用方法 -->
<input v-on="keyup:mySubmit | key 13">

系統有很多預設值可以使用，例如：

<!-- 效果同上 -->
<input v-on="keyup:submit | key &#39;enter&#39;">

預設值為：enter tab delete esc up down left right space

為什麼在HTML中使用監聽器
你可能會注意到整個事件監聽的方式違背了“separation of concern” 的傳統理念。不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在目前視圖的 ViewModel 上，它不會導致任何維護困難。實際上，使用 v-on 還有更多好處：

它便於在 HTML 模板中輕鬆定位 JS 程式碼裡的對應方法實作。
因為你無須在 JS 裡手動綁定事件，你的 ViewModel 程式碼可以是非常純粹的邏輯，和 DOM 完全解耦。這會更易於測試。
當一個 ViewModel 被銷毀時，所有的事件監聽都會自動移除。你無須擔心如何自行清理它們。

以上就是本文的全部內容，希望對大家的學習有所幫助