No blog/artigo anterior, aprendemos como criar, importar e usar componentes. Desta vez, exploraremos a vinculação de dados em componentes.

Usando dados em componentes

Definindo dados em um componente
Os dados são definidos na função data() e retornados como um objeto.
Aqui está um exemplo:

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

Vinculação com diretivas

v-bind: vincula atributos HTML aos dados.

v-model: A diretiva v-model é usada para vinculação bidirecional de dados em entradas de formulário. Ele mantém o valor de entrada sincronizado com os dados da instância Vue. Essencialmente, o v-model combina @input (que escuta alterações) e :value (que define o valor de entrada). Por exemplo:

Isso é equivalente a:

Veja como você pode usar :value e @input separadamente:

A diretiva v-if renderiza elementos condicionalmente com base em um valor booleano. Se a condição for verdadeira, o elemento será renderizado; se for falso, não será. Por exemplo:

This is visible!

A diretiva v-for é usada para percorrer um array ou objeto para renderizar elementos. Cada elemento pode receber uma chave exclusiva para melhor desempenho. Por exemplo:

• {{ item.name }}

v-on
A diretiva v-on é usada para escutar eventos em elementos. Você pode usar a abreviação @ por conveniência. Por exemplo:

Click me!

Isso pode ser abreviado para:

Click me!