JavaScript All-in-One For Dummies

Chapter 5

Responding to Events

IN THIS CHAPTER

Setting event listeners

Emitting events

Handling events

Using 2-way binding

Bindings Forms

“There are many events in the womb of time, which will be delivered.”

—WILLIAM SHAKESPEARE

Events are what trigger changes to reactive data in Vue. Events can be fired by user input, by things that happen inside the browser, and in response to things happening inside a Vue instance. In this chapter, I show you how to listen for and handle events in Vue and how to bind form inputs to reactive data, and I describe how Vue's 2-way data binding works.

Setting Listeners with v-on

Event listeners in Vue components are created using the v-on directive. You can use v-on in two different ways: using inline handlers or using method handlers.

Inline handlers

Inline handlers resemble HTML's built-in event attributes, except that rather than start with on (as in onclick, onhover, or onload), they start with v-on or the shorthand for the v-on directive, ...