Welcome to this beginner level series on Alpine JS! 👋🏞
This is the series intro video. Let's get started!
[0:19] In this series, you will learn about Alpine's handy directives. You'll discover how to define a component scope with x-data, run codes on mounts with x-init, attach event listeners with x-on, display data with x-text, decide whether or not to show an element with x-show, iterate through data with x-for, retrieve DOM elements with x-ref, learn how to achieve two-way data binding with x-modal and much more.
[0:52] You'll also learn how modifiers can be applied and chained to directives to provide additional functionality, control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.
[1:06] We'll also touch on what Alpine calls Magic Properties, which give you access to native browser events with $event, reference to DOM elements $refs and more. You'll gradually discover Alpine's API and syntax from building simple tabs to a mini app that fetches a dog picture based on the breed search field.
[1:29] Get ready to bring in some fresh air. It's time to walk into cool green Alpine pastures.