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

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 свойств и 3 методов.

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

18 атрибутов

x-data

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

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

x-init

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

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

x-show

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

<div x-show="open">
  ...
</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-modelable

Создавайте двустороннюю привязку данных для пользовательских компонентов:

<div x-data="{ value: '' }">
  <input x-modelable="value" type="text">
  <p>Value: <span x-text="value"></span></p>
</div>

x-for

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

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

x-transition

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

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

x-effect

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

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

x-ignore

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

<div x-ignore>
  ...
</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-teleport

Перемещайте содержимое компонента в другое место в DOM, сохраняя его реактивность:

<div x-data="{ show: false }">
  <button x-on:click="show = !show">
    Переключить
  </button>
  <template x-if="show">
    <div x-teleport="#target">
      Это будет телепортировано!
    </div>
  </template>
</div>
<div id="target"></div>

x-if

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

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

x-id

Генерируйте уникальные идентификаторы для элементов:

<div x-id="['text-input']">
  <label x-bind:for="$id('text-input')">Имя</label>
  <!-- for="text-input-1" -->

  <input x-bind:id="$id('text-input')" />
  <!-- id="text-input-1" -->
</div>

9 свойств

$el

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

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

$refs

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

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

$store

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

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

$watch

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

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

$dispatch

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

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

$nextTick

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

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

$root

Получайте доступ к ближайшему элементу в дереве DOM, содержащему x-data:

<div x-data data-message="Привет, мир!">
  <button x-on:click="alert($root.dataset.message)">Привет!</button>
</div>

$data

Получайте доступ к реактивным данным компонента для использования в шаблонах и методах:

<div x-data="{ count: 0 }">
  <button x-on:click="count  ">Увеличить</button>
  <p>Счётчик: <span x-text="$data.count"></span></p>
</div>

$id

Генерируйте уникальный идентификатор для каждого экземпляра компонента:

<div x-data="{ id: $id('text-input') }">
  <label x-bind:for="id">Какой-то текст... </label> <!-- "text-input-1" -->
  <input type="text" x-bind:id="id"> <!-- "text-input-1" -->
</div>

3 метода

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.bind

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

<button x-bind="SomeButton"></button>

Alpine.bind('SomeButton', () => ({
  type: 'button',

  '@click'() {
    this.doSomething();
  },

  ':disabled'() {
    return this.shouldDisable;
  },
}))

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

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