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:
• Alpine.js
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: https://www.bugbytes.io/posts/introdu...
👾 Github: https://github.com/bugbytes-io/django...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Starter Code: https://github.com/bugbytes-io/django...
Alpine.js docs: https://alpinejs.dev/start-here
x-transition directive: https://alpinejs.dev/directives/trans...
#django #alpinejs #python