Build Weather App with Vue CLI | For Vue JS beginners
Create a weather app using vue and fetching data from a Weather API.
Get current weather from a restful weather api and set weather animation.
Video covers how to use Vue Cli, set up Vue reactive data, Functions in Vue, Conditional rendering and Two-way binding
Timestamps
0:00-1:25 What we are building
1:25-4:15 Install Vue Cli and Create Project
4:15-6:43 Boilerplate of Vue CLI
6:43-7:52 Install bootstrap CSS to Vue CLI project
7:52-9:01 Import boostrap into project
9:01-10:42 Import custom CSS into project's Single file
10:42-13:10 Vue reactive data
13:10-15:59 Render reactive data in html tags
15:59-17:34 Two way binding (V-model)
17:34-19:08 Creating functions in Vue (Methods)
19:08-21:11 Add submit eventlistener to forms (V-on:click) and prevent form default behaviour
21:11-25:01 Fetch Api, Async and await
25:01-30:52 Update weather app(reactive data) with data from API
30:52-36:02 Change CSS class based on time of day with V-bind
36:02-40:07 Weather CSS animation based on current weather
40:07-43:28 Conditional rendering using V-if
43:28-48:47 Check for current weather and time of day
48:47-51:32 Handle errors for when no city is found
51:32-51:54 Credits
Resources
Full Code: https://github.com/somteacodes/weathe...
OpenWeatherMap API: https://openweathermap.org
Remember to install VueDev tools, its a browser extension, so just google it
Смотрите видео Build Weather App with Vue CLI | For Vue JS beginners онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь SomTea Codes 12 Октябрь 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 13,225 раз и оно понравилось 254 людям.