0Pricing
Sveltejs Academy · Урок

Синтаксис директивы use:

Применяйте действие Svelte к элементу DOM с помощью директивы use:

«Синтаксис директивы use:» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.

Действия в Svelte

Действие — это функция, которая выполняется при монтировании элемента. Она вызывается с помощью директивы use:.

Базовое действие

Действие получает узел DOM в качестве аргумента.

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

Применение с use:

Прикрепите действие к любому элементу с помощью use:action.

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

Зачем нужны действия

Действия инкапсулируют императивное поведение DOM (фокусировку, отслеживание пересечения, перетаскивание и т. д.) для повторного использования.

Разметка не требуется

Действия ничего не отображают, а расширяют существующие элементы.

Несколько действий

К одному элементу можно применить несколько действий с помощью нескольких директив use:.

<div use:trap use:scroll>

Публикация в библиотеках

Многие библиотеки Svelte предоставляют своё поведение в виде действий для удобной интеграции.

Импорты

Действия — обычные функции; импортируйте их как любой модуль.

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

Подсказки типов

Типизируйте действия с помощью обобщённого типа Action<Element, Params> из svelte/action.

Учёт жизненного цикла

Действия выполняются после монтирования, поэтому во время их выполнения узел уже существует в DOM.

От простого до мощного

Действие может быть как однострочной функцией, так и полноценной обёрткой над библиотекой.

Быстрая проверка

Как прикрепить действие?

Повторение

Действия вызываются через use:. Они получают узел DOM и добавляют императивное поведение.

Часто задаваемые вопросы

Урок «Синтаксис директивы use:» бесплатный?

Да — полный текст урока «Синтаксис директивы use:» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.

Чему я научусь в уроке «Синтаксис директивы use:»?

Применяйте действие Svelte к элементу DOM с помощью директивы use: Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Sveltejs Academy?

Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Синтаксис директивы use:»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Sveltejs Academy?

Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Синтаксис директивы use:
  2. Параметры и обновления действий
  3. Функция очистки destroy()
  4. Практические действия: clickOutside tooltip autofocus
← Назад к Sveltejs Academy