Getting Started with Alpine.js

Alpine.js is a lightweight JavaScript framework that's a perfect fit for adding functionality onto existing markup.
In Video: Chris Sev ( / chris__sev )
0:00 Introduction
01:30 Getting Started with Alpine.js
02:06 Creating a Button
02:57 Click Events with Alpine.js
03:48 Showing and Hiding an Element
05:56 x-text
06:28 Alpine.js vs React vs Vue
07:51 Looping over a list
09:12 x-model 2-way data binding
10:52 Submitting a Form with Alpine.js
12:03 Adding Alpine.js Methods
13:17 Conclusion
To learn more about DigitalOcean: www.digitalocean.com/
Follow us on Twitch: / digitaloceantv
Follow us on Twitter: / digitalocean
Like us on Facebook: / digitaloceancloudhosting
Follow us on Instagram: / thedigitalocean
We're hiring: grnh.se/aicoph1

[@kimbapslayer1995]

Wow I'm so legit amazed by this. I am floored. Ill be offering this service to my freelance portfolio.

[@silasmurithi4706]

Awesome , thu' I was waiting for how to search and delete items in the list lol.

[@RootsterAnon]

for search you can use .filter (const ages = [32, 33, 16, 40]; const result = ages.filter(checkAdult); function checkAdult(age) { return age >= 18; }) and for delete you can use .splice (const fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi");)

[@kimbapslayer1995]

Only thing that throws me off is having empty values between tags lol. Too bad HTML requires closing tags unlike jsx that can have a self closing tag.

[@bayrock1337]

True, but if it was self closing then you would confuse it to be a JSX component. This way you know it is vanilla HTML.

[@KevinArellano]

1st and no... I'll stick with html and nothing more. That’s correct, no css nor Javascript.

[@RootsterAnon]

lol, what are you talking about> 🤣🤣🤣🤣

[@KevinArellano]

@@RootsterAnon I was kidding lol. My jokes are beyond human comprehension.

[@RootsterAnon]

@@KevinArellano you don't understand how relieved I am right now. You got me there... I confess... :D