Структура из шаблонов script и style
Изучите структуру файла компонента Svelte из трёх частей
«Структура из шаблонов script и style» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Три раздела
Файл компонента Svelte содержит три необязательных блока верхнего уровня: <script>, разметку и <style>.
Блок script
Блок script содержит логику компонента на обычном JavaScript или TypeScript.
<script>
let name = "Ada";
</script>Разметка
Всё, что находится вне тегов script и style, является разметкой компонента. Это HTML, дополненный синтаксисом шаблонов Svelte.
<h1>Hello {name}!</h1>Блок style
Стили применяются только к этому компоненту. Другие компоненты сохраняют собственное оформление.
<style>
h1 { color: rebeccapurple; }
</style>Полный компонент
Объедините все три раздела в одном файле .svelte.
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>Принятый порядок
По соглашению сначала располагается script, затем разметка, а в конце — style. Svelte не требует соблюдения этого порядка.
Вариант с TypeScript
Добавьте lang="ts" в тег script, чтобы использовать внутри TypeScript.
<script lang="ts">
let name: string = "Ada";
</script>Контекст модульного скрипта
Используйте <script context="module"> для кода, который выполняется один раз на модуль, а не для каждого экземпляра.
<script context="module">
export const VERSION = "1.0";
</script>Без нескольких блоков
В каждом файле может быть не более одного скрипта экземпляра и одного модульного скрипта.
Тег style необязателен
Если в компоненте нет стилей, полностью опустите блок style.
Тег script необязателен
Компоненты со статической разметкой также могут не содержать блока script. Файл .svelte только с разметкой допустим.
Быстрая проверка
Где размещаются локальные стили CSS?
Итоги
Файл Svelte может содержать до трёх блоков: script для логики, разметку и style для локальных стилей CSS.
Часто задаваемые вопросы
Урок «Структура из шаблонов script и style» бесплатный?
Да — полный текст урока «Структура из шаблонов script и style» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Структура из шаблонов script и style»?
Изучите структуру файла компонента Svelte из трёх частей Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Структура из шаблонов script и style»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Структура из шаблонов script и style
- Реактивные переменные с let
- Интерполяция: {expression}
- Вычисляемые значения: реактивные объявления $: