https://github.com/thecodeholic/alpinejs-course
Source code files for Alpine.js YouTube Course
https://github.com/thecodeholic/alpinejs-course
Last synced: 3 months ago
JSON representation
Source code files for Alpine.js YouTube Course
- Host: GitHub
- URL: https://github.com/thecodeholic/alpinejs-course
- Owner: thecodeholic
- Created: 2022-05-20T18:17:23.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-04T03:24:14.000Z (about 3 years ago)
- Last Synced: 2025-04-10T00:53:46.679Z (3 months ago)
- Language: HTML
- Size: 278 KB
- Stars: 53
- Watchers: 3
- Forks: 20
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Alpinejs Course
Source code files for Alpine.js [4 hours tutorial](https://youtu.be/5ILDMMLgX0E)
The course is splitted into 3 parts: Alpine.js Basics, Creating Alpine.js Components, Alpine.js Plugins
## Alpine.js Basics
In basics section we will learn all the basic things about alpine.js: its directives and magic properties.
#### Directives
- x-data, x-text, x-html
- x-data with methods
- Re-usable Data
- Data-Less components
- Data coming from Store
- x-init
- Scoping
- Getters & Setters
- x-show & x-transition
- x-if
- x-for
- x-for in range
- x-bind: class
- x-bind: style
- x-bind id
- x-on
- x-effect
- x-ignore
- x-ref
- x-cloak
- x-teleport
#### Magic Properties
- $el
- $refs
- $store
- $watch
- $dispatch
- $nextTick
- $root
- $data
- $id
## Alpine.js Components
In components section we will build 7 unique components with Alpine.js: [Demo](https://alpinejs-course.netlify.app/components/)
#### Components Created
1. Dropdown
2. Modal
3. Tabs
4. Carousel
5. Accordion
6. Notification
7. Popover
## Alpine.js Plugins
In this section we will explore Alpine.js core plugins and understand how we can use them in practice.
#### Plugins Explored
1. Mask
2. Intersect
3. Persist
4. Focus
5. Collapse
6. Morph