Стэки разработки - AlpineJS

Простой лёгкий фрэймворк JavaScript для решения любых задач на стороне фронтенд.

Alpine — это надежный, минималистичный инструмент для создания поведения непосредственно в вашей разметке. Думайте об этом как о jQuery для современной сети. Добавьте тег сценария и приступайте. Alpine — это набор из 15 атрибутов, 6 свойств и 2 методов.

Атрибуты AlpineJS

x-data

Declare a new Alpine component and its data for a block of HTML

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

x-bind

Dynamically set HTML attributes on an element

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

x-on

Listen for browser events on an element

<button x-on:click="open = ! open">   Toggle </button>

x-text

Set the text content of an element

<div>   Copyright ©     <span x-text="new Date().getFullYear()"></span> </div>

x-html

Set the inner HTML of an element

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

x-model

Synchronize a piece of data with an input element

<div x-data="{ search: '' }">   <input type="text" x-model="search">     Searching for: <span x-text="search"></span> </div>

x-show

Toggle the visibility of an element

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

x-transition

Transition an element in and out using CSS transitions

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

x-for

Repeat a block of HTML based on a data set

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

x-if

Conditionally add/remove a block of HTML from the page entirely

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

x-init

Run code when an element is initialized by Alpine

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

x-effect

Execute a script each time one of its dependancies change

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

x-ref

Reference elements directly by their specified keys using the $refs magic property

<input type="text" x-ref="content">   <button x-on:click="navigator.clipboard.writeText($refs.content.value)">   Copy </button>

x-cloak

Hide a block of HTML until after Alpine is finished initializing its contents

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

x-ignore

Prevent a block of HTML from being initialized by Alpine

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

Свойства

$store

Access a global store registered using Alpine.store(...)

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

$el

Reference the current DOM element

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

$dispatch

Dispatch a custom browser event from the current element

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

$watch

Watch a piece of data and run the provided callback anytime it changes

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

$refs

Reference an element by key (specified using x-ref)

<div x-init="$refs.button.remove()">   <button x-ref="button">Remove Me</button> </div>

$nextTick

Wait until the next "tick" (browser paint) to run a bit of code

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

Методы

Alpine.data

Reuse a data object and reference it using x-data

<div x-data="dropdown">   ... </div>   ...   Alpine.data('dropdown', () => ({   open: false,     toggle() {     this.open = ! this.open   } }))

Alpine.store

Declare a piece of global, reactive, data that can be accessed from anywhere using $store

<button @click="$store.notifications.notify('...')">   Notify </button>   ...   Alpine.store('notifications', {   items: [],     notify(message) {     this.items.push(message)   } })