The defining feature of Vue is reactivity: when your data changes, the page updates on its own, with no manual DOM code. This module shows how that works and how to connect data and the interface in both directions.
You will see data drive the page and update as users interact with it, use v-model for two-way binding between form inputs and your data, and meet ref and reactive, the two functions Vue 3 provides for declaring reactive state.
The first lessons use the Options API's data object. The last two give a
first look at ref and reactive, which are covered fully in the
Composition API module. Watch the lessons in order, then continue on to
Events, Methods & Forms.
The Net Ninja sets up Vue from a CDN, outputs data properties in a template, and updates them in response to click events.
Brad Traversy updates a task's data when the user interacts with it, and the page re-renders to match.
Building a form whose inputs are bound to your data with v-model, so typing updates state and state updates the inputs.
The Net Ninja looks at v-model for two-way data binding, plus keyboard events, in Vue forms.
The Net Ninja introduces the Composition API and its benefits over the Options API, the approach Vue 3 uses to declare reactive state with ref and reactive.
An optional deeper look: a talk that recreates reactive() and ref() from scratch to show how Proxy makes Vue's reactivity work.