Diretivas
Em Vue.js, as Diretivas são instruções especiais adicionadas ao DOM que permitem manipular o comportamento e a renderização dos elementos de forma declarativa. Elas são essenciais para criar interfaces reativas e dinâmicas, permitindo que o desenvolvedor conecte dados, gerencie eventos e controle a exibição de componentes de forma eficiente. As Diretivas começam com o prefixo "v-" e incluem elementos como v-if, v-show, v-for, v-model e v-on, cada uma com finalidades específicas, desde renderização condicional até binding bidirecional e escuta de eventos.
O uso correto das Diretivas em projetos avançados de Vue.js promove código mais limpo, modular e performático. Compreender a sintaxe, estruturas de dados, algoritmos e princípios de POO aplicados às Diretivas permite que desenvolvedores evitem erros comuns, como memory leaks, manipulação incorreta do DOM e loops ineficientes. Além disso, permite construir componentes reutilizáveis e mantíveis, integrando-os de maneira eficiente à arquitetura do sistema.
Neste tutorial, você aprenderá a aplicar Diretivas built-in, criar Diretivas customizadas e integrá-las a fluxos de dados complexos. Exemplos práticos demonstrarão como interagir com arrays, objetos e formulários usando Diretivas, aplicando boas práticas, validação de dados e otimizações de performance, fornecendo conhecimento aprofundado para uso em projetos reais de Vue.js.
Exemplo Básico <template>
text<div>
<h1 v-if="isVisible">Bem-vindo às Diretivas em Vue.js</h1>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<input v-model="newItem" placeholder="Adicionar novo item" />
<button @click="addItem">Adicionar</button>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
newItem: '',
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
};
},
methods: {
addItem() {
if (this.newItem.trim() !== '') {
this.items.push({ id: this.items.length + 1, name: this.newItem });
this.newItem = '';
}
}
}
};
</script>Neste exemplo básico, v-if controla a exibição do título com base na propriedade booleana isVisible. A Diretiva v-for itera sobre a lista items, criando elementos li para cada item, enquanto :key assegura a unicidade e otimiza a renderização do virtual DOM. O input está vinculado a newItem via v-model, permitindo binding bidirecional entre o formulário e o estado do componente. O método addItem valida a entrada do usuário, adiciona o novo item à lista e limpa o campo de entrada. Este exemplo demonstra a integração entre Diretivas, data structures e métodos, aplicando boas práticas de Vue.js e evitando erros comuns como memory leaks ou manipulação direta do DOM.
Exemplo Prático <template>
text<div>
<h2 v-show="showTasks">Lista de Tarefas</h2>
<ul>
<li v-for="task in tasks" :key="task.id">
<input type="checkbox" v-model="task.completed" /> {{ task.name }}
<button @click="removeTask(task.id)">Remover</button>
</li>
</ul>
<input v-model="newTask" placeholder="Adicionar nova tarefa" />
<button @click="addTask">Adicionar</button>
</div>
</template>
<script>
export default {
data() {
return {
showTasks: true,
newTask: '',
tasks: [
{ id: 1, name: 'Revisar código', completed: false },
{ id: 2, name: 'Escrever documentação', completed: true }
]
};
},
methods: {
addTask() {
const name = this.newTask.trim();
if (name) {
this.tasks.push({ id: Date.now(), name, completed: false });
this.newTask = '';
}
},
removeTask(id) {
this.tasks = this.tasks.filter(task => task.id !== id);
}
}
};
</script>No exemplo prático, v-show é usado para controlar a visibilidade do heading sem remover o elemento do DOM, garantindo melhor performance para toggles frequentes. A Diretiva v-for itera sobre tasks, enquanto :key mantém a consistência do virtual DOM. v-model nos checkboxes permite sincronização reativa do estado completed. Os métodos addTask e removeTask demonstram manipulação segura de arrays, mantendo integridade dos dados. O uso de Date.now() garante IDs únicos para novos itens. Este exemplo ilustra boas práticas de validação, encapsulamento da lógica de negócios e manutenção de desempenho, evitando manipulação direta do DOM.
Boas práticas em Vue.js incluem o uso consistente de :key, computed properties para cálculos complexos, e minimizar manipulação direta do DOM. v-show é indicado para toggles frequentes, enquanto v-model deve sempre validar entradas. Erros comuns envolvem uso excessivo de v-if/v-show, loops ineficientes em grandes arrays, e listeners de eventos não removidos. Ferramentas como Vue DevTools são essenciais para debugging e análise de performance. Em termos de segurança, evitar o uso direto de v-html previne ataques XSS. Otimizações de performance incluem atualização seletiva do DOM e uso inteligente de computed properties e watchers.
📊 Tabela de Referência
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| v-if | Renderização condicional de elementos | <div v-if="isVisible">Exibir</div> |
| v-show | Alterar visibilidade sem remover do DOM | <div v-show="isVisible">Exibir</div> |
| v-for | Iteração sobre arrays ou objetos | <li v-for="item in items" :key="item.id">{{ item.name }}</li> |
| v-model | Binding bidirecional em formulários | <input v-model="newItem" /> |
| v-on | Associação de eventos a métodos | <button @click="addItem">Adicionar</button> |
| Custom Directives | Encapsular lógica reutilizável no DOM | Vue.directive('focus', { inserted: el => el.focus() }) |
Dominar as Diretivas permite controlar o DOM de forma reativa e eficiente. As built-in Diretivas cobrem os casos mais comuns, enquanto custom directives permitem encapsular lógica complexa e aumentar a reusabilidade. Após aprender Diretivas, é recomendável estudar Vuex, componentes dinâmicos, otimizações de performance e algoritmos reativos. Aplicar Diretivas em projetos reais e monitorar desempenho reforça o aprendizado. Recursos adicionais incluem documentação oficial, tutoriais da comunidade e projetos open-source.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo