Django and Alpine.js - Introduction to Alpine.js

In this video, we'll introduce the Alpine.js library - this is a lightweight JavaScript library that provides directives that can help you build basic functionality into your templates. Alpine.js is a client-side library and works with any backend technology - we will use Django in this video. 📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀: 00:00 Intro 01:04 Setup 03:09 Building a Counter component 06:04 Binding input element to data with the x-model directive 07:39 Building interactive list component with x-for directive 09:50 Adding image and binding src attribute 11:02 Toggling images with x-show directive 14:03 Changing class with x-bind directive 15:24 Transitions with the x-transition directive 16:13 Fetching data from server with x-init directive 19:45 Outro ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: https://ko-fi.com/bugbytes ▶️ Full Playlist: https://www.youtube.com/playlist?list=PL-2EBeDYMIbQTx0h0EQfw3BXjqRQTiX_c 𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮: 📖 Blog: https://www.bugbytes.io/posts/introduction-to-alpinejs/ 👾 Github: https://github.com/bugbytes-io/django-alpinejs-examples 🐦 Twitter: https://twitter.com/bugbytesio 📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻: Starter Code: https://github.com/bugbytes-io/django-alpinejs-examples Alpine.js docs: https://alpinejs.dev/start-here x-transition directive: https://alpinejs.dev/directives/transition #django #alpinejs #python