Tutorial 03 - Vue.js 2

[braughtg]

Tutorial 03 - Vue.js 2

In this tutorial you will expand your knowledge of Vue.js to include:

• Event handling
• Attribute binding
• Input form binding
• Computed properties and watchers

Getting Started

The tasks below will remind you how to get your codespace up and running and how to work though the tutorials. You should be starting to internalize this process making you less reliant on reading the detailed instructions each time.

Tasks

1. Follow the steps for "Starting a Tutorial."
2. Review the steps for "Working on Tutorial Tasks" and use them to complete each of the tutorials below.
3. Open Susan Buck's Vue.js Simplified Course.

Event Handling

This video digs deeper into how to handle events using the Vue v-on directive that you saw earlier.

Tasks

1. Watch and follow along with the "Event Handling" video (11:54).
2. Self Check:
   a. Review: When do you need to prefix the names of Vue data properties with this and when do you not?
   b. What is an event and what are some examples of events that might occur?
   c. What Vue directive is used to assign an event hander to an event?
   d. What is the syntax for passing information about an event to the method that is handling the event?

Attribute Binding

This video shows how you can set and change the attributes and styles of HTML elements programmatically.

Tasks

1. Watch and follow along with the "Attribute Binding" video (16:08).
2. Self Check:
   a. What are HTML attributes? Where to they appear in your code?
   b. What does attribute binding allow you to do in code?
   c. What is the syntax for binding an attribute to a Vue data property?
   d. What is the syntax for binding an HTML element's CSS style or class to a Vue data property?
   e. In the example of setting the background color of the text field do you prefer the approach of binding the CSS class or the approach of binding the specific "background-color" style? Why?

Form Input Binding

As you've seen earlier, HTML has a lot of different form input elements. Form input binding in Vue connects your Vue data properties to the values of the input elements.

Tasks

1. Watch and follow along with the "Form Input Binding" video (12:53).
   • Note: One of the examples uses a collection of Latin words which the spell checker will not know. Change the text to English words so that the pre-commit hook will pass.
2. Self Check:
   a. Review: What does the v-model Vue directive do?
   b. What input form elements have you seen? What is the syntax for each?

Computed Properties and Watchers

Computed properties in Vue are functions that compute and return a new value based on existing data properties. Computed properties are reactive and thus are recomputed any time the data properties on which they rely are changed.

Tasks

NOTE: When Susan starts this video, she has already removed much of the illustrative example code added in the prior video. You should leave all of that code in place as evidence of your work. Do not delete it. Just add the new code from this video to what you have from the prior video.

1. Watch and follow along with the "Computed Properties and Watchers" video (14:11).
2. Self Check:
   a. What is a computed property in Vue and and what is the syntax for creating one?
   b. What is a watcher in Vue and what is the syntax for creating one?
   c. What are the primary use cases for methods, computed properties, and watchers?

Turning in Your Work

Once you have finished all of the work in this tutorial you will need to officially submit it.

Task

1. Use the steps for "Completing a Tutorial" to submit your work. You should be starting to internalize this process making you less reliant on reading the detailed instructions each time.

---

This Tutorial is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License