昨天我們用 v-for 排列出一整片星球，但這些星球還是靜靜地掛在銀河裡。
如果想讓它們「動起來」，像是點擊後發光，那我們需要一個能處理互動的工具：v-on。

1)什麼是 v-on？

• v-on 是 Vue 用來監聽 事件 的指令。
• 當使用者觸發某個動作（例如點擊、輸入、滑鼠移動），v-on 就能呼叫我們事先定義好的方法，讓程式「做出回應」。

你可以把 v-on 想像成 宇宙飛船的控制台：

• 按下某個按鈕（事件），就會啟動對應的功能（方法）。
• 比如「點擊星球 → 彈出訊息」、「滑鼠移過星星 → 星星變亮」。

2)常見的 v-on 指令縮寫

其實 v-on 就是「事件綁定」，而 @ 是它的縮寫，所以 v-on:click = @click。

3)常見的 v-on 指令縮寫

.once範例：

<button @click.once="sayHi">click me</button>

4)v-on 範例：點擊星球觸發流星雨

<template>
  <div>
    <h2>🌌 銀河互動實驗</h2>
    <ul>
      <!-- 點擊某個星球時，呼叫 showMessage -->
      <li 
        v-for="planet in planets" 
        :key="planet"
        @click="showMessage(planet)"
      >
        🪐 {{ planet }}
      </li>
    </ul>

    <p v-if="message">{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 星球清單
const planets = ref(['水星', '金星', '地球', '火星', '木星'])

// 訊息
const message = ref('')

// 當點擊星球時觸發
function showMessage(planet) {
  message.value = `✨ 你剛剛點擊了 ${planet}，流星雨劃過銀河！`
}
</script>

結果:
點擊「水星」會顯示：☄️ 你剛剛點擊了 水星，流星雨劃過銀河！
點擊「地球」會顯示：🌍 你剛剛點擊了 地球，流星雨劃過銀河！

5)總結

v-on 是 Vue 處理事件的核心指令，讓畫面和使用者的動作串起來。
明天我們要來試試「如果點擊次數超過 3 次，要不要顯示一個特別訊息？」、「如果地球數據改變，能不能馬上計算出新的結果？」這些需求，靠 v-on 太麻煩了。這時需要 computed 與 watch，讓 Vue 自己幫我們算、幫我們盯資料～

參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3