Uploaded May 2022 | Updated September 2026, 1 week ago

---

We will learn about all of the Alpine.js directives, properties as well as stores.

Code:
codepen.io/bradtraversy/pen/NWyrEZv

👇 Website & Courses:
traversymedia.com

💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia

👇 Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
2:02 - File Setup
3:41 - x-data & Components
4:15 - x-show
5:00 - x-cloak
5:52 - x-on & Events
7:26 - x-text
9:18 - x-transition
9:45 - x-effect
10:57 - x-bind
12:21 - x-model
14:22 - x-if
15:29 - x-for & Loops
17:03 - Manipulating State
18:36 - x-ref & $refs
21:04 - x-html
23:02 - $el
24:16 - $watch
25:59 - $dispatch
27:49 - $data
31:46 - Alpine Stores
37:59 - Mask Plugin