iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

30 天我與 Vue 的那些二三事系列 第 6

Day 6 - Vue事件處理

在 Day 5 中我們提到了Vue中的條件渲染,我們用hardcode的方式指派isShow變數的boolean值,但是,假設今天需求改變,我們想透過一個按鈕來控制isShow的值,每觸發一次button,就將isShow改成false,在按一次再把isShow改回true,這個時候我們要怎麼做呢?

很簡單,今天我們將提到 "事件" 的概念。
https://ithelp.ithome.com.tw/upload/images/20210921/20128925m5xbkOi861.png

事件其實就是程式中針對特定行為會觸發甚麼特定動作的流程,譬如上面的流程,我們希望使用者按下button後改變isShow的值,按鈕稱作Event Source,而按鈕上會有Event Listener去監聽行為有沒有被觸發,而事件處理者就是觸發特定動作後,會交由甚麼動作去執行,例如對應的方法等等。

而"v-on" 其實就是扮演event listener的角色,其作用等於JavaSctipt 中的addEventListener 方法。

那究竟要如何使用v-on呢? 讓我們來看看以下程式碼。

我們在 button 上以 v-on 呼叫了 changeShowStatus() 這個方法,並在方法內部改變了 isShow 的值。

Vue 中也提供了v-on的語法糖,我們可以用 @click 來取代勒勒長的 v-on:click 就能達到同樣的效果。

<template>
  <div id="app">
    <button v-on:click="changeShowStatus"> Click me !</button><br/><br/>
    <span>{{ message }}</span
    ><br />
    <div v-if="isShow">我是 v if true</div>
    <div v-else>我是 v if false</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow: true
    };
  },
  methods: {
    changeShowStatus: function () {
      console.log(this.isShow);
      if (this.isShow) {
        this.isShow = false;
      } else {
        console.log("Test");
        this.isShow = true;
      }
    },
  },
};
</script>

以上就是關於v-on的基礎用法。

在 JavaScript 裡,當監聽的事件發生時,EventListener 會去建立一個「事件物件」 (Event Object), 裡面包含了所有與這個事件有關的屬性,像是各種事件通用的屬性與方法、觸發事件的元素等等資訊。 像是大家很常用的 preventDefault() 、 stopPropagation() 等都是由 event 物件所提供的方法。

但有時候我們會需要在Vue中,針對event做一些額外的處理,這時候該怎麼辦呢?

事實上, v-on 觸發事件時,如果沒有指定參數,預設就會將 event 物件當作參數傳入。

methods: {
    changeShowStatus(event) {
      console.log(event);
      if (this.isShow) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  }

若印出console,就可以看到物件內容。
https://ithelp.ithome.com.tw/upload/images/20210921/20128925ainPFzQBNq.png

不過,我們當然也可以主動選擇將event變數傳入對應方法中。

<button :class="title" v-bind:title="hint" v-on:click="changeShowStatus($event)">

一旦接收到event變數,我們就可以基於我們的需求來客製化我們的程式,來使用event物件中有的方法如 preventDefault()、stopImmediatePropagation()等等。

不過呢~ 即便我們可以透過直接傳入event變數來達成我們的需求,但更好的方式是:方法只有純粹的數據邏輯,而不是去處理DOM 事件細節(將數據處理與頁面細節分開),因此 Vue 為了解決這個問題,也提供以修飾符的方式來處理。
可以參考以下連結:
https://cn.vuejs.org/v2/guide/events.html

以上就是今天的內容。


上一篇
Day 5 - 條件渲染與列表渲染
下一篇
Day 7 - 計算屬性和監聽器
系列文
30 天我與 Vue 的那些二三事30

尚未有邦友留言

立即登入留言