hello world Alpine.js

เรามาดู hello world ใน alphine.js กันครับ

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <h1 x-data="{ message: 'I Alpine' }" x-text="message"></h1>
</body>
</html>

จากโค้ด เวลาเราจะใช้ alpinejs เราก็ import script เข้ามาใน head ในตัวอย่างจะใช้จาก cdn link https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js

จากโค้ด เราจะมี x-data โดยมีตัวแปร message แล้วใส่ค่าให้คำว่า I Alpine จากนั้น เราจะใช้ x-text เพื่อแสดงข้อความ message จากตัวอย่างโค้ด ผลลัพธ์ที่ได้ จะเป็น I Alpine

ตัวอย่างต่อไป เป็นตัวอย่าง counter คับ ไปดูโค้ดกัน

<div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>
 
    <span x-text="count"></span>
</div>

จากตัวอย่างโค้ด เรา ประกาศตัวแปร count = 0 ไว้ใน x-data จากนั้นตอน x-on:lick เป็นการกำหนดไว้ว่า ให้ใส่ event ตอน onclick ตอน onclick ปุ่ม ก้ให้ count++ เข้าไป จากนั้นใน span เราก็ใช้ x-text แล้วใส่ตัวแปร count เข้าไปเพื่อแสดงค่า count

แหล่งอ้างอิง https://alpinejs.dev/start-here