weather_API_key

The API key used for weather application in lesson 'Getting Data From External API'

Gain insights into developing intermediate-level SPAs with Vue.js. Learn about directives, renderers, user input handlers and components. Delve into creating a functional SPA with backend interaction.

VueApp.tar.gz

Backend

JSFrontEnd

JSFrontEnd2

Vue/Cli

Vue/Cli-copy

JSFrontEnd2-copy

JSFrontEnd2-copy-uhx0gq

JSFrontEnd2-copy-rjwkor

This course will provide you with the necessary skills to develop intermediate-level Single Page Applications (SPA) by using Vue.js. 

You will start with an introduction to Vue.js, why it is useful, and an explanation of its basic structure. After that, you will cover some crucial materials around Vue.js like directives, renderers, user input handlers, and Vue components.

Finally, you will combine all these concepts together to make a Single Page Application that interacts with a backend server, APIs, and a database.

Throughout the course you will find quizzes and coding challenges to help strengthen your grasp of all the concepts.

Hands-on Vue.js: Build a fully functional SPA

## Problem
In the below-provided application, a demo website containing information about some animals for children is presented. 

In the application, three components: `Cat`, `Dog`, and `Rabbit` are defined. All three components have three `data` variables: `name`, `numLegs`, and `animalType`. The `name` of the three animals is different but their `numLegs` and `animalType` are the same since this application is displaying _domestic_ animals having _four_ legs.

Observe that the `numLegs` and `animalType` variables are repeated in all three components. However, this can be done in a better way so that the code can be more compact and future changes can be done easily and without changing every component individually.

Please run the application below and observe the code.

# Problem
In the below-provided application, a demo website containing information about some animals for children is presented. 

In the application, three components: `Cat`, `Dog`, and `Rabbit` are defined. All three components have three `data` variables: `name`, `numLegs`, and `animalType`. The `name` of the three animals is different but their `numLegs` and `animalType` are the same since this application is displaying _domestic_ animals having _four_ legs.

Observe that the `numLegs` and `animalType` variables are repeated in all three components. However, this can be done in a better way so that the code can be more compact and future changes can be done easily and without changing every component individually.

Please run the application below and observe the code.

Test the skills learned in this chapter by taking the coding challenge.

Commencing the Journey: Introductions and Conventions

Why Use JavaScript Front-end Frameworks?

Basic Structure of Vue.js App

Vue Directives, Bindings, And Reactivity

Handling User Input and Event Handlers

Vue Components

Interaction With Backend Server (Database and API)

The Final App

Assessment on Vue.js

Authentication With Vue.js Using Auth0

Coding Challenge: Components

Problem