v-model: Two-Way Binding Internals
v-model compiles to :modelValue + @update:modelValue, custom v-model names, v-model on components.
What v-model Really Is
v-model looks like magic two-way binding, but it is just shorthand for a value binding plus an event listener. Understanding what it expands to lets you use it on inputs and custom components alike.
v-model on a Text Input
On a native input, v-model binds the value and listens for input events. These two lines are equivalent.
<!-- shorthand -->
<input v-model="text" />
<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />All lessons in this course
- v-model: Two-Way Binding Internals
- v-on Event Modifiers
- v-bind Dynamic and Multiple Bindings
- Writing Custom Directives