[Из песочницы] Alpine.js — легковесный фреймворк с удобным синтаксисом
Многие разработчики полюбили лаконичный синтаксис и мощь директив Vue.js настолько, что даже пытаются использовать этот фреймворк не только в одностраничных приложениях. Сложно отказаться от использования реактивности, только потому, что вдруг понадобилось написать небольшой проект. Не возвращаться же к старому доброму jQuery или к чистому JS?!
Надо сказать, что во Vue.js (да и во многих других фреймворках) предусмотрен такой вариант его использования. Но все же он кажется слишком громоздким для такой простой работы, а функционал избыточным. И тут на помощь приходит Alpine.js.
Отметим некоторые особенности данного фреймворка:
- Он весит очень мало! 7.2kB в сжатом виде.
- Знакомый и простой синтаксис основанный на директивах.
- Не использует виртуальный DOM
- Подключения возможно как через CDN (по задумке авторов должно быть основным использованием), так и через npm.
Рассмотрим простейший пример использования этого фреймворка:
Посмотреть весь код статьи на playcode.io
Первое, что бросается в глаза, это атрибут x-data. Это директива нашего фреймворка, она принимает JSON-объект и обеспечивает его свойствам двунаправленной реактивностью. Но главная его функция это инициировать новый компонент. Обязательно нужно добавлять его в родительский Dom-узел, даже если и не собираетесь приписывать ему реактивные переменные.
В последнем случае просто добавьте
x-data="{}"Строковые значение внутри объекта, передаваемого директиве, как вы заметили, нужно писать в одинарных кавычках.
Теперь мы вольны использовать реактивную переменную msg, как нам угодно. Например, связываем значение переменной с текстовым с помощью директивы x-model. Опытные разработчики уже узнали в ней близняшку v-model из Vue.js. Очень полезная аналогия, поскольку использование их обеих абсолютно идентично! Повесив директиву с переменной msg, мы автоматически получаем строку 'Hello, Habr!' в поле ввода. Теперь мы можем изменять её значение, а результат увидим в следующей строке.
Тут мы вынуждены разочаровать многих, привыкших к синтаксису Vue.js и простой передаче значений переменных тэгам с помощью фигурных скобок, например, так
{{ msg }}
В Alpine.js этот код не сработает. Текст для тэга
придется передавать с помощью специального атрибута x-text. Для передачи целого блока разметки предусмотрен атрибут x-html.
Код примера:
Для подписки на события используется специальная директива x-on. Кстати все директивы в Alpine.js способны принимать не только конечное значение, но и js-выражения, этим мы и воспользовались для реализации счетчика в примере выше. Существует, и очень рекомендуется к использованию, укороченная версия x-on — @. С ней подписка на события выглядит вот так:
Следующий пример демонстрирует использование x-if:
Меня видно!
Использование директивы x-if, так же не должно вызывать затруднения у фанатов Vue.js. Она принимает Boolean значение и в зависимости от этого рендерит элемент. Единственное отличие этот атрибут обязан применяться только на тэге. Обратите внимание как используя тернарный оператор мы изменяем текст на кнопке в зависимости от ситуации.
-
Директива x-for принимает массив элементов, которые мы хотим отобразить. Но сначала мы вводим новую переменную, которая будет содержать элемент массива в каждом цикле, в данном случае item. Внутри цикла мы показываем, как мы хотим отобразить каждый элемент, передаем значение item в параграф, и Alpine самостоятельно рендерит весь список. Желательно (но не обязательно) передавать уникальное значение для ключа key. Обратите внимание как мы привязываем динамическую передачу данных к атрибуту key с помощью новой директивы x-bind. x-for так же как и x-if должен располагаться на , иначе он не будет работать.
Мы попытались охватить основные примеры использования этого фреймворка. Для полного ознакомления рекомендуется посетить страницу на github.
Надеемся, что вам понравилось.
Удачных проектов и до встречи!
Ну и на закуску список вкусностей, которые создатели Alpine обещают добавить в следующей версии:
- Пользовательские директивы
- Компоненты
- Поддержка style атрибута
- И многое другое…
