Aula 03 – Reatividade e Data Binding ⚡

A mágica do Vue.js reside em seu sistema de reatividade. Quando os dados mudam no JavaScript, a interface reflete essa mudança instantaneamente sem que você precise manipular o DOM manualmente.

🏗️ Sintaxe Declarativa

O Vue utiliza uma sintaxe baseada em HTML que permite "vincular" (bind) o DOM aos dados da instância.

Interpolação (Mustache)

Para exibir dados simples, usamos as chaves duplas: {{ }}.

<template>
  <p>Bem-vindo, {{ nome }}!</p>
</template>

<script setup>
  const nome = "Usuário"
</script>

🔗 Diretivas de Binding

`v-bind` (Binding de Atributos)

Usado para vincular atributos HTML (como src, href, disabled) a uma variável.

<!-- Sintaxe completa -->
<img v-bind:src="urlImagem">

<!-- Atalho (Mais comum) -->
<img :src="urlImagem">

`v-model` (Two-Way Data Binding)

Crucial para formulários. Ele sincroniza o valor de um input com uma variável em tempo real.

graph LR
    Input[Input no HTML] -- digitação --> Variable[Variável no Script]
    Variable -- alteração --> Input

🧪 Sistema de Reatividade (Vue 3)

Na Composition API, usamos a função ref() para dizer ao Vue que uma variável deve ser reativa.

<script setup>
import { ref } from 'vue'

// Criando uma variável reativa
const contador = ref(0)

function incrementar() {
  // Para acessar o valor no script, usamos .value
  contador.value++
}
</script>

<template>
  <button @click="incrementar">Contagem: {{ contador }}</button>
</template>

Important

Lembre-se: No <script setup>, você usa variavel.value. No <template>, o Vue faz o "unwrapping" automático e você usa apenas {{ variavel }}.

🧠 Conceitos Chave

O que é Reatividade?

É a capacidade de um sistema de propagar mudanças automaticamente. No Vue, isso é feito através de Proxies do JavaScript que observam quando uma propriedade é lida ou alterada.

💻 Mão na Massa

Tente criar um campo de input que atualize um parágrafo enquanto você digita:

<script setup>
import { ref } from 'vue'
const texto = ref('')
</script>

<template>
  <input v-model="texto" placeholder="Digite algo...">
  <p>Você digitou: {{ texto }}</p>
</template>

📝 Exercício

Crie uma variável reativa chamada cor e vincule-a a um input de texto. Use essa variável para mudar a cor de um parágrafo via :style="{ color: cor }".
Qual a diferença entre v-bind e v-model?

🚀 Próxima Aula: Vamos aprender a renderizar listas e esconder elementos condicionalmente!