Gabriele Ferro Home

Intro to Vue 2 - Part.2

Day 90: 29 November 2020

I was taking a course about Vue.js on OpenClassRooms (in French) but it gives so many things for granted, for example how to refactor the code and split it into Single File Components. For this reason the last time I looked for other learning resources, so that I could return to follow the course with more awareness.

So for now I continue to follow the introductory course to Vue 2 offered free of charge by Vue Mastery. Last time I had completed 4 lessons with their progressive method and I enjoyed it very much.

**Today’s Progress:**

I completed 4 more lessons following them step by step and sometimes I modified the code proposed during the explanations in order to rewrite it in different ways.

Writing the code for the first time, I tried to anticipate his explanations by writing the code before he showed it, to learn through intuition, trial and error.

This allowed me, for example, to better understand how I can create a Component in Vue. In this way, it should be easier for me to resume the OpenClassRooms Vue course and finally understand how to write a component in a single file.

As in any noteworthy course, we find at the end a summary of the skills and knowledge acquired:

  • The v-on directive is used to allow elements to listen for events
  • The shorthand for v-on is @
  • You can specify the type of event to listen for:
    • click
    • mouseover
    • any other DOM event
  • The v-on directive can trigger a method
  • Triggered methods can take in arguments
  • this refers to the current Vue instance’s data as well as other methods declared inside the instance
  • Data can be bound to an element’s style attribute
  • Data can be bound to an element’s class
  • We can use expressions inside an element’s class binding to evaluate whether a class should appear or not
  • Computed properties calculate a value rather than store a value.
  • Computed properties can use data from your app to calculate its values.

What else should we know?

Computed properties are cached, meaning the result is saved until its dependencies change. So when quantity changes, the cache will be cleared and the **next time you access the value of inStock , it will return a fresh result, and cache that result.

With that in mind, it’s more efficient to use a computed property rather than a method for an expensive operation that you don’t want to re-run every time you access it.

It is also important to remember that you should not be mutating your data model from within a computed property. You are merely computing values based on other values. Keep these functions pure.


Good to Know: You should not mutate props inside your child components.

  • Components are blocks of code, grouped together within a custom element
  • Components make applications more manageable by breaking up the whole into reusuable parts that have their own structure and behavior
  • Data on a component must be a function
  • Props are used to pass data from parent to child
  • We can specify requirements for the props a component is receiving
  • Props are fed into a component through a custom attribute
  • Props can be dynamically bound to the parent’s data
  • Vue dev tools provide helpful insight about your components


I had a quick look at the rest of the Vue Mastery course and unfortunately, being an introductory course, it does not cover components as single files or Vue CLI.

On the other hand I found another course and only 15 lessons out of 49 are blocked to non-paying users.

Obviously the lesson that interests me is not available…

**Link to tweet:**

[twitter-follow screen_name='20Gabriele20']

February 2024


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