Alpine JS Quick Start - Learning Part 1
  • The new version Alpine.js V3 : a short introduction
  • Preparation: Editor, Plugins, Browser
  • Course Materials Part 1
  • How to use this course the most efficient way
  • Object and Scope: Where is your object visible?
  • x-bind (:) - manipulate HTML attributes
  • x-model: set object value to input value
  • x-show / x-if: Hide or show elements 2 different ways
  • x-on / x-ref / $refs
  • Improvements in Alpinejs Version 3 on event listeners (x-on)
  • Recap of what you learned so far
Time to practice
  • Practical Section #1 - Introduction + exercise files
  • Tabs example challenge
  • Tabs challenge solution
  • Simple calculator challenge
  • Simple calculator solution
  • Color Slider challenge
  • Color Slider solution
Learning Part 2
  • Section Introduction
  • Function Calls in Alpinejs
  • Functions with properties + @submit.prevent
  • Components and parameters + external file example
  • Refactor Color Slider Example
  • Refactor Tabs Example
  • Transitions with modifiers on x-show
  • Transitions with x-transition
  • x-cloak: Hiding elements until Alpine finishes loading
  • x-for: Loops in Alpinejs
  • Loops + index / HTML-Output: Refactoring Tabs to be totally flexible
  • x-init: Inject data in your alpine component
  • RECAP: Usage of functions