昨天我們在組件星雲中學會了「單向通信」：
props：父傳子資料
emit：子傳父事件

但是，如果父元件和子元件能自然地「保持同步」，就像兩顆被引力牽引的雙星，那不是更方便嗎？
今天，我們要認識 Vue 的三個核心指令：v-bind、v-on、v-model，以及v-bind、v-on與props、emit差別，最後如何用 v-model 實現資料與畫面的雙向綁定。

v-bind、v-on、v-model 的關係

1)v-bind — 單向通信（資料 ➡ 畫面）
解釋：v-bind把 JavaScript 的資料綁定到 HTML 元素或元件屬性上。

<p v-bind:title="message">滑鼠移過來看看提示</p>
<!-- 簡寫 -->
<p :title="message">滑鼠移過來看看提示</p>

當 message = "Hello Vue"，title 屬性會自動顯示 Hello Vue。

2)v-on — 事件監聽（畫面 ➡ 程式）
解釋：監聽 DOM 事件，把使用者的操作傳回 JavaScript 方法。

<button v-on:click="sayHi">點我</button>
<!-- 簡寫 -->
<button @click="sayHi">點我</button>

當使用者按下按鈕，會觸發 sayHi() 方法。

3)v-model — 雙向通信（資料 ⭤ 畫面）
解釋:v-model 是 v-bind + v-on 的語法糖，讓資料和畫面之間形成「雙向綁定」。

<input v-model="message" />

等於

<input :value="message" @input="event => message = event.target.value" />

當 message 改變時，輸入框會跟著更新；反過來輸入框有變動，message 也會更新。

v-bind、v-on與props、emit差別

v-bind、v-on → 模板語法（在模板裡用的指令，像工具）
props、emit → 元件機制（Vue 提供的 API，用來讓元件之間交換資料與事件）

v-model實作範例：宇宙登記表

修改src/App.vue程式碼:

<template>
  <main>
    <h1>🌠 宇宙通訊中心</h1>

    <label>
      星球名稱：
      <input v-model="planet" placeholder="請輸入星球名稱" />
    </label>

    <label>
      是否可居住：
      <input type="checkbox" v-model="habitable" />
    </label>

    <label>
      星球類型：
      <select v-model="planetType">
        <option>岩石行星</option>
        <option>氣態巨星</option>
        <option>冰原行星</option>
      </select>
    </label>

    <hr />

    <h2>🛰️ 即時回報</h2>
    <p>星球名稱：{{ planet }}</p>
    <p>是否可居住：{{ habitable ? "✅ 是" : "❌ 否" }}</p>
    <p>星球類型：{{ planetType }}</p>
  </main>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      planet: "",
      habitable: false,
      planetType: "岩石行星"
    }
  }
}
</script>

<style scoped>
main { max-width: 600px; margin: 40px auto; line-height: 1.8; }
label { display: block; margin-bottom: 16px; }
input, select { margin-left: 8px; padding: 4px 8px; }
</style>

執行結果
當你在輸入框輸入「火星」→ 畫面立即顯示「星球名稱：火星」。
勾選「是否可居住」→ 畫面會即時顯示 ✅ 或 ❌。
切換星球類型下拉選單 → 畫面同步更新。

今天的 v-model 是不是超方便？資料改 → 畫面就會跟著變。
不過，有時候我們還要「決定要不要出現這個東西」。
明天我們就來看 v-if / v-show，教你怎麼控制畫面要顯示還是隱藏。

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