2024-12-24 旅行分帳應用程式-步驟02

發表於 閱讀次數：
2024-12-24 旅行分帳應用程式-步驟02

2024-12-24 旅行分帳應用程式-步驟02

從 Vue 3 + Composition API + <script setup> 開始，一步步帶你上手。

🚀【第一步】基礎元件：分帳畫面框架

我們從之前的畫面，改寫成 Composition API 的語法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- SplitBill.vue -->
<template>
  <div class="app-container">
    <!-- 上方: 標題 -->
    <div class="header">
      <h1>旅行分帳應用程式</h1>
    </div>

    <!-- 中間: 成員清單 -->
    <div class="member-list">
      <h2>分帳成員</h2>
      <ul>
        <li v-for="member in members" :key="member">
          {{ member }}
        </li>
      </ul>
    </div>

    <!-- 下方: 新增成員按鈕 -->
    <div class="bottom-section">
      <button class="btn" @click="addMember">➕ 新增成員</button>
    </div>
  </div>
</template>

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

// Vue 3 Composition API：定義成員清單
const members = ref(['小明', '小美'])

// 暫時簡單新增一個假成員
function addMember() {
  members.value.push('新成員')
}
</script>

<style scoped>
/* ... 保留你原本的樣式 ... */
</style>

✅ 結果

  • ref([]) 是用來儲存成員清單的 Vue 3 變數（reactive）
  • @click="addMember" 是點按鈕就會新增一筆資料
  • 你點按一次 ➕ 按鈕，畫面就會多一個「新成員」

下一步你想做什麼？

  1. 🔤 改成可以「輸入名字」再新增
  2. 💸 加入「支出紀錄」
  3. 💾 學會存進 localStorage
  4. 📱 把畫面變漂亮＋響應式設計（手機用）

或你想照之前的步驟繼續走也可以，我可以一步步帶你組裝起來 😄
你想繼續哪一部分呢？

很棒的問題！🌟
你看到的這個 : 冒號，在 Vue 裡面是縮寫語法，它的全名是 v-bind:。

✅ : 在 Vue 中的功能是？

: 是 v-bind 的簡寫，用來「綁定變數到 HTML 屬性」上。

🔍 看一個例子

1
2
<!-- 綁定字串，寫死 -->
<li :key="'user-' + index">{{ user.name }}</li>

這段等於：

1
<li v-bind:key="'user-' + index">{{ user.name }}</li>

也就是把 key 綁定到動態變數 'user-' + index。

📌 常見用法舉例

Vue 寫法 等價寫法 意思是…
:src="imgUrl" v-bind:src="imgUrl" 把變數 imgUrl 的值當作圖片路徑
:class="myClass" v-bind:class="myClass" 根據變數控制 class 名稱
:style="styleObj" v-bind:style="styleObj" 動態指定 style 屬性
:key="item.id" v-bind:key="item.id" 給 v-for 每個元素一個獨一無二的 key

🎯 所以在這裡：

1
<li v-for="member in members" :key="member">

這就是告訴 Vue：「這個 list 裡，每個項目的 key 是 member 值」，用來追蹤 DOM 的變動，以提升效能和避免錯誤。

如果你還不太確定 v-bind 跟 : 的用途，我可以設計幾個簡單的練習給你玩玩 🔁
你想練習一下 v-bind: 嗎？還是繼續往下寫「新增成員功能」？