Объявляйте новый компонент Alpine и его данные для блока HTML:
<div x-data="{ open: false }"> ...</div>
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 — это коллекция из 18 атрибутов, 9 свойств и 3 методов.
Нет лучшего способа разобраться в том, что такое Alpine и на что он способен, чем увидеть это своими глазами:
Объявляйте новый компонент Alpine и его данные для блока HTML:
<div x-data="{ open: false }"> ...</div>
Запускайте код, когда элемент инициализируется с помощью Alpine:
<div x-init="date = new Date()"></div>
Переключайте видимость элемента:
<div x-show="open"> ...</div>
Устанавливайте динамические атрибуты HTML для элемента:
<div x-bind:class="! open ? 'hidden' : ''"> ...</div>
Прослушивайте события браузера на элементе:
<button x-on:click="open = ! open"> Переключить</button>
Устанавливайте текстовое содержимое элемента:
<div> Авторское право © <span x-text="new Date().getFullYear()"></span></div>
Устанавливайте внутренний HTML элемента:
<div x-html="(await axios.get('/some/html/partial')).data"> ...</div>
Синхронизируйте часть данных с элементом ввода:
<div x-data="{ search: '' }"> <input type="text" x-model="search"> Поиск: <span x-text="search"></span></div>
Создавайте двустороннюю привязку данных для пользовательских компонентов:
<div x-data="{ value: '' }"> <input x-modelable="value" type="text"> <p>Value: <span x-text="value"></span></p></div>
Повторяйте блок HTML на основе набора данных:
<template x-for="post in posts"> <h2 x-text="post.title"></h2></template>
Перемещайте элемент внутрь и наружу с помощью переходов CSS:
<div x-show="open" x-transition> ...</div>
Выполняйте скрипт каждый раз, когда меняется одна из его зависимостей:
<div x-effect="console.log('count: '+count)"></div>
Предотвращайте инициализацию блока HTML с помощью Alpine:
<div x-ignore> ...</div>
Ссылайтесь на элементы напрямую по их указанным ключам, используя магическое свойство $refs
:
<input type="text" x-ref="content"><button x-on:click="navigator.clipboard.writeText($refs.content.value)"> Скопировать</button>
Скрывайте блок HTML до тех пор, пока Alpine не завершит инициализацию его содержимого:
<div x-cloak> ...</div>
Перемещайте содержимое компонента в другое место в 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>
Добавляйте/удаляйте блок HTML по условию:
<template x-if="open"> <div>...</div></template>
Генерируйте уникальные идентификаторы для элементов:
<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>
Ссылайтесь на текущий элемент DOM:
<div x-init="new Pikaday($el)"></div>
Ссылайтесь на элемент по ключу (задается с помощью x-ref
):
<div x-init="$refs.button.remove()"> <button x-ref="button">Удалите меня</button></div>
Получайте доступ к глобальному хранилищу, зарегистрированному с помощью Alpine.store(...)
:
<h1 x-text="$store.site.title"></h1>
Отслеживайте фрагмент данных и при его изменении запускайте предоставленный обратный вызов:
<div x-init="$watch('count', value => { console.log('count: ' + value)})">...</div>
Отправляйте пользовательское событие браузера из текущего элемента:
<div x-on:notify="..."> <button x-on:click="$dispatch('notify')">...</button></div>
Дожидайтесь следующего «тика» (отрисовка в браузере) для запуска части кода:
<div x-text="count" x-text="$nextTick(() => { console.log('count: ' + $el.textContent) })">...</div>
Получайте доступ к ближайшему элементу в дереве DOM, содержащему x-data
:
<div x-data data-message="Привет, мир!"> <button x-on:click="alert($root.dataset.message)">Привет!</button></div>
Получайте доступ к реактивным данным компонента для использования в шаблонах и методах:
<div x-data="{ count: 0 }"> <button x-on:click="count++">Увеличить</button> <p>Счётчик: <span x-text="$data.count"></span></p></div>
Генерируйте уникальный идентификатор для каждого экземпляра компонента:
<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>
Повторно используйте объект данных и ссылайтесь на него с помощью x-data
:
<div x-data="dropdown"> ...</div>
Alpine.data('dropdown', () => ({ open: false,
toggle() { this.open = ! this.open }}))
Объявляйте часть глобальных, реактивных данных, доступ к которым можно получить из любого места с помощью $store
:
<button x-on:click="$store.notifications.notify('...')"> Уведомлять</button>
Alpine.store('notifications', { items: [],
notify(message) { this.items.push(message) }})
Повторно используйте объект атрибутов и привязывайтесь к нему с помощью x-bind
:
<button x-bind="SomeButton"></button>
Alpine.bind('SomeButton', () => ({ type: 'button',
'@click'() { this.doSomething(); },
':disabled'() { return this.shouldDisable; },}))
Надеюсь, что Alpine станет для вас глотком свежего воздуха. Тишиной среди шума.
Caleb Porzio (Калеб Порцио), создатель Alpine.js