Como trabalhar com Vue.js Data Binding

A vinculação de dados é um dos principais recursos do Vue.js que permite que os desenvolvedores conectem o modelo de dados à camada de visualização. Ele permite que você mantenha seus dados e elementos DOM sincronizados com o mínimo de esforço. O Vue.js fornece diferentes tipos de técnicas de vinculação de dados, incluindo vinculação de dados unidirecional e bidirecional, para tornar o desenvolvimento mais eficiente e reativo.

Neste artigo, exploraremos como trabalhar com vinculação de dados no Vue.js, abordando vinculação de dados unidirecional, vinculação de dados bidirecional e exemplos práticos de cada uma.

Tipos de vinculação de dados em Vue.js

O Vue.js oferece dois tipos principais de vinculação de dados:

• Ligação de dados unidirecional: Os dados fluem em uma única direção, do modelo de dados do componente para a visualização.
• Ligação de dados bidirecional: Os dados fluem em ambas as direções, do modelo de dados para a exibição e de volta da exibição para o modelo de dados.

Ligação de dados unidirecional com v-bind

A vinculação de dados unidirecional no Vue.js é obtida usando a diretiva v-bind. Essa diretiva vincula dinamicamente um atributo a uma expressão em seus dados. Ela é comumente usada para vincular atributos HTML como src, href, alt e mais.

Aqui está um exemplo de uso de v-bind para vincular o atributo src de um elemento de imagem:

<template>
  <div>
    <img v-bind:src="imageUrl" alt="Dynamic Image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

A abreviação para v-bind é dois pontos (:). O exemplo acima pode ser reescrito como:

<img :src="imageUrl" alt="Dynamic Image" />

Ligação de dados bidirecional com v-model

A vinculação de dados bidirecional no Vue.js é obtida usando a diretiva v-model. Ela cria uma vinculação entre um elemento de entrada de formulário e o modelo de dados, permitindo que as alterações sejam refletidas automaticamente nos dados e na visualização.

Aqui está um exemplo de uso de v-model para vinculação de dados bidirecional com um elemento de entrada:

<template>
  <div>
    <input v-model="message" placeholder="Enter your message" />
    <p>Your message is: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

Neste exemplo, conforme você digita no campo de entrada, a propriedade de dados message é atualizada automaticamente, e o elemento <p> exibe o valor atualizado em tempo real.

Vinculando elementos de formulário com v-model

A diretiva v-model pode ser usada com vários elementos de formulário, como caixas de seleção, botões de opção e seleções. Aqui estão alguns exemplos:

Vinculação de caixa de seleção

<template>
  <div>
    <input type="checkbox" v-model="isChecked" /> Checked: {{ isChecked }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

Ligação de botão de rádio

<template>
  <div>
    <input type="radio" id="option1" value="Option 1" v-model="selectedOption" />
    <label for="option1">Option 1</label>
    <br>
    <input type="radio" id="option2" value="Option 2" v-model="selectedOption" />
    <label for="option2">Option 2</label>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

Selecionar encadernação

<template>
  <div>
    <select v-model="selectedValue">
      <option disabled value="">Please select one</option>
      <option>Option A</option>
      <option>Option B</option>
    </select>
    <p>Selected: {{ selectedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: ''
    };
  }
};
</script>

Ligação de dados única com v-once

A diretiva v-once é usada para vincular dados a uma visualização apenas uma vez. Após a renderização inicial, quaisquer alterações no modelo de dados não serão refletidas na visualização. Isso é útil para conteúdo estático que não precisa ser reativo:

<template>
  <div v-once>
    This content is rendered only once: {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

Resumo

A vinculação de dados do Vue.js é um recurso poderoso que permite que os desenvolvedores criem aplicativos dinâmicos e interativos com o mínimo de esforço. Ao entender e aproveitar os diferentes tipos de técnicas de vinculação de dados, como vinculação unidirecional com v-bind, vinculação bidirecional com v-model e vinculação única com v-once, você pode criar aplicativos mais eficientes e responsivos.