Vue－事件基礎

最基本但也最重要。

簡述

先用一個最簡單的 click 事件來說明：

<div id="app">
  <h2>{{ message }} - {{ name }} - {{ age }}</h2>
  <button @click="age++">Increase</button>
  <button @click="age--">Decrease</button>
  <div @click="message = 'Hello PeaNu'">Change message</div>
</div>

這邊就是熟悉的「字串式 JS」，雖然看起來是字串 but 實際上是在寫 JS。

不過要特別注意的地方是「不需要用 function 來包住」，像這樣：

<button @click="() => age--">Decrease</button>

如果你跟我一樣是以前是寫 React 的話一定會覺得很不科學，所以特別強調一下這點。

這樣子寫的優點？

後來發現這樣子寫其實也算是有一些小優勢。如果用 React 的觀念來做 togggle 的話，我們通常會這樣寫：

<ul>
  <li
    v-for="user of users"
    class="default"
    :class="{ online: user.isOnline}"
    @click="toggleOnline(user.name)"
  >
    <!-- onClick handler -->
    <div>
      <img :src="user.img" :alt="user.name" />
    </div>
    <div>
      {{ user.name }} <br />
      {{ user.age }}
    </div>
  </li>
</ul>

methods: {
  toggleOnline(name) {
    this.users = this.users.map((u) => (
      u.name === name ? { ...u, isOnline: !u.isOnline } : u)
    )
  }
}

但如果寫成 inline 的話可以非常簡單：

<ul>
  <li
    v-for="user of users"
    class="default"
    :class="{ online: user.isOnline}"
    @click="user.isOnline = !user.isOnline"
  >
    <!-- 輕輕鬆鬆 -->
    <div>
      <img :src="user.img" :alt="user.name" />
    </div>
    <div>
      {{ user.name }} <br />
      {{ user.age }}
    </div>
  </li>
</ul>

這是因為在 Vue 可以用「ｍ utable」的方式來改資料，所以利用這個特型來寫成 inline 形式的話會發現非常方便。

$Event 物件

前面有說過在 Vue 裡面的 Event handler 沒辦法再用一個 function 來包住，像這樣：

<button @click="() => age--">Decrease</button>

這時候如果想取得 Event 物件的話怎麼辦？

在「沒有自訂參數」的情況下 Vue 會自動幫你帶進去，所以你可以在元件中取得：

const app = Vue.createApp({
  methods: {
    handleEvent(e) {
      console.log(e.type)
    }
  }
})

app.mount('#app')

但如果有的話怎麼辦？像這樣子：

<div @mouseover="handleEvent(5)">mouseover</div>

這時候你就得手動帶進去才行，不然是拿不到 Event 物件的，要改成這樣：

<div @mouseover="handleEvent($event, 5)">mouseover</div>