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

NO IMAGE

你可以使用 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('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!');
}
}
})

當你想要在表示式中訪問原來的 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 'enter'">

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

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

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

本文已被整理到了《Vue.js前端元件學習教程》,歡迎大家學習閱讀。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

用Vue.js實現監聽屬性的變化詳解使用vue-router進行頁面切換時滾動條位置與滾動監聽事件vue.js 1.x與2.0中js實時監聽input值的變化詳解Vue監聽資料變化原理vue監聽滾動事件實現滾動監聽Vue.js實戰之通過監聽滾動事件實現動態錨點Vue監聽陣列變化原始碼解析vuejs2.0實現分頁元件使用$emit進行事件監聽資料傳遞的方法Vue監聽資料物件變化原始碼原始碼分析Vue.js的監聽實現教程