Qué es data binding en Vue.js

Aprende a sincronizar datos entre tu interfaz y la lógica con data binding. Aquí verás cómo V-model y VBind conectan valores y atributos del HTML con propiedades del view model, para que cada cambio se refleje al instante gracias a la reactividad.

¿Qué es data binding y cómo funciona la reactividad?

La idea central es simple: enlazar datos entre la vista y el código en ambas direcciones. Cuando algo cambia en el código, la vista se actualiza sola; cuando el usuario escribe o interactúa, esos cambios se reflejan en tu lógica sin esfuerzo.

• Reactividad: actualiza la UI automáticamente cuando cambian las propiedades del view model.
• Entrada del usuario: tipado en un input o eventos que modifican datos.
• Expresiones: muestran valores en el HTML, por ejemplo, una variable en un párrafo.
• Sincronización: del código a la vista y de la vista al código.

¿Cómo usar v-model para enlazar inputs?

Con V-model puedes conectar campos de texto como input, textarea o select a una propiedad del view model. Así, lo que el usuario escribe queda sincronizado con tu dato.

¿Qué preparar en el HTML y en el objeto data?

Crea un input y conéctalo a una propiedad llamada name. En el objeto data, define name con valor vacío.

<div id="app">
  <input v-model="name" />
</div>

// dentro de data
{
  name: ''
}

• La propiedad debe existir en el objeto data.
• El valor inicial puede ser vacío.
• La escritura del usuario actualiza name al instante.

¿Cómo ver los cambios en la UI con una expresión?

Muestra la propiedad usando una expresión dentro de un párrafo. Al escribir, la vista se actualiza automáticamente.

<p>{{ name }}</p>

• Expresión: imprime el valor actual de name.
• Feedback inmediato: la UI refleja cada cambio.

¿Para qué sirve v-bind y cuándo usar el shorthand?

VBind enlaza cualquier atributo HTML con una propiedad del view model. Es ideal para valores dinámicos como href, src, class o disabled.

¿Cómo enlazar atributos como href a una propiedad?

Crea un anchor y usa VBind sobre href para tomar el valor de URL. Asegúrate de definir URL en el objeto data.

<a v-bind:href="URL">link</a>

// dentro de data
{
  URL: 'https://platzi.com'
}

• Si la propiedad no existe, el atributo queda vacío.
• Al actualizar URL en el código, href cambia en la UI.
• Funciona con cualquier atributo HTML compatible.

¿Cómo abreviar v-bind con el shorthand?

Puedes escribir menos usando los dos puntos. Obtendrás el mismo resultado.

<a :href="URL">link</a>

• Shorthand: :href equivale a v-bind:href.
• Menos código: misma funcionalidad, sintaxis más limpia.
• Lectura clara: facilita escanear atributos enlazados.

¿Tienes dudas o quieres compartir cómo aplicarás V-model y VBind en tu proyecto? Deja tu comentario y conversemos.