使用 Vue.Js 建立您自己的天氣應用程式：逐步學習 Web 開發！
讓您的孩子使用 Vue 2 建立真實的天氣應用程式！他們將在有趣的實作課程中學習編碼基礎、API 和互動性，非常適合年輕的 Web 開發人員！
Tony P
平均評分：
5.0
評論數量：(2)
包含什麼
6 預錄課程
6 週
教師的支持1 年訪問權
到內容作業
每週 1 小時. Learners will be asked to complete further work on their application between sessions, but this is optional.完成證書
1堂 課程結束後我們無法翻譯此文，請刷新頁面並再試一次。
課堂經歷
英語程度 - B1
美國 8 - 12 年級
Beginner - Intermediate 等級
Get ready to create your own weather app in this exciting hands-on coding class! Using Vue 2, you'll learn how to build a functional web application that shows current weather and a forecast for any city in the United States. This course is perfect for young developers who want to explore real-world coding concepts while creating something cool and useful. By the end of this course, you’ll have your very own weather app, a solid understanding of Vue 2, and the confidence to tackle more coding projects.
學習目標
Achieve a basic familiarity with the Vue.js frameworkSolidify understanding of JSON
教學大綱
6 課程
超過 6 週課 1:
Introduction to Vue 2 and Setting Up the Project
Topics Covered:
Overview of Vue.js and its purpose.
Setting up a basic Vue 2 project with CDN.
Explanation of Vue components and data binding.
Creating the project folder structure and git repository.
Hands-On Activities:
Set up a basic Vue project.
Create a simple Vue component. 課 2:
Building the Basic App Structure
Topics Covered:
Vue templates and rendering lists.
Understanding Vue directives (v-bind, v-if, v-for).
Adding basic CSS styling for the app layout.
Hands-On Activities:
Create the app’s main layout (header, input field, results area).
Add a dynamic title or message using Vue’s reactivity. 課 3:
Fetching Weather Data from an API
Topics Covered:
What are APIs, and how do they work?
Introduction to the weather API
Using JavaScript's fetch() method within Vue.
Hands-On Activities:
Fetch weather data for a hardcoded city and display it in the app.
Discuss basic error handling. 課 4:
Making the App Interactive
Topics Covered:
Vue 2 event handling (v-on and methods).
Binding input fields with v-model.
Passing user input (like a city name) to the API call.
Hands-On Activities:
Add an input field where users can type a city name.
Fetch and display weather data based on user input. 其他詳情
先決條件
Students should be familiar with HTML, CSS, and JavaScript before attempting this class.
供應清單
Laptop / Computer with internet connection
外部資源
除了 Outschool 教室外，本課程也使用：
