DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Vue.JS入門教程之事件監聽
Vue.JS入門教程之事件監聽
編輯:關於JavaScript     

你可以使用 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前端組件學習教程》,歡迎大家學習閱讀。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved