Оглавление
Alpine.js
Лёгкая интерактивность прямо в HTML: директивы x-data, x-on, x-show и хранилища.
1.Начало работы
- Что такое Alpine.jsЗачем нужна библиотека Alpine.js, чем она отличается от React и Vue и как выглядит первый пример.
- Подключение AlpineДва способа подключить Alpine.js: тег script с CDN и пакет npm с вызовом Alpine.start().
- x-data и состояние компонентаКак директива x-data создаёт компонент Alpine: данные, методы, геттеры и вложенные компоненты.
- x-text и x-htmlКак вывести данные компонента на страницу: текст через x-text и разметку через x-html.
- x-on и модификаторы событийКак реагировать на события директивой x-on, сокращение @ и модификаторы prevent, outside, клавиш и debounce.
2.Директивы
- x-show и x-transitionКак показывать и прятать элементы директивой x-show и добавлять плавную анимацию через x-transition.
- x-ifКак добавлять и убирать элементы из страницы директивой x-if и чем она отличается от x-show.
- x-for и ключиКак вывести список директивой x-for: тег template, индекс, атрибут :key и удаление элементов.
- x-bind: атрибуты и классыКак связать атрибуты, классы и стили элемента с данными компонента директивой x-bind и сокращением двоеточием.
- x-model и поля формыКак связать поля формы с данными директивой x-model: текст, чекбоксы, списки выбора и модификаторы.
- x-init и x-effectКак выполнить код при запуске компонента через x-init и метод init() и как реагировать на изменения через x-effect.
- x-ref и $refsКак дать элементу имя директивой x-ref и обратиться к нему из кода через $refs: фокус, прокрутка, чтение значения.
3.Компоненты и данные
- $el, $event и $nextTickМагические свойства Alpine: текущий элемент $el, объект события $event и ожидание обновления страницы $nextTick.
- $dispatch и $watchКак компоненты Alpine общаются через свои события $dispatch и как следить за изменением свойства через $watch.
- Компоненты через Alpine.dataКак вынести данные и методы компонента из разметки в JavaScript с помощью Alpine.data и использовать компонент много раз.
- Глобальное состояние: Alpine.storeКак хранить общие данные для нескольких компонентов в Alpine.store и читать их через $store.
- Загрузка данныхКак загрузить данные с сервера в компонент Alpine: асинхронный init(), состояние загрузки и обработка ошибки.
4.Практика
- ПлагиныОфициальные плагины Alpine: сохранение данных persist, ловушка фокуса focus, появление на экране intersect и раскрытие collapse.
- Выпадающее меню и вкладкиДва частых элемента интерфейса на Alpine: выпадающее меню с закрытием по клику снаружи и Esc и переключаемые вкладки.
- Модальное окно и аккордеонМодальное окно на Alpine с фоном, закрытием по Esc и клику мимо и аккордеон, в котором открыт один раздел.
- Alpine на страницах с сервераКак использовать Alpine в шаблонах бэкенда: передача данных из PHP и Laravel Blade, директива @js, Livewire и двойное двоеточие.
- Отладка и частые проблемыКак искать ошибки в Alpine: сообщения в консоли, x-cloak против мигания, порядок запуска и проверка данных компонента.