Alpine.js is a relatively new JavaScript framework for defining behavior directly in your markup. While similar to frameworks like Angular and Vue, you may find that Alpine is a bit more light-weight and portable. In this series, one step at a time, I'll get you up and running as quickly as possible
Let's Build a Memory Game
Before we dig into Alpine, let's first build something simple, but demonstrative of what your typical workflow might look like
Data Binding
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.
Toggle Visibility Using State
In this lesson, you'll learn how to toggle an element's display dependent upon on a piece of state.
Two-Way Data Binding
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.
How and When to Extract Component Logic
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.
Transitions 101
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
Transitions 102
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.
Handling Custom Events
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.
TodoMVC with Alpine: Part 1
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 ...
TodoMVC with Alpine: Part 2
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.
TodoMVC with Alpine: Part 3
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.
این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.