Простой, лёгкий и безумно мощный

Alpine — это надёжный и простой инструмент для создания поведения непосредственно в вашей разметке. Думайте об этом как о jQuery для современного Интернета. Добавьте тег script и приступайте к работе.

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{ open: false }">
    <button @click="open = true">Развернуть</button>

    <span x-show="open">
        Контент...
    </span>
</div>

Alpine — это коллекция из 15 атрибутов, 6 свойств и 2 методов.

Нет лучшего способа разобраться в том, что такое Alpine и на что он способен, чем увидеть это своими глазами:

15 атрибутов

x-data

Объявляйте новый компонент Alpine и его данные для блока HTML:

<div x-data="{ open: false }">
    ...
</div>

x-bind

Устанавливайте динамические атрибуты HTML для элемента:

<div x-bind:class="! open ? 'hidden' : ''">
  ...
</div>

x-on

Прослушивайте события браузера на элементе:

<button x-on:click="open = ! open">
  Переключить
</button>

x-text

Устанавливайте текстовое содержимое элемента:

<div>
  Авторское право © <span x-text="new Date().getFullYear()"></span>
</div>

x-html

Устанавливайте внутренний HTML элемента:

<div x-html="(await axios.get('/some/html/partial')).data">
  ...
</div>

x-model

Синхронизируйте часть данных с элементом ввода:

<div x-data="{ search: '' }">
  <input type="text" x-model="search">
  Поиск: <span x-text="search"></span>
</div>

x-show

Переключайте видимость элемента:

<div x-show="open">
  ...
</div>

x-transition

Перемещайте элемент внутрь и наружу с помощью переходов CSS:

<div x-show="open" x-transition>
  ...
</div>

x-for

Повторяйте блок HTML на основе набора данных:

<template x-for="post in posts">
  <h2 x-text="post.title"></h2>
</template>

x-if

Добавляйте/удаляйте блок HTML по условию со страницы целиком:

<template x-if="open">
  <div>...</div>
</template>

x-init

Запускайте код, когда элемент инициализируется с помощью Alpine:

<div x-init="date = new Date()"></div>

x-effect

Выполняйте скрипт каждый раз, когда меняется одна из его зависимостей:

<div x-effect="console.log('count: '+count)"></div>

x-ref

Ссылайтесь на элементы напрямую по их указанным ключам, используя магическое свойство $refs:

<input type="text" x-ref="content">
<button x-on:click="navigator.clipboard.writeText($refs.content.value)">
  Скопировать
</button>

x-cloak

Скрывайте блок HTML до тех пор, пока Alpine не завершит инициализацию его содержимого:

<div x-cloak>
  ...
</div>

x-ignore

Предотвращайте инициализацию блока HTML с помощью Alpine:

<div x-ignore>
  ...
</div>

6 свойств

$store

Получайте доступ к глобальному хранилищу, зарегистрированному с помощью Alpine.store(...):

<h1 x-text="$store.site.title"></h1>

$el

Ссылайтесь на текущий элемент DOM:

<div x-init="new Pikaday($el)"></div>

$dispatch

Отправляйте пользовательское событие браузера из текущего элемента:

<div x-on:notify="...">
  <button x-on:click="$dispatch('notify')">...</button>
</div>

$watch

Отслеживайте фрагмент данных и при его изменении запускайте предоставленный обратный вызов:

<div x-init="$watch('count', value => {
  console.log('count: ' + value)
})">...</div>

$refs

Ссылайтесь на элемент по ключу (задается с помощью x-ref):

<div x-init="$refs.button.remove()">
  <button x-ref="button">Удалите меня</button>
</div>

$nextTick

Дожидайтесь следующего «тика» (отрисовка в браузере) для запуска части кода:

<div
  x-text="count"
  x-text="$nextTick(() => {
    console.log('count: ' + $el.textContent)
  })"
>...</div>

2 метода

Alpine.data

Повторно используйте объект данных и ссылайтесь на него с помощью x-data:

<div x-data="dropdown">
  ...
</div>

Alpine.data('dropdown', () => ({
  open: false,

  toggle() {
    this.open = ! this.open
  }
}))

Alpine.store

Объявляйте часть глобальных, реактивных данных, доступ к которым можно получить из любого места с помощью $store:

<button x-on:click="$store.notifications.notify('...')">
  Уведомлять
</button>

Alpine.store('notifications', {
  items: [],

  notify(message) {
    this.items.push(message)
  }
})

Надеюсь, что Alpine станет для вас глотком свежего воздуха. Тишиной среди шума.

Caleb Porzio (Калеб Порцио), создатель Alpine.js