0% completed

All LessonsFree Lessons (3)

Introduction to AlpineJS

Overview of AlpineJS Write Our First AlpineJS Program Challenge: Write Our First AlpineJS Program Introduction to AlpineJS Directives, Methods, and Properties Quiz: Introduction to AlpineJS

AlpineJS Directives

Declare Our Website Data: x-data

Add Toggles: x-show

Listen for Browser Events: x-on

Challenge: Listen for Browser Events: x-on

Custom Events and Event Modifiers with x-on

Set Dynamic HTML Attributes: x-bind

Advanced Attribute Binding with x-bind

Set the Content of Elements: x-text and x-html

Bind Data to Form Elements: x-model

Add CSS Animations: x-transition

Loop through a List: x-for

Conditional Rendering: x-if

Quiz: AlpineJS Directives

AlpineJS Component Initialization

Run Code on Element Initialization: x-init Challenge: Run Code on Element Initialization: x-init Respond to Dependency Changes: x-effect Reference Elements by Key: x-ref Challenge: Reference Elements by Key: x-ref Delayed Rendering: x-cloak Ignore Elements on Initialization: x-ignore Quiz: AlpineJS Component Initialization

Course Assessment

AlpineJS Directives

Using Properties

Getting the Current DOM Element: el Access the Global Store: $store Dispatch Custom Events: $dispatch Watch for Data Changes: $watch Challenge: Watch for Data Changes: $watch Reference Keyed Elements: $refs Quiz: Using Properties

AlpineJS Methods

Reuse Data Objects with Alpine.data Challenge: Reuse Data Objects with Alpine.data Declare a Global Data Store: Alpine.store Quiz: AlpineJS Methods

Course Assessment

General Assessment

Conclusion

Mastering AlpineJS in a Day or Less/

...

/

Quiz: AlpineJS Directives

Quiz: AlpineJS Directives

We'll cover the following...

Take this quiz to test your understanding of AlpineJS directives.

1.

Which directive do you use to create toggles?

A.

x-if

B.

x-data

C.

x-on

D.

x-show

1 / 5