En el blog/artículo anterior, aprendimos cómo crear, importar y usar componentes. Esta vez, exploraremos el enlace de datos en componentes.

Uso de datos dentro de componentes

Definición de datos en un componente
Los datos se definen en la función data() y se devuelven como un objeto.
Aquí tienes un ejemplo:

data() {
  return {
    message: 'Hello World!'
  };
}

Vinculación con directivas

v-bind: vincula atributos HTML a datos.

v-model: la directiva v-model se utiliza para el enlace de datos bidireccional en las entradas del formulario. Mantiene el valor de entrada sincronizado con los datos de la instancia de Vue. Esencialmente, v-model combina @input (que escucha los cambios) y :value (que establece el valor de entrada). Por ejemplo:

Esto es equivalente a:

Así es como puedes usar :value y @input por separado:

La directiva v-if representa condicionalmente elementos basados ​​en un valor booleano. Si la condición es verdadera, el elemento se representará; si es falso, no lo será. Por ejemplo:

This is visible!

La directiva v-for se utiliza para recorrer una matriz o un objeto para representar elementos. A cada elemento se le puede asignar una clave única para un mejor rendimiento. Por ejemplo:

• {{ item.name }}

v-en
La directiva v-on se utiliza para escuchar eventos en elementos. Puede utilizar la taquigrafía @ por conveniencia. Por ejemplo:

Click me!

Esto se puede abreviar a:

Click me!