One Day Introduction to Vue.js with Hassan Djirdeh [Workshop]

The Vue Instance


In this lesson, Hassan teaches about:

  • Methods: bound to instance and behave like normal JS functions. They are only evaluated when explicitly called.
  • Computed Properties: used to handle complex calculations to data that need to be displayed in the view.
  • Watchers: allow us to react to data changes.
  • Lifecycle Hooks: named functions that occur throughout the lifecycle of a Vue instance including beforeCreate, beforeMount, beforeUpdate, and beforeDestroyed.
Exercise I: Computed and Created Hook

Now it's time to try using the created lifecycle and computed properties on your own!

  • Dynamically retrieve content from
  • Render a list of user cards with the help of the v-for directive.
  • Use a computed property to have the users list be ordered in reverse (e.g. Array.reverse()).

Starter code:

Exercise II: Watchers

Nice work so far! Now try this exercise with watchers:

  • Use the Watch property to derive the other input value (i.e. comparison between kilometers and meters) when the user is entering in one of the inputs.
  • Note: Do we need to use watchers?

Starter code:


I finished! On to the next chapter