User Interaction in Vue.js

User Interaction is the fourth chapter of the free Vue.js tutorial. It covers how a Vue app reacts to clicks and keys, and how to build forms that check their input.

What each lesson covers:

• Events and Forms: @ and v-on, method and inline handlers, $event, key aliases, system keys and .exact, event modifiers, v-model on every control, .lazy, .number and .trim, submit and reset, validation rules, error messages and accessible errors with useId().

The lesson starts with events. You listen with v-on (or @), write inline and method handlers, handle mouse and keyboard events, and use modifiers such as .prevent, .stop and key modifiers. Then it turns to forms. You see how v-model keeps an input and your state in step, use it on text boxes, checkboxes, radio buttons and selects, and apply the .trim, .number and .lazy modifiers. It ends with submitting and resetting a form and showing clear validation messages.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

1. Events and Forms

   v-on and @, method and inline handlers, $event, key aliases, system keys, .exact and event modifiers, then v-model on every control, value bindings, .lazy, .number and .trim, submit and reset, validation rules, error messages, accessible errors with useId() and validation libraries.

   • Listen to events with @ and call methods with arguments
   • Read the event object with $event
   • Bind every kind of form control with v-model
   • Validate input, show accessible error messages and disable submit