Мы будем использовать этот фремворк https://github.com/alpinejs/alpine
Установка
Alpine.js устанавливаеться легко. Вы можете использовать npm или CDN и добавить следующее в раздел head вашего HTML.
NPM installation
Установка через npm приведена ниже
npm i alpinejsCDN installation
Вставьте приведенный ниже код в раздел head вашего HTML-файла.
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>Простой компонент
Я буду использовать подключение через CDN.
Ниже пример простого использования этой библиотеки.
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{ counter: 0 }">
<h1 x-text="'Count: ' + counter"></h1>
<button x-on:click="counter++">+1</button>
</div>
</body>
</html>Первый шаг. x-data объявляет новую область видимости компонента. Он говорит каркасу инициализировать новый компонент со следующим объектом данных. Это как свойстве data компонента Vue.
В коде приведенном выше используя директиву x-data мы определили область видимости, передавая объект в качестве значения.
Для элемента button мы слушаем директиву x-on и событие click, которое которое увеличивает значение counter.
Директива x-text отображает значение из переменной counter.
Директивы
Сейчас доступны 13 директив:
| Директива | Описание |
x-data | Объявляет новую область компонента. |
x-init | Запускает выражение при инициализации компонента. Можно получить доступ к состоянию после инициализации (что-то типа конструктора). |
x-show | Переключатель для стиля display: none; в зависимости от выражения (true или false). |
x-bind | Устанавливает значение атрибуту. Обновляться каждый раз когда обновляются данные компонента. |
x-on | Для обработки событий. Добавляет listener на элемент. |
x-model | Добавляет «двустороннюю привязку данных» к элементу. |
x-text | Работает аналогично x-bind, но обновит innerText элемента. |
x-html | Работает аналогично x-bind, но обновит innerHTML элемента. |
x-ref | Удобный способ извлечь необработанные элементы DOM из вашего компонента. |
x-if | Удалить элемент полностью из DOM. Необходимо использовать в теге < template >. |
x-for | Создайте новые узлы DOM для каждого элемента в массиве. Необходимо использовать в теге < template >. |
x-transition | Директивы для применения классов к различным этапам перехода элемента, пример. |
x-cloak | Этот атрибут удаляется при инициализации Alpine. |
И 6 магических свойств:
| Свойство | Описание |
$el | Получить корневой компонет из DOM. |
$refs | Получить элементы DOM отмечены знаком x-ref внутри компонента. |
$event | Получить нативный обьект событие. |
$dispatch | Создайте CustomEvent и dispatch с использованием .dispatchEvent(). |
$nextTick | Выполняеться после reactive DOM updates. |
$watch | Отслежывает изменение свойства. |
Вот такой минималестичный фремворк очень похож на vue.js