Getting started with Vue

Vue.js - Day 1

Resources

• Vue.js: Introduction
• Vue.js: The Vue Instance
• Vue.js: Template Syntax
• Vue.js: Computed Properties and Watchers

Learning goals

After theses courses, you will:

• Understand what is Vue.js and in which case it is used
• Be able to create your first Vue.js application
• Understand the steps used by Vue.js (lifecyle)
• Learn how to use the Vue.js syntax
• Use directives, filters, computed properties and watchers

Exercices

Exercice 1

Instead of displaying Hello Vue, display Hola Ironhack just by changing the index.js file.

Exercice 2

Instead of displaying Hello Vue, display the current time like this: The current time is 09:42 (if the hour is 09:42). Don't worry if the time is not dynamically updating.

Exercice 3

Tutorial: Instance-Lifecycle-Hooks

Add the following lifecyle hooks in the index.js file and display the value of number in the console to see what happens:

• created
• mounted
• beforeUpdate
• updated
• destroyed

Exercice 4

Tutorial: Template Syntax

Follow the instructions in the comments in index.html

Exercice 5

Tutorial: Template Syntax

Follow the instructions in the comments in index.html

Exercice 6

Tutorial: Computed Properties and Watchers

(Work in progress)