Alpine.js

Мы будем использовать этот фремворк https://github.com/alpinejs/alpine

Установка

Alpine.js устанавливаеться легко. Вы можете использовать npm или CDN и добавить следующее в раздел head вашего HTML.

NPM installation

Установка через npm приведена ниже

npm i alpinejs

CDN 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