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

The Vue Instance

PRO

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!

Goals
  • Dynamically retrieve content from https://jsonplaceholder.typicode.com/users.
  • 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: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/02-vue-instance-II/exercise/computed-and-created-hook/starting-point

Exercise II: Watchers

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

Goals
  • 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: https://github.com/djirdehh/intro-to-vue-workshop/tree/master/02-vue-instance-II/exercise/watchers