Series Intro - Beginner Level Alpine JS

Update a count state value with the x-on event listener directive in Alpine JS

Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS

Iterate through data with the `x-for` attribute in Alpine JS

Control enter and leave transitions with the `x-show.transition` modifier in Alpine JS

Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

Focus an input field on button click with `x-ref` and the `$refs` property in Alpine JS

Focus in input field on page load with `x-init` in Alpine JS

Refetch API data when a state value changes with the `$watch` property in Alpine JS

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

This is the series intro video. Let's get started!

Simon Vrachliotis: [0:00] Welcome to this beginner level series on Alpine JS. Alpine JS is a rugged, minimal framework for composing JavaScript behavior in your markup. It brings declarative, reactive, data driven nature of libraries like React or Vue to your HTML templates.

[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.

Series Intro - Beginner Level Alpine JS

Share this video with your friends

Course

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS