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" in the CONTRIBUTING.md document.
2. Review the steps for "Working on Tutorial Tasks" in the CONTRIBUTING.md document and use them to complete each of the tutorials below.
   • Be sure that you are making at least one commit for each video. Though, often it will make sense to make multiple commits per tutorial.
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 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 a specific style 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

1. Watch and follow along with the "Computed Properties and Watchers" video (14:11).
   • Note: The code in app.js and index.html that is shown in this video removes the input form binding examples that was been added in the previous videos. Leave those examples in the code that you turn in.
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.

1. Use the steps in the Completing a Tutorial section of the CONTRIBUTING.md document to submit your work on this tutorial. 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