Gabriele Ferro Home

Intro to Vue 2

Day 89: 27 November 2020

**Today’s Progress:**

I continue to study Vue.js using different resources.

I have studied the introductory part of the official documentation following it step by step. Each section recommends to try the code and follow a tutorial through Scrimba... Scrimba?!

I discovered Scrimba! Unbelievable... it looks like dark magic!

The first course I took on Scrimba I was unable to complete it… Maybe because the tutorial is based on concepts that are not really applicable (Harry Potter casting spells) and maybe because the person who speaks laughs every 20 seconds (?)

Then, I took advantage of the suggestion given by the documentation and followed this course offered for free by Vue Mastery. I'm currently at 4/11 but it looks very promising!

In this course they explain in a progressive way (my favorite method!) how to build a small web application that simulates an online store.

Also at the end of each section, we find a very useful summary if it will be used as memo. And this is what I learned in only 4 lessons!!!

What have we learned?

  • How to begin writing a Vue application with a Vue instance, and how to load basic data onto the webpage
  • The Vue instance is the root of every Vue application
  • The Vue instance plugs into an element in the DOM
  • The Vue instance’s data can be displayed using the mustache-like syntax {{ }} called an expression
  • Vue is reactive
  • Data can be bound to HTML attributes
  • Syntax is v-bind: or : for short
  • The attribute name that comes after the : specifies the attribute we’re binding data to
  • Inside the attribute’s quotes, we reference the data we’re binding to.
  • There are Vue directives to conditionally render elements:
    • v-if
    • v-else-if
    • v-else
    • v-show
  • If whatever is inside the directive’s quotes is truthy, the element will display
  • You can use expressions inside the directive’s quotes
  • V-show only toggles visibility, it does not insert or remove the element from the DOM
  • The v-for directive allows us to iterate over an array to display data.
  • We use an alias for the element in the array being iterated on, and specify the name of the array we are looping through. Ex: v-for="item in items"
  • We can loop over an array of objects and use dot notation to display values from the objects
  • When using v-for it is recommended to give each rendered element its own unique key


I'm glad I found this course on Vue Mastery because it's exactly what I was looking for!

**Link to tweet:**

[twitter-follow screen_name='20Gabriele20']

June 2024


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