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
01
قسمت 1
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
02
قسمت 2
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.
03
قسمت 3
Toggle Visibility Using State
In this lesson, you'll learn how to toggle an element's display dependent upon on a piece of state.
04
قسمت 4
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.
05
قسمت 5
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.
06
قسمت 6
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
07
قسمت 7
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.
08
قسمت 8
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.
09
قسمت 9
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 ...
10
قسمت 10
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.
11
قسمت 11
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.