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: Using Properties

Quiz: Using Properties

Test yourself on AlpineJS magic properties.

We'll cover the following...

Take this quiz to test your understanding of AlpineJS properties.

1.

Suppose we want to access a particular element from a group of elements in an AlpineJS component. Which magic property do we use?

A.

$refs with x-ref

B.

$el

C.

$store with Alpine.store

D.

$watch

1 / 5