Sintaxe da diretiva use:
Aplique uma ação do Svelte a um elemento do DOM usando a diretiva use:.
Sintaxe da diretiva use: é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Ações no Svelte
Uma ação é uma função executada quando um elemento é montado. Ela é chamada com a diretiva use:.
Ação básica
Uma ação recebe o nó do DOM como argumento.
function highlight(node) {
node.style.background = "yellow";
}Aplicar com use:
Anexe a ação a qualquer elemento usando use:action.
<p use:highlight>I am highlighted</p>Por que usar ações
As ações encapsulam o comportamento imperativo do DOM, como foco, interseção e arrastar, para permitir a reutilização.
Não é necessária marcação
As ações não renderizam nada; elas ampliam elementos existentes.
Várias ações
É possível aplicar várias ações a um elemento usando várias diretivas use:.
<div use:trap use:scroll>Ações em bibliotecas
Muitas bibliotecas do Svelte expõem seu comportamento como ações para facilitar a integração.
Importações
As ações são funções comuns; importe-as como qualquer módulo.
import { clickOutside } from "$lib/actions";Dicas de tipos
Defina os tipos das ações com o genérico Action<Element, Params> de svelte/action.
Consciência do ciclo de vida
As ações são executadas depois da montagem, portanto o nó existe no DOM quando elas são executadas.
Do simples ao poderoso
As ações podem ser tão pequenas quanto uma única linha ou tão completas quanto um envoltório de biblioteca.
Verificação rápida
Como anexar uma ação?
Recapitulação
As ações são funções chamadas por meio de use:. Elas recebem o nó do DOM e adicionam comportamento imperativo.
Perguntas Frequentes
A aula “Sintaxe da diretiva use:” é grátis?
Sim — o texto completo de “Sintaxe da diretiva use:” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Sintaxe da diretiva use:”?
Aplique uma ação do Svelte a um elemento do DOM usando a diretiva use:. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Sintaxe da diretiva use:”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Sintaxe da diretiva use:
- Parâmetros e atualizações de ações
- A função de limpeza destroy()
- Ações práticas: clickOutside tooltip autofocus