Vue.js: Methods 與事件處理 (Event Handling)

分別說明 Method 與事件處理 (Event Handling) 如下。

Method

Vue Instance 在初始化時可設定選項物件,其中可設定 method,執行一些動作。

初始畫面如下。

Vue.js: Method

一開始印出訊息的初始值「沒發生任何事情!」。

<div id="app">
  <p>${ msg }</p>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    msg: '沒發生任何事情!',
  },
  methods: {
    prompt: function() {
      this.msg = '快來看這裡!我是新訊息!';
    }
  }
});

// 由於部落格會把使用雙花括號的內容吃掉,所以設定 delimiters 以顯示完整程式碼。

待執行prompt method 後顯示新訊息「快來看這裡!我是新訊息!」。

Vue.js: Method

vm.prompt();

事件處理 (Event Handling)

為了能讓使用者與畫面互動,我們可以使用v-on:some_method (簡寫@some_method) 綁定事件監聽器,藉此使用我們在 vue instance 宣告的 method。

如下所示,點擊按鈕後觸發 click 事件,執行prompt(),然後將訊息「按鈕被按了!監聽到 click 事件。」顯示在畫面上。

Vue.js: 事件處理 (Event Handling)

<div id="app">
  <button type="button" @click="prompt()">按我取得訊息</button>
  <p>${ msg }</p>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    msg: '沒發生任何事情!',
  },
  methods: {
    prompt: function() {
      this.msg = '按鈕被按了!監聽到 click 事件。';
    }
  }
});

事件修飾符 (Event Modifiers)

Vue.js 藉由事件修飾符 (Event Modifiers) 處理了許多 DOM 事件的細節,讓我們能專注於程式邏輯的撰寫。

.stop

等同於event.stopPropagation(),防止事件冒泡。

當點擊按鈕「按我!」時,不但會觸發綁在按鈕上inner這個 method,還會觸發綁在外面<div>middleouter method。

冒泡事件

<div id="app">
  <div @click="outer">
    <div @click="middle">
      <button @click="inner">按我!</button>
    </div>
  </div>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  methods: {
    inner: function() {
      alert('這是裡面的 button');
    },
    middle: function() {
      alert('這是中間的 div');
    },
    outer: function() {
      alert('這是外面的 div');
    }
  }
});

使用.stop防止上例這種事件冒泡的狀況發生。

Vue.js: 事件處理 (Event Modifiers) - .stop 防止事件冒泡

<div id="app">
  <div @click="outer">
    <div @click="middle">
      <button @click.stop="inner">按我!</button>
    </div>
  </div>
</div>

.prevent

等同於event.preventDefault(),防止執行預設的行為。

使用<a href="#">當成點擊的按鈕時,通常會使用event.preventDefault(),防止瀏覽器的網址列出現#

在這裡可以使用事件修飾符.prevent

Vue.js: 事件處理 (Event Modifiers) - .prevent

<div id="app">
  <a href="#" type="button" @click.prevent="prompt()">按我取得訊息</a>
  <p>${ msg }</p>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    msg: '沒發生任何事情!',
  },
  methods: {
    prompt: function() {
      this.msg = '按鈕被按了!監聽到 click 事件。';
    }
  }
});

.capture

與事件冒泡的方向相反,事件捕獲 (event capturing) 是由外而內的。

因此,就使用.capture來捕捉事件捕獲。

Vue.js: 事件處理 (Event Modifiers) - .capture

<div id="app">
  <div @click.capture="outer">
    <div @click.capture="middle">
      <button @click.capture="inner">按我!</button>
    </div>
  </div>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  methods: {
    inner: function() {
      alert('這是裡面的 button');
    },
    middle: function() {
      alert('這是中間的 div');
    },
    outer: function() {
      alert('這是外面的 div');
    }
  }
});

.self

只會觸發自己範圍內的事件,不包含子元素。

Vue.js: 事件處理 (Event Modifiers) - .self

<div id="app">
  <div @click.self="outer">
    <div @click.self="middle">
      <button @click="inner">按我!</button>
    </div>
  </div>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  methods: {
    inner: function() {
      alert('這是裡面的 button');
    },
    middle: function() {
      alert('這是中間的 div');
    },
    outer: function() {
      alert('這是外面的 div');
    }
  }
});

.once

沒有使用.once,只要按下按鈕就會執行。

計數器

<div id="app">
  <a href="#" type="button" @click="add()">按我+1</a>
  <p>${ counter }</p>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    counter: 0,
  },
  methods: {
    add: function() {
      this.counter++;
    }
  }
});

使用.once,只要按下按鈕只會執行一次。

Vue.js: 事件處理 (Event Modifiers) - .once

<div id="app">
  <a href="#" type="button" @click.once="add()">按我+1</a>
  <p>${ counter }</p>
</div>

js 程式碼同上。

按鍵修飾符 (Key Modifiers)

監聽鍵盤事件的特定鍵值。

.enter

在文字輸入框中按 enter 鍵,counter 的數字會不停 +1;如果按其他鍵則不會 +1。

Vue.js: 事件處理 (Key Modifiers) - .enter

<div id="app">
  <input href="#" type="text" v-on:keyup.13="add()" value="按 Enter +1" />
  <p>${ counter }</p>
</div>
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    counter: 0,
  },
  methods: {
    add: function() {
      this.counter++;
    }
  }
});

自行定義按鍵修飾符別名

可以透過config.keyCodes自行定義按鍵修飾符別名,例如:由於預先定義了 keycode 116 (即按鍵 F5) 的別名為「f5」,因此在文字輸入框中按下 F5,會觸發prompt method,出現 alert。

自行定義按鍵修飾符別名

<div id="app">
  <input type="text" v-on:keydown.f5="prompt()">
</div>
Vue.config.keyCodes.f5 = 116;

var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  methods: {
    prompt: function() {
      alert('我是 F5!');
    }
  }
});

以上參考 methodsEvent Handling


標籤: vue.js
comments powered by Disqus