Two-way data binding in Vue.js lets you keep an input and a variable perfectly synchronized in real time, without writing extra JavaScript glue. You'll learn how to combine v-bind, v-on and the v-model directive to build reactive components that respond instantly to user input, ideal for forms, message previews and any UI that mirrors state.

¿Cómo conectar una variable con la vista en Vue.js?

Todo arranca con una variable dentro de la función data y un template que la renderice. En el ejemplo se declara text con el valor Hello Vue y se muestra dentro de un párrafo. Al refrescar el navegador, el texto aparece en pantalla porque Vue ya está observando esa variable como parte del estado del componente.

Hasta acá no hay magia: es una variable reactiva expuesta al template. La pregunta interesante llega cuando quieres que un input modifique ese mismo valor.

¿Cómo capturar cambios del input con v-on?

El primer intento usa la directiva v-on con el evento nativo change. Se conecta a un método input que recibe el evento y, a través de event.target.value, accede al texto que el usuario escribió.

Ese valor se asigna a this.text y la vista se actualiza. El detalle es que change solo dispara cuando haces clic fuera del campo, así que la actualización no se siente instantánea.

¿Cuál es la diferencia entre el evento change y el evento input en Vue? change se dispara cuando el campo pierde el foco, mientras que input se dispara con cada tecla presionada. Para reactividad en tiempo real, usa input.

Cambiar v-on:change por v-on:input resuelve el problema: cada tecla actualiza la variable y el párrafo refleja el cambio al instante. Esa fluidez es una de las señas de identidad de Vue.

¿Para qué sirve v-bind en un input de texto?

Leer el valor del input es solo la mitad del trabajo. Para que la variable también empuje datos hacia el campo, necesitas v-bind:value="text". Así, si text ya tiene un valor inicial, el input lo muestra desde el primer render.

Sin v-bind, el campo aparece vacío aunque la variable tenga contenido, y al recargar la página pierdes la sincronización inicial. Con v-bind, cualquier cambio en text, venga de donde venga, se refleja en el input.

Piensa en una app tipo WhatsApp con vista previa de mensajes: el usuario escribe, la variable se actualiza, y otro componente puede leer ese mismo valor para mostrar el preview. Ese flujo bidireccional es lo que habilita casos de uso reales.

¿Cuáles son los shorthands de v-on y v-bind?

Escribir v-on: y v-bind: en cada atributo se vuelve repetitivo. Vue ofrece aliases para acortar el código:

• v-bind:value se abrevia como :value, usando dos puntos.
• v-on:input se abrevia como @input, usando arroba.
• Confundir el orden lanza errores en consola, así que recuerda: dos puntos para atributos, arroba para eventos.

Estos shorthands no cambian el comportamiento, solo hacen el template más legible.

¿Qué es v-model y cómo simplifica la reactividad?

La combinación de :value con @input apuntando a la misma variable es tan común que Vue la encapsula en una sola directiva: v-model. Con v-model="text" ya no necesitas el handler manual ni el binding del valor; Vue se encarga de leer y escribir en ambas direcciones.

El resultado es código más corto, más declarativo y con menos puntos de fallo. La variable y el input quedan unidos en un solo enlace bidireccional.

¿Qué hace v-model en Vue.js? Sincroniza un input con una variable del estado en ambas direcciones. Reemplaza la combinación manual de :value y @input con una sola directiva.

¿Cuándo conviene usar v-model en lugar de v-bind y v-on por separado? Úsalo siempre que necesites two-way binding entre un input y una variable. Reserva :value y @input por separado solo cuando requieras lógica adicional dentro del handler.

¿Por qué importa la reactividad declarativa en Vue?

La reactividad declarativa significa que describes qué quieres mostrar y Vue se ocupa del cómo. No escribes listeners manuales, no manipulas el DOM, no sincronizas estados a mano. Defines la variable, la enlazas con v-model y el framework hace el resto.

Esto se traduce en menos código, menos bugs y un ciclo de desarrollo más rápido. Y como Vue es un framework progresivo, puedes empezar usando solo estas directivas básicas y seguir sumando funcionalidades a medida que tu proyecto crece.

Practica replicando el ejercicio: crea una variable, enlázala con v-model a un input y observa cómo el párrafo se actualiza tecla por tecla. Cuéntame en los comentarios qué componente reactivo se te ocurre construir con lo aprendido hasta acá.