Diretivas(Direcitves) Embutidas

As diretivas embutidas no Vue.js são ferramentas essenciais que permitem modificar o DOM de forma declarativa diretamente no template do Vue. Aqui está uma descrição detalhada de cada uma das diretivas mencionadas:

1. v-text

• Uso: Atualiza o textContent do elemento com o valor da expressão.
• Exemplo:

  <span v-text="message"></span>

• equivalente a:

  <span>{{ message }}</span>

2. v-html

• Uso: Atualiza o innerHTML do elemento com o valor da expressão. Deve ser usado com cautela por causa dos riscos de XSS (Cross-Site Scripting).
• Exemplo:

  <div v-html="htmlContent"></div>

• insere HTML dinâmico dentro do div.

3. v-for

• Uso: Renderiza uma lista de elementos com base em dados de uma matriz ou objeto.
• Exemplo:

  <li v-for="item in items" :key="item.id">{{ item.text }}</li>

• cria uma lista de itens.

4. v-on

• Uso: Escuta eventos no DOM e executa a expressão quando o evento ocorre.

• Abreviação: @

• Exemplo:

  <button v-on:click="increment">Add</button>

• Exemplo abreviado:

  <button @click="increment">Add</button>

• executa a função increment quando o botão é clicado.

• Modificadores de Evento: permitem modificar o comportamento padrão de um evento. Exemplos incluem .stop, .prevent, .self, .capture, .once, .passive, etc.

• Exemplo com modificador prevent:

  <form @submit.prevent="onSubmit">...</form>

5. v-slot

• Uso: Denota slots de conteúdo em componentes, permitindo a inserção de conteúdo HTML ou outro componente dentro de um componente personalizado.
• Exemplo:

  <template v-slot:header>Meu cabeçalho</template>

• especifica conteúdo para o slot header de um componente.

6. v-pre

• Uso: Pula a compilação do elemento e de todos os seus filhos, ou seja, não interpreta ou compila as expressões ou diretivas dentro dele.
• Exemplo:

  <span v-pre>{{ raw }}</span>

• exibirá "" como texto literal.

7. v-once

• Uso: Renderiza o elemento e os componentes filhos uma única vez. O componente não será re-renderizado em futuras atualizações de dados.
• Exemplo:

  <span v-once>{{ constant }}</span>

• não será atualizado depois de renderizado inicialmente.

8. v-memo

• Uso: Semelhante ao v-once, mas com condições para re-renderização. Usado para otimizar atualizações de componentes memorizando resultados.
• Exemplo:

  <div v-memo="[dependencies]">...</div>

• só re-renderiza o conteúdo se as dependencies mudarem.

9. v-cloak

• Uso: Mantém um elemento invisível até que o Vue esteja totalmente carregado, útil para prevenir o flash de conteúdo não compilado.
• Exemplo:

  <div v-cloak>{{ message }}</div>

• com CSS [v-cloak] { display: none } esconde o div até que o Vue processe o message.

Essas diretivas oferecem uma variedade de maneiras de manipular o conteúdo e o comportamento do DOM, facilitando a criação de interações dinâmicas e interfaces de usuário reativas em aplicações Vue.