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 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()).
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?