ویو جی اس

Alpine.js Essentials

Alpine.js Essentials

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

سطح متوسط 11 جلسه آموزشی 00:33:00 ساعت
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.

دوره در حال اجرا

این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.