0Pricing
Sveltejs Academy · Lekcja

Składnia dyrektywy use:

Stosuj akcję Svelte do elementu DOM za pomocą dyrektywy use:.

Składnia dyrektywy use: to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.

Akcje w Svelte

Akcja to funkcja uruchamiana po zamontowaniu elementu. Wywołuje się ją za pomocą dyrektywy use:.

Podstawowa akcja

Akcja otrzymuje węzeł DOM jako argument.

function highlight(node) {
  node.style.background = "yellow";
}

Stosowanie za pomocą use:

Akcję należy dołączyć do dowolnego elementu za pomocą use:action.

<p use:highlight>I am highlighted</p>

Dlaczego używać akcji

Akcje hermetyzują imperatywne zachowanie DOM (ustawianie fokusu, obserwację przecięcia, przeciąganie itd.), dzięki czemu można je ponownie wykorzystywać.

Bez dodatkowego kodu znaczników

Akcje niczego nie renderują, lecz rozszerzają istniejące elementy.

Wiele akcji

Do jednego elementu można dołączyć wiele akcji za pomocą wielu dyrektyw use:.

<div use:trap use:scroll>

Udostępnianie w bibliotekach

Wiele bibliotek Svelte udostępnia swoje funkcje jako akcje, co ułatwia ich integrację.

Importowanie

Akcje są zwykłymi funkcjami; należy je importować tak jak każdy moduł.

import { clickOutside } from "$lib/actions";

Wskazówki typów

Akcje należy typować za pomocą generyku Action<Element, Params> z svelte/action.

Świadomość cyklu życia

Akcje są uruchamiane po zamontowaniu, więc w momencie ich wykonania węzeł istnieje w DOM.

Od prostych do zaawansowanych

Akcje mogą być tak krótkie jak funkcja jednolinijkowa albo tak rozbudowane jak opakowanie biblioteki.

Szybkie sprawdzenie

Jak dołączyć akcję?

Podsumowanie

Akcje to funkcje wywoływane za pomocą use:. Otrzymują węzeł DOM i dodają zachowanie imperatywne.

Często zadawane pytania

Czy lekcja „Składnia dyrektywy use:” jest bezpłatna?

Tak — pełny tekst „Składnia dyrektywy use:” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Składnia dyrektywy use:”?

Stosuj akcję Svelte do elementu DOM za pomocą dyrektywy use:. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?

Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Składnia dyrektywy use:”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?

Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Składnia dyrektywy use:
  2. Parametry akcji i aktualizacje
  3. Funkcja sprzątająca destroy()
  4. Praktyczne akcje: clickOutside tooltip autofocus
← Powrót do Sveltejs Academy