sharpetronics/hypermedia-systems
1
0
Fork 0
mirror of https://github.com/bigskysoftware/hypermedia-systems.git synced 2025-12-02 00:03:07 -05:00
Code Issues Projects Releases Wiki Activity

hobgoblin of grug brains

Browse Source
This commit is contained in:
Deniz Akşimşek 2022-07-26 07:05:30 +03:00
parent 06991725f7
commit 46736f7b7b
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
manuscript/CH07_gross_adding_scripting.adoc
View File

@ -354,7 +354,7 @@ You can also install it from npm, or vendor it from your own server.
The main interface of Alpine is a set of HTML attributes, the main one of which is `x-data`. The content of `x-data` is a JavaScript expression which evaluates to an object, whose properties we can access in the element. For our counter, the only state is the current number, so let's create an object with one property:
.Counter in Alpine, line 1
.Counter with Alpine, line 1
[source,html]
----
<div class="counter" x-data="{ count: 0 }">
@ -362,7 +362,7 @@ The main interface of Alpine is a set of HTML attributes, the main one of which
We've defined our state, let's actually use it:
.Counter in Alpine, lines 1-2
.Counter with Alpine, lines 1-2
[source,html,highlight=2..2]
----
<div class="counter" x-data="{ count: 0 }">
@ -374,7 +374,7 @@ This attribute sets the text content of an element to a given expression. Notice
To attach event listeners, we use `x-on`:
.Counter in Alpine, the full thing
.Counter with Alpine, the full thing
[source,html,highlight=4..4]
----
<div class="counter" x-data="{ count: 0 }">