Alpine.js Crash Course

Dive into a comprehensive 42-minute video tutorial on Alpine.js, exploring all directives, properties, and stores. Learn to set up files, create components with x-data, and master essential directives like x-show, x-cloak, and x-on for event handling. Discover how to manipulate text with x-text, add transitions, and utilize x-effect for reactive updates. Explore data binding with x-bind and x-model, conditional rendering with x-if, and loop through data using x-for. Gain insights into state manipulation, referencing elements with x-ref, and working with HTML content. Understand Alpine.js magic properties like $el, $watch, and $dispatch, and learn to access component data. Conclude with an introduction to Alpine Stores for global state management and the Mask plugin for input formatting.

- Intro.
- File Setup.
- x-data & Components.
- x-show.
- x-cloak.
- x-on & Events.
- x-text.
- x-transition.
- x-effect.
- x-bind.
- x-model.
- x-if.
- x-for & Loops.
- Manipulating State.
- x-ref & $refs.
- x-html.
- $el.
- $watch.
- $dispatch.
- $data.
- Alpine Stores.
- Mask Plugin.