Getting started with Vue

Posva

16.2K views

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

Next: Day 2

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.

Display Time

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
  <!-- Let's include the last version of Vue -->
  <script src="https://unpkg.com/vue"></script>
  <title>Vue Hello world</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
  <script src="index.js"></script>
</body>
</html>

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.

Display Time

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

Display Time

Exercice 4

Tutorial: Template Syntax

Follow the instructions in the comments in index.html

Template syntax

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <script src="https://unpkg.com/vue"></script>
  <title>Display dates</title>
</head>
<body>
  <div id="app">
    <ul>
      <!-- Replace ... with the name of the company in the instance's data -->
      <li>The best company in the world is ...</li>
      <!-- Replace ... with x multiplied by y using x and y from the instance's data -->
      <li>x * y is ...</li>
      <!-- Replace ... with the result of 2 * x using x from the instance's data and multiplyBy2 from the instance's methods -->
      <li>x multiplied by 2 is ...</li>
      <!-- Write a method multiplyBy3 and use it to display 3 * y using y from the instance's data -->
      <li>y multiplied by 3 is ...</li>
      <!-- Replace ... with a capitalized sentence1 using the filter capitalize and the data sentence1 -->
      <li>...</li>
      <!-- Write a filter called reverse that will reverse a string and use it to display a reversed sentence2 -->
      <li>...</li>
      <!-- Use both filters to capitalize and reverse sentence3 from the instance's data -->
      <li>...</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

Exercice 5

Tutorial: Template Syntax

Follow the instructions in the comments in index.html

Template syntax

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <script src="https://unpkg.com/vue"></script>
  <title>Display dates</title>
</head>
<body>
  <div id="app">
    <ul>
      <!-- This should be displayed if the age is lower than 18 -->
      <li>I am a minor</li>
      <!-- This should be displayed if the age is greater of equal than 18 -->
      <li>I am an adult</li>
      <!-- When the button is clicked, the method `displayAlert` must be called -->
      <li><button>Click on me!</button></li>
      <!-- The span must have the class which name is equal to the value of colorClass (from the instance's data) -->
      <li>The following element has the class {{ colorClass }}: <span>Hello</span></li>
      <!-- The content of the span should be the same as the variable htmlContent but the HTML must be interpreted -->
      <li>The following element has its HTML content injected: <span></span></li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

Exercice 6

Tutorial: Computed Properties and Watchers

(Work in progress)

Open Source Your Knowledge: become a Contributor and help others learn. Create New Content

Open Source Your Knowledge, Become a Contributor

1/6 Day 1

Vue.js - Day 1

Resources

Learning goals

Exercices

Exercice 1

Exercice 2

Exercice 3

Exercice 4

Exercice 5

Exercice 6

Exercice Javascript

JavaScript Array Methods

Module 288 : Utilisation des techniques de programmation dans le Frontend Web

LADAPT Rhône-Métropole de Lyon - Prépa Num. - Parcours Découverte Javascript