alpinejs-training/01-state.html at master · lmajano/alpinejs-training · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <!-- Easy Installation: https://alpinejs.dev/essentials/installation -->
        <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
        <title>Alpine.js : Declare & React</title>
    </head>
    <body>

    <!--
    Any HTML element can become an Alpine Component.
    State (JavaScript data that Alpine watches for changes) is at the core of everything you do in Alpine.
    You can provide local data to a chunk of HTML, or make it globally available for use anywhere on a
    page using x-data or Alpine.store() respectively.
    -->
    <div x-data = "{
        // Contain reactive properties, functions, or expressions
        hello : 'cfsummit',
        open : true,
        toggle(){
            this.open = !this.open
        }
    }">

        <div x-text="hello" x-show="open"></div>
        <button x-on:click="toggle" x-text="!open ? 'Open' : 'Close'"></button>

    </div>

  </body>
</html>