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.
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
Enter to Rename, Shift+Enter to Preview
1
window.app = new Vue({
Enter to Rename, Shift+Enter to Preview
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
<title>Display dates</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="index.js"></script>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
1
new Vue({
Enter to Rename, Shift+Enter to Preview
1
*You should look hints only if your are stuck on the exercice!*
Enter to Rename, Shift+Enter to Preview
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
<title>Display dates</title>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<button v-on:click="pow">Pow</button>
</div>
<script src="index.js"></script>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
1
new Vue({
Enter to Rename, Shift+Enter to Preview
1
*You should look hints only if your are stuck on the exercice!*
Enter to Rename, Shift+Enter to Preview
Exercice 4
Tutorial: Template Syntax
Follow the instructions in the comments in index.html
Template syntax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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>
Enter to Rename, Shift+Enter to Preview
1
new Vue({
Enter to Rename, Shift+Enter to Preview
1
.red {
Enter to Rename, Shift+Enter to Preview
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
Exercice 5
Tutorial: Template Syntax
Follow the instructions in the comments in index.html
Template syntax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>
1
new Vue({
1
.red {
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
1
*You should look at hints only if your are stuck on the exercise!*
Exercice 6
Tutorial: Computed Properties and Watchers
(Work in progress)
Open Source Your Knowledge: become a Contributor and help others learn. Create New Content