The basics of Alpine are pretty straightforward: you define some data inside your markup using the x-data attribute, and then you can show this data to the users using the x-text attribute on a tag, like this:
<div x-data="{ name: 'Joe' }">
</div>
<div x-data="{ name: 'Joe' }">
<p x-text="name"></p>
</div>
Using boolean state and the x-show attribute you can easily hide or show some portions of the UI:
<div x-data="{ showThis: false }">
<p x-show="showThis">Show this</p>
</div>
If you set the showThis variable to false, nothing will be displayed:
You can use x-show="!showThis" to do the opposite:
One thing to the data is only available on child elements of the tag with the x-data attribute.
For example in this case the second p tag doesn’t have access to the showThis value, and it’s shown regardless of its value defined in the div (it’s isolated):
Lessons in this unit:
| 0: | Introduction |
| 1: | Installing Alpine |
| 2: | ▶︎ The basics of Alpine |
| 3: | Events |
| 4: | Defining data |
| 5: | Looping |
| 6: | Binding user input to variables |
| 7: | Watching variables change |
| 8: | Stores |
Are you intimidated by Git? Can’t figure out
merge vs rebase? Are you afraid of screwing up
something any time you have to do something in
Git? Do you rely on ChatGPT or random people’s
answer on StackOverflow to fix your problems?
Your coworkers are tired of explaining Git to
you all the time? Git is something we all need
to use, but few of us really master it. I
created this course to improve your Git (and
GitHub) knowledge at a radical level. Launching
May 21, 2024. Join the waiting list!