weather_API_key

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

Gain insights into developing intermediate-level SPAs using Vue.js. Delve into directives, renderers, user input handlers, and components. Discover how to integrate backend servers, APIs, and databases through quizzes and challenges.

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

# Lifecycle hooks

When a `Vue` instance passes through its lifecycle, it offers some functions that are executed at every transitional step in the lifecycle so that certain tasks can be performed during these stages. These functions are called "lifecycle **hooks**".

There are a total of _eight_ lifecycle hooks. There are _two_ hooks for each lifecycle stage as shown below:

1. Creation hooks
   - `beforeCreate`
   - `created`
2. Mounting hooks
   - `beforeMount`
   - `mounted`
3. Updating hooks
   - `beforeUpdate`
   - `updated`
4. Destruction hooks
   - `beforeDestroy`
   - `destroyed`

We will talk about each hook separately.

# Creation hooks
## `beforeCreate`
The `beforeCreate` hook runs at the initialization of your component. `data` has not been made reactive and events have not been set up yet.
```
new Vue({
    el: '#app',
    data: {},
    methods: {},
    beforeCreate() {
         alert('Events and lifecycle have been initialized');
    }
})
```
In the above example, when the `beforeCreate` hook is run, this snippet will show an alert with the following message: Events and the lifecycle have been initialized. 

## `created`
This allows access to reactive data and events that are active with the `created` hook. Templates and virtual DOM have not yet been mounted or rendered.
```
new Vue({
    el: '#app',
    created() {
         alert('Vue instance have been created!');
    }
})
```
# Mounting hooks

## `beforeMount`
The `beforeMount` hook runs right before the initial render happens and after the template or render functions have been compiled.

```
new Vue({
    el: '#app',
    beforeMount() {
        console.log('vm.$el has not been created yet.')
    }
})
```
In the example above, when the `beforeMount` hook is run, the snippet will log the following message: 'vm.$el has not been created yet.'

## `mounted`
In the `mounted` hook, there is full access available to the reactive component, templates, and rendered DOM (via `this.$el`).

Use `mounted` for modifying the DOM—particularly when integrating non-Vue libraries.
```
new Vue({
    el: '#app',
    mounted() {
        console.log('vm.$el has been created and el has been replaced.')
    }
})
```
In the above example, the `mounted` hook runs and the snippet logs the following message: 'At this point, `vm.$el` has been created and `el` has been replaced.'

# Updating hooks
## `beforeUpdate`
The `beforeUpdate` hook runs after data changes on the component and the update cycle begins. This is before the DOM is patched and re-rendered.

Use `beforeUpdate` if you need to obtain the new state of any reactive data on your component before it actually becomes rendered.

```
new Vue({
    el: '#app',
    beforeUpdate() {
        console.log('Virtual DOM has not re-rendered or patched yet');
    }
})
```

## `updated`
The `updated` hook runs after data changes on your component and the DOM re-renders.

After a property change, use `updated` if needed access to the DOM.

```
new Vue({
    el: '#app',
    updated() {
        console.log('Virtual DOM has re-rendered and patched');
    }
})
```

# Destruction hooks
## `beforeDestroy`

`beforeDestroy` is fired before teardown. The component will still be fully present and functional.

If needing to clean-up events or reactive subscriptions, use `beforeDestroy`.

```
new Vue({
    el: '#app',
    beforeDestroy() {
        console.log('Watchers and event listeners have not been teared down yet.');
    }
})
```

## `destroyed`
By the time the `destroyed` hook is reached, there is practically nothing left on the component. Everything that was attached to it has been destroyed.

Use `destroyed` if you need any last minute clean-up or need to inform a remote server that the component was destroyed.
```
new Vue({
    el: '#app',
    destroyed() {
        console.log('Watchers and event listeners have been torn down');
    }
})
```

> **Congratulations!** 🎉🎊 You have completed your general review of the Vue.js lifecycle hooks.

We will talk about each hook separately.

# Creation hooks
## `beforeCreate`
The `beforeCreate` hook runs at the initialization of your component. `data` has not been made reactive and events have not been set up yet.
```
new Vue({
    el: '#app',
    data: {},
    methods: {},
    beforeCreate() {
         alert('Events and lifecycle have been initialized');
    }
})
```
In the above example, when the `beforeCreate` hook is run, this snippet will show an alert with the following message: Events and the lifecycle have been initialized. 

## `created`
This allows access to reactive data and events that are active with the `created` hook. Templates and virtual DOM have not yet been mounted or rendered.
```
new Vue({
    el: '#app',
    created() {
         alert('Vue instance have been created!');
    }
})
```
# Mounting hooks

## `beforeMount`
The `beforeMount` hook runs right before the initial render happens and after the template or render functions have been compiled.

```
new Vue({
    el: '#app',
    beforeMount() {
        console.log('vm.$el has not been created yet.')
    }
})
```
In the example above, when the `beforeMount` hook is run, the snippet will log the following message: 'vm.$el has not been created yet.'

## `mounted`
In the `mounted` hook, there is full access available to the reactive component, templates, and rendered DOM (via `this.＄el`).

Use `mounted` for modifying the DOM—particularly when integrating non-Vue libraries.
```
new Vue({
    el: '#app',
    mounted() {
        console.log('vm.$el has been created and el has been replaced.')
    }
})
```
In the above example, the `mounted` hook runs and the snippet logs the following message: 'At this point, `vm.＄el` has been created and `el` has been replaced.'

# Updating hooks
## `beforeUpdate`
The `beforeUpdate` hook runs after data changes on the component and the update cycle begins. This is before the DOM is patched and re-rendered.

Use `beforeUpdate` if you need to obtain the new state of any reactive data on your component before it actually becomes rendered.

```
new Vue({
    el: '#app',
    beforeUpdate() {
        console.log('Virtual DOM has not re-rendered or patched yet');
    }
})
```

## `updated`
The `updated` hook runs after data changes on your component and the DOM re-renders.

After a property change, use `updated` if needed access to the DOM.

```
new Vue({
    el: '#app',
    updated() {
        console.log('Virtual DOM has re-rendered and patched');
    }
})
```

# Destruction hooks
## `beforeDestroy`

`beforeDestroy` is fired before teardown. The component will still be fully present and functional.

If needing to clean-up events or reactive subscriptions, use `beforeDestroy`.

```
new Vue({
    el: '#app',
    beforeDestroy() {
        console.log('Watchers and event listeners have not been teared down yet.');
    }
})
```

## `destroyed`
By the time the `destroyed` hook is reached, there is practically nothing left on the component. Everything that was attached to it has been destroyed.

Use `destroyed` if you need any last minute clean-up or need to inform a remote server that the component was destroyed.
```
new Vue({
    el: '#app',
    destroyed() {
        console.log('Watchers and event listeners have been torn down');
    }
})
```

> **Congratulations!** 🎉🎊 You have completed your general review of the Vue.js lifecycle hooks.

Learn about the Vue instance lifecycle hooks.

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

Lifecycle Hooks

Lifecycle hooks