Gabriele Ferro Home

Vue.js First Steps

Day 87: 23 November 2020

After months spent studying the basics and fundamentals of web programming, I can finally get into the "Fantastic Realm of Front-End Frameworks".

The latest OpenClassRooms project will require the use of any framework, but the site suggests a course on Vue.js because of its extreme ease of use compared to its competitors.

Vue.js (or Vue) is a framework for building user interfaces and will allow us to build a Single-Page Application (SPA).

There are huge advantages to building a Single-Page Application compared to a classic web page:

The user downloads page 1 only once and the contents of the page are specifically updated, rather than reloading the entire page with each change. This allows for a better user experience due to its responsiveness and also to consider the considerable bandwidth savings.

**Today’s Progress:**

First of all before I started studying Vue I had to finish writing the code for the sixth OpenClassRooms project I started a few weeks ago...

The last piece of code I had to write is about the like/dislike system.

Then I started to follow this course (in French).

In a few hours I learned:

  1. How to instantiate a new instance of View.
  2. How to set up and manage a data store.
  3. How to use the calculated values to improve data management.
  4. How to use the directives to solve common problems.
  5. How to create reusable functions with methods.

Vue's ease of use is shocking. I used the CDN in development version as suggested in the course, to be able to use the warnings and debug mode (?)

With a few lines of code we can start creating our Single-Page Application right away!

In the object we can add other properties (attributes) and methods (functions). Having these data, we could insert and manipulate them inside our page.

For example, using computed properties we could calculate the total of our basket and show it inside the page.

And using the directives we could create a logical flow of programming that will affect the end user interface. In this way we could for example make a for loop that will show the products. And with an if we are going to show only the products available in stock.

We could also listen and respond to events and update the data of the forms dynamically.

At the end of this section of the course, the site gives me a list of things I've learned to do!

It's very useful if considered as a memo.

I have learned to:

  • install Vue on a web page without using build tools ;
  • set up a new instance of Vue ;
  • associate Vue to an HTML element ;
  • define a single data storage space ;
  • display data rendering using double braces.
  • reactive data and its importance in creating maintainable data in an application ;
  • how to use data to manage data in your Vue application. js ;
  • how to use computed properties (computed properties) to simplify your code and data management.
  • show and hide content ;
  • make a loop through a list of data and display the rendering of its content ;
  • update HTML attributes dynamically ;
  • listen to events you can respond to ;
  • create JavaScript functions that Vue. js can use ;
  • configure forms so that your data store is updated as the user interacts with it.


Being used to writing HTML, CSS and JavaScript the use of all these keywords that pollute the HTML document disturbs my soul.

**Link to tweet:**

[twitter-follow screen_name='20Gabriele20']

July 2024


Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.