2025-03-04-天氣查詢應用程式」的 **功能規格與開發目標

我們來重新整理你這次的「天氣查詢應用程式」的 功能規格與開發目標，並一步步協助你完成（使用 Vue 3 + Composition API）：

---

✅【最終功能規格】

畫面必須包含以下：

1️⃣ 頁面元件

• <select> 下拉式選單（可選擇城市）

• 預設顯示三個縣市（例如：臺北市、臺中市、高雄市）

• 顯示下列天氣資訊：

  • ☁️ 天氣現象（Wx）
  • 🌧️ 降雨機率（PoP）
  • 🔥 最高溫度（MaxT）
  • ❄️ 最低溫度（MinT）

---

✅【實作重點】

你會學到以下技術：

• fetch() 串接中央氣象局 API（F-C0032-001）
• 使用 ref() 管理狀態
• onMounted() 時預先抓資料
• 利用 computed() 或篩選方法取得城市資料
• 使用 v-for 渲染 <option>
• 使用 v-model 綁定選擇的城市
• 使用 v-if 顯示查詢結果

---

🧠 開發步驟建議（分階段）

步驟	說明
第 1 步	成功連線 API（用 fetch()），印出 data.records.location
第 2 步	過濾出三個指定城市（用 .find()）
第 3 步	將城市顯示成下拉選單 <select>（用 v-for）
第 4 步	根據選擇的城市，顯示 Wx、PoP、MinT、MaxT
第 5 步	完善畫面樣式（漸層背景、天氣圖示） ←（可之後補）

---

🔧 接下來怎麼做？

你已經具備 API 串接與分析 JSON 結構的能力，
我們現在要從「第 1 步：成功連線 + 顯示三個城市」開始。

✅ 任務第 1 步：成功取出三個城市的資料（只抓這三個）

你可以先這樣寫（WeatherQuery.vue）：

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

const apiKey = '你的 API Key'
const url = `https://opendata.cwa.gov.tw/api/v1/rest/datastore/F-C0032-001?Authorization=${apiKey}`

const allCities = ['臺北市', '臺中市', '高雄市']
const weatherData = ref([]) // 存放三個城市的天氣資料
const selectedCity = ref('臺北市') // 預設選第一個

onMounted(async () => {
  try {
    const response = await fetch(url)
    const data = await response.json()
    const locations = data.records.location

    // 只保留三個指定城市的資料
    weatherData.value = locations.filter(loc =>
      allCities.includes(loc.locationName)
    )
  } catch (err) {
    console.error('❌ 發生錯誤', err)
  }
})
</script>

你可以加個 <pre>{{ weatherData }}</pre> 先看資料是否抓到三個城市。

---

📌 接下來要做的：

• ✅ 用 <select> 做城市選單（v-model 綁定）
• ✅ 顯示對應城市的 Wx、PoP、MinT、MaxT
• ✅ 美化畫面（背景、圖示）