Diretivas(Direcitves) e Renderização Condicional

As diretivas no Vue.js são recursos especiais que você pode aplicar aos elementos do DOM em seus templates HTML. Elas têm o prefixo v- e servem para tornar o código mais reativo e dinâmico. Vamos detalhar algumas das principais diretivas, focando nas de renderização condicional e vinculação de dados.

Estas diretivas ajudam a controlar o fluxo do template, decidindo quais elementos serão renderizados no DOM baseado em condições lógicas.

1. v-if

   • A diretiva v-if é usada para renderizar condicionalmente um bloco. O bloco só será renderizado se a expressão da diretiva retornar um valor verdadeiro.
   • Uso típico:

     <div v-if="visible">Veja-me se 'visible' for verdadeiro</div>

2. v-else

   • Usada para indicar o bloco "senão" para uma diretiva v-if anterior.
   • Deve seguir imediatamente um elemento v-if ou v-else-if.
   • Exemplo:

     <div v-if="error">Erro ao carregar os dados</div>
     <div v-else>Dados carregados com sucesso</div>

3. v-else-if

   • Serve como um "else if" para construir condições mais complexas com v-if.
   • Exemplo:

     <div v-if="type === 'A'">Tipo A</div>
     <div v-else-if="type === 'B'">Tipo B</div>
     <div v-else>Tipo desconhecido</div>

4. v-show

   • Semelhante ao v-if, mas sempre renderiza o elemento no DOM, apenas alternando sua visibilidade CSS (display none/style).
   • Recomendada para casos onde é necessário alternar muitas vezes a visibilidade de algo.
   • Exemplo:

     <div v-show="visible">Apareço quando 'visible' é verdadeiro</div>

Diretivas de Vinculação de Dados

Estas diretivas permitem criar um vínculo entre os dados da instância Vue e o DOM, facilitando a sincronização automática dos dados.

1. v-bind

   • Usada para vincular dinamicamente um ou mais atributos, ou uma propriedade a uma expressão.
   • Quando a expressão muda, o valor do atributo é atualizado automaticamente.
   • Uso abreviado: :atributo.
   • Exemplo:

     <img v-bind:src="imageSrc" />

   • Exemplo abreviado:

     <img :src="imageSrc" />

2. v-model

   • Usada para criar vinculações bidirecionais em formulários HTML, facilitando a coleta e atualização de dados do usuário.
   • Trabalha com diferentes elementos de entrada, como input, select, e textarea.
   • Exemplo:

     <input v-model="username" placeholder="Digite seu nome" />

Essas diretivas tornam o Vue.js poderoso para construir interfaces dinâmicas rapidamente, permitindo aos desenvolvedores controlar de forma eficaz a apresentação e a interação dos dados na interface do usuário.