Видео курс по Svelte
2 года назад·2 мин. на чтение
Полный видео курс по Svelte
1. Что такое Svelte и как он устроен?
В этом уроке проинициализируем default проект на Svelte и рассмотрим структуру default проекта. Смотреть на Rutube2. Как устроен Компонент в Svelte?
В этом уроке рассмотрим компоненты Svelte, пропс (props
, $$props
, $$restProps
, export let prop
), реактивность SvelteJS, блоки script
и style
, изоляцию стилей и :global()
Смотреть на Rutube
3. Жизненный цикл Svelte компонента
В этом видео рассматриваем методы жизненного цикла компонентов Svelte, а именноonMount
, onDestroy
, beforeUpdate
, afterUpdate
, а также функция tick
.
Смотреть на Rutube
4. HTML шаблоны в Svelte
В этом уроке рассмотрим cинтаксис HTML шаблонов Svelte, а именноif
, each
, await
, key
, а также html
и debug
.
Смотреть на Rutube
5. Как работать с событиями в Svelte?
В этом уроке по Svelte рассматриваем работу с событиями в Svelte, а именно директивуon
, модификаторы событий, переброс событий, createEventDispatcher
и т.д.
Смотреть на Rutube
6. Байндинги и Привязки - Svelte Bindings
В этом уроке рассмотрим привязки в Svelte, синтаксис и директивуbind:
, привязки к компонентам и т.д.
Смотреть на Rutube
7. Хранилище Svelte Store
В этом уроке рассмотрим store в Svelte и разновидности хранилищ: writable store (хранилище для записи), readable store (хранилище только для чтения), derived store (производные хранилища) и custom store (пользовательские хранилища). Смотреть на Rutube8. Анимации и переходы в Svelte - Motion, Transition and Animation
В этом видео рассматриваем анимации в Svelte, а именно анимации значений (Svelte motion), анимации переходов (Svelte Transition), Svelte Animate, директивыtransition
, in
, out
и многое другое.
Смотреть на Rutube
9. Действия и директива use - Svelte Actions
В этом видео рассматриваем Действия в Svelte, для чего они нужно и как ими пользоваться. Добавляем в проект директивуuse
, отправляем события из Действия и реализовываем функции действий - destroy
и update
.
Смотреть на Rutube
10. Слоты - Svelte slots. Context Модуль - Svelte module context
В этом видео рассматриваем слоты в Svelte и работу сscript
c context="module"
.
Смотреть на Rutube
11. API контекста - Svelte Context API
В этом видео рассматриваем возможности контекста Svelte, функцииsetContext
, getContext
и hasContext
, а также применение CSS классов по условию.
Смотреть на Rutube
12. Специальные элементы - Svelte Special elements
В этом видео рассматриваем специальные элементы в Svelte. Смотреть на Rutube Исходный код проектаРелиз SvelteKit 1.0. Что нового в SvelteKit?
2 года назад·2 мин. на чтение
Вышел релиз SvelteKit 1.0. На сегодняшний день это рекомендуемый способ создания приложений Svelte.
Для создания проекта достаточно запустить
npm create svelte@latest
.