Vue.js 學習旅程Mile 9 – Event Handling 事件處理篇-1:methods & v-on


Posted by yuhantaiwan on 2020-04-26

methods

在 Vue Instance 中的選項物件屬性中,可設定 methods 這個屬性用來定義方法,執行一些動作。

methods 屬性中的每個 key 是一個方法的名稱,而 value 就是方法的函數。

我們常使用指令 v-on 來綁定 HTML DOM 元素的事件監聽器,以觸發要執行的方法。

範例:

<div id="app">
  <button v-on:click="addCount">addCount</button>
  <p>{{ count }}</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    addCount: function() {
      this.count += 1;
    }
  }
});

方法中的 this 會指向 Vue Instance,所以不能使用會將 this 指向上層內容的箭頭函式 arrow function 來定義 methods

v-on

  • 縮寫:@
  • 表達式:Function、Inline Statement、Object
  • 參數:event
  • 修飾符
    • .stop : 呼叫 event.stopPropagation(),停止觸發上層 DOM 元素事件
    • .prevent : 呼叫 event.preventDefault(),避免瀏覽器預設行為
    • .capture : 不管觸發事件的目標是否是下層, 設定 capture 的事件一定會先觸發
    • .self : 僅觸發自己範圍的事件,不包含子層
    • .{keyCode | keyAlias} : 只在按下鍵盤任一鍵值才會觸發事件
    • .native : 監聽元件根元素的原生事件
    • .once : 此事件只觸發一次
    • .left : 只在點擊滑鼠左鍵才會觸發事件
    • .right : 只在點擊滑鼠右鍵才會觸發事件
    • .middle : 只在點擊滑鼠中鍵才會觸發事件
    • .passive : 以 { passive : true } 的模式添加事件監聽器,無視 prevent 功能
  • 用法:綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個行內陳述式,如果沒有修飾符也可以省略。

關於修飾符的詳細用法,會在之後的篇章有完整介紹。

接下來針對 v-on 的表達方式用法做介紹:

使用表達式 Expression

  • 表達式 ( Expression ):又可稱為表示式、運算式,經常透過一些符號結合上下語句並運算及回傳結果。
  • 陳述式 ( Statement ):用於命令執行指定的一系列操作,不會回傳結果。
<div id="app">
  <button @click="count += 1">點我+1</button>
  <p>{{ count }}</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    count: 0
  }
});

使用事件名稱 Method Name

當使用事件名稱綁定時,方法中的第一個參數會是原生的 DOM 事件物件,所以可以使用這個物件來操作叫用此事件的元素

<div id="app">
  <div>
    <button @click="aPlus1AndbMinus">a+ and b-</button>
    {{a}}:{{b}}
  </div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 10
  },
  methods: {
    aPlus1AndbMinus: function(event) {
      this.a += 1;
      this.b -= 1;

      console.log(`You clicked ${event.target.tagName}`);
    }
  }
});

使用行內陳述式 Inline Statement

方法內可以傳入參數,而當需要原生的 DOM 事件物件時,可以用 $event 變數當作參數傳入方法中使用。

<div id="app">
  <div>
    <button @click="clickWhat('hi', $event)">hi</button>
    <button @click="clickWhat('yo', $event)">yo</button>
    You click {{what}} {{tag}}
  </div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    what: '',
    tag: '',
  },
  methods: {
    clickWhat: function(what, event) {
      this.what = what;
      this.tag = event.target.tagName;
    }
  }
});

使用物件 Object { key : value }

  • key : 欲綁定的事件名稱
  • value : 觸發事件時想要叫用的方法名稱

物件的設定方式不能使用縮寫 @ 和任何的修飾符

<div id="app">
  <div>
    <button v-on="{ mousedown: showDown, mouseup: showUp }">click me</button>
    {{doWhat}}
  </div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    doWhat: ''
  },
  methods: {
    showUp: function(event) {
      this.doWhat = `up ${event.target.tagName}`;
    },
    showDown: function(event) {
      this.doWhat = `down ${event.target.tagName}`;
    }
  }
});

只使用修飾符 Modifiers

<form @submit.prevent>
  <button type="submit">submit</button>
</form>

在沒有 @submit.prevent 的情況下,頁面會閃一下,這時頁面已送出表單並重新載入了,而加上 @submit.prevent 後畫面不會重新載入

參考資料


#w3HexSchool #Vue #javascript







Related Posts

Encode 、 Encrypt 以及 Hash

Encode 、 Encrypt 以及 Hash

建立自動化檢查的 React App(Husky, prettier, eslint, lint-statge)

建立自動化檢查的 React App(Husky, prettier, eslint, lint-statge)

React-[useEffect篇]- Cleanup函式

React-[useEffect篇]- Cleanup函式


Comments