Vue.Js로 나만의 날씨 앱을 만들어 보세요: 단계별로 웹 개발을 배워보세요!
Vue 2를 사용하여 자녀가 실제 날씨 앱을 만들 수 있도록 지원하세요! 재미있고 실습적인 수업에서 코딩 기본, API, 상호 작용을 배우게 되며, 젊은 웹 개발자에게 완벽합니다!
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 외 필요 앱/웹사이트
이 수업에서는 아웃스쿨 교실 외에도 다음의 툴을 사용합니다:
