Series Intro - Beginner Level Alpine JS

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

Welcome to this beginner level series on Alpine JS! πŸ‘‹πŸž

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

This is the series intro video. Let's get started!

Simon Vrachliotis: [0:00] Welcome to this beginner level series on Alpine JS. Alpine JS is a rugged, minimal framework for composing JavaScript behavior in your markup. It brings declarative, reactive, data driven nature of libraries like React or Vue to your HTML templates.

[0:19] In this series, you will learn about Alpine's handy directives. You'll discover how to define a component scope with x-data, run codes on mounts with x-init, attach event listeners with x-on, display data with x-text, decide whether or not to show an element with x-show, iterate through data with x-for, retrieve DOM elements with x-ref, learn how to achieve two-way data binding with x-modal and much more.

[0:52] You'll also learn how modifiers can be applied and chained to directives to provide additional functionality, control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

[1:06] We'll also touch on what Alpine calls Magic Properties, which give you access to native browser events with $event, reference to DOM elements $refs and more. You'll gradually discover Alpine's API and syntax from building simple tabs to a mini app that fetches a dog picture based on the breed search field.

[1:29] Get ready to bring in some fresh air. It's time to walk into cool green Alpine pastures.

egghead
egghead
~ 16 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today