Introduction to Alpine.js
  • Hello Alpine
  • Useful Extensions for Visual Studio Code
Essentials of Alpine.js
  • Alpine Component Start with `x-data`
  • Data Binding with `x-bind` and `x-model`
  • Special `x-model` Modifiers
  • Toggle elements with `x-show`
  • Removing page flickerings with `x-cloak`
  • Conditional rendering with `x-if`
  • We can use regular JavaScript in directives
Working with Dynamic Data
  • Render templates multiple times with `x-for`
  • Objects in for-loops and binding a key in `x-for`
  • Fetching From an API on `x-init`
  • Extracting out inline JavaScript
Finishing Up
  • Where to Go From Here