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 Component Initialization

Quiz: AlpineJS Component Initialization

Quiz yourself on AlpineJS directives.

We'll cover the following...

Test your knowledge of the x-init, x-effect, x-ref, x-cloak, and x-ignore AlpineJS directives.

1.

We use the ________ directive to hide an element until AlpineJS fully loads on the page.

A.

x-ignore

B.

x-cloak

C.

x-ref

D.

x-bind

1 / 4