Chapter 3. Adding interactivity
This chapter covers
- Deriving new output from data with computed properties
- Adding event bindings to the DOM
- Observing data during the update portion of the Vue lifecycle
- Responding to user interaction
- Conditionally rendering markup
Believe it or not, now that we’ve got our first product all wired up, we’re ready to add interaction to our webstore.
Adding interactivity to an application means binding to DOM events, responding to them in application code, and providing feedback to users about what happened because of their actions. Vue creates and manages all the event and data bindings for us, but there are decisions we need to make about how to manipulate data within our application, as well as how to meet user expectations in our interface.
We’ll begin exploring user interaction by letting customers add our single product to a shopping cart, but along the way we’ll also look at how our work fits into the overall picture of a Vue application.
To get a feel for where we’re headed in this chapter, figure 3.1 shows how the application will look when all our work is done.
;%22/%3E%3C/svg%3E)
Before we can build any of our super-cool shopping cart functionality, we’ll need a container to hold all those items in our application instance. Fortunately, all we need at this stage is a simple array, onto which we’ll push our products.