"I love Alpine.js"

2022-05-02 20:30:53

→ Docs Your new, lightweight, JavaScript framework. Expand Content... { let keys = Object.keys(steps) direction = keys.indexOf(value) > keys.indexOf(old) ? 'right' : 'left' })" > Simple. Lightweight. Powerful as hell. Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going. Alpine is a collection of 15 attributes, 6 properties, and 2 methods. There is no better way to get a feel for what Alpine is and what it can do, than by seeing it for yourself: Show More ↓ x-data Declare a new Alpine component and its data for a block of HTML ... x-bind Dynamically set HTML attributes on an element ... x-on Listen for browser events on an element Toggle x-text Set the text content of an element Copyright © x-html Set the inner HTML of an element ... x-model Synchronize a piece of data with an input element Searching for: x-show Toggle the visibility of an element ... x-transition Transition an element in and out using CSS transitions ... x-for Repeat a block of HTML based on a data set x-if Conditionally add/remove a block of HTML from the page entirely. ... x-init Run code when an element is initialized by Alpine x-effect Execute a script each time one of its dependancies change x-ref Reference elements directly by their specified keys using the $refs magic property Copy x-cloak Hide a block of HTML until after Alpine is finished initializing its contents ... x-ignore Prevent a block of HTML from being initialized by Alpine ... $store Access a global store registered using Alpine.store(...) $el Reference the current DOM element $dispatch Dispatch a custom browser event from the current element ... $watch Watch a piece of data and run the provided callback anytime it changes ... $refs Reference an element by key (specified using x-ref) Remove Me $nextTick Wait until the next "tick" (browser paint) to run a bit of code ... Alpine.data Reuse a data object and reference it using x-data ... ... 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 Notify ... Alpine.store('notifications', { items: [], notify(message) { this.items.push(message) } }) I hope you find Alpine to be a breath of fresh air. Silence among noise. - Caleb