Alpine.js Essentials

Let's begin with the basics. Alpine allows us to easily bind the value of an attribute to an expression. In this lesson, we'll review a variety of simple examples.

In this lesson, you'll learn how to toggle an element's display dependent upon on a piece of state. As you'll find, so many of the bread-and-butter components that all websites share can be reduced to a simple on/off switch. Show the modal, hide the modal. Show the tab, hide the tab.

You're currently familiar with one-direction data binding; however, often you'll require two-way binding in your forms. It's not enough to bind a value to an input. We also need to listen for when the input's value changes, and update the underlying data. We can allow for this by using x-model. In this episode, we'll review what precisely happens when you add this attribute to a form input. Then, as a small demo, we'll use that data to submit an AJAX request to a fake server.

Alpine does not require you to store all logic as HTML attribute values. When necessary, you can easily reference a global function that returns an object. Here, you can declare your component's data and behavior separately from the HTML. In this episode, we'll use a basic task app example to discuss how (and when) to extract component logic. We'll also review some important considerations when bundling your code.

Let's move on to transitions. Alpine offers a useful transition modifier that instantly applies a simple opacity and scale fade when toggling the display of an element. However, when you require more precision, you can easily hook into each step of the transition. Let's learn how in this episode before moving on to a real-life use case.

Now that you understand the basic syntax for defining transitions, in this episode, let's add the appropriate transitions for a typical pop-up menu.

Let's move on to events. You already know the basics of how to listen for any DOM events, so let's take things up a notch and discuss how Alpine components can communicate with one another through custom events that bubble up to the window.

Let's keep working on our Alpine.js implementation of TodoMVC. In this episode, we'll focus on filters, clearing completed tasks, and editing individual tasks.