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 Vue app, there are five buttons inside a `div`. All buttons and the `div` have `v-on:click` event listeners that display alerts with a customized message. When the buttons are clicked, the event handler of the buttons is triggered but after that, the event handler of the parent `div` is also triggered.

Prevent the event handler of parent `div` to trigger **only** when any of the buttons are clicked. One means of accomplishing this is to use the `.stop` modifier with all the buttons. But in this case, modifiers need to be used with all buttons.

This task can also be carried out in a much simpler way by using only **one** event modifier. Try performing this without using `.stop` with all the child elements (buttons).

# Problem
In the below provided Vue app, there are five buttons inside a `div`. All buttons and the `div` have `v-on:click` event listeners that display alerts with a customized message. When the buttons are clicked, the event handler of the buttons is triggered but after that, the event handler of the parent `div` is also triggered.

Prevent the event handler of parent `div` to trigger **only** when any of the buttons are clicked. One means of accomplishing this is to use the `.stop` modifier with all the buttons. But in this case, modifiers need to be used with all buttons.

This task can also be carried out in a much simpler way by using only **one** event modifier. Try performing this without using `.stop` with all the child elements (buttons).

Test the concepts learned in this chapter by solving 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: Event Handling

Problem