Ми будемо використовувати цей фреймворк https://github.com/alpinejs/alpine
Інсталяція
Alpine.js інсталюється легко. Ви можете використовувати npm або CDN.
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 компонента Vue2.
У наведеному вище коді використовуючи директиву 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