Before we dig into Alpine, let's first build something simple, but demonstrative of what your typical workflow might look like
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.
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.
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.
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
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.
The wonderful thing about Alpine stems from the fact that it can be learned entirely within a few hours. With that in mind, together, let's work on ...
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.
It's time to wrap up this project. I've compiled a list of remaining tasks and features we need to complete. Let's knock them out one by one.