Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 2: สร้าง Component แรก

1. ความเข้าใจเกี่ยวกับ Component ใน Alpine.js

ใน Alpine.js, Component คือกลุ่มของ HTML, JavaScript, และ State ที่ทำงานร่วมกันใน Element เดียวโดยใช้ x-data เป็นตัวกำหนด State และจัดการพฤติกรรมของ Component นั้นๆ

  • x-data: ใช้สำหรับกำหนด State ของ Component
  • x-text: ใช้เพื่อแสดงค่าจาก State ในรูปแบบข้อความ

2. การสร้าง Component เบื้องต้น

ตัวอย่าง: การใช้ x-data และ x-text
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine.js Component Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
</head>
<body>
    <div x-data="{ message: 'Hello, Alpine!' }">
        <h1 x-text="message"></h1>
    </div>
</body>
</html>

คำอธิบายตัวอย่าง

  1. x-data:
    • กำหนด State เริ่มต้นในรูปแบบ Object เช่น { message: 'Hello, Alpine!' }
    • message จะเป็นตัวแปรที่ใช้ใน Component
  2. x-text:
    • ใช้แสดงข้อความของตัวแปร message บนหน้าจอ

เมื่อโหลดหน้าเว็บ ข้อความ “Hello, Alpine!” จะแสดงใน <h1> โดยตรง

3. การเพิ่มปฏิสัมพันธ์ใน Component

เพิ่มการเปลี่ยนแปลงค่า State ด้วยการจับ Event เช่น @click:

<div x-data="{ message: 'Hello, Alpine!' }">
    <h1 x-text="message"></h1>
    <button @click="message = 'You clicked me!'">Click Me</button>
</div>
การทำงาน:
  • เมื่อผู้ใช้คลิกปุ่ม Click Me, ค่าใน message จะเปลี่ยนเป็น “You clicked me!” และข้อความใน <h1> จะอัปเดตทันที

4. การปรับใช้ในสถานการณ์จริง

ตัวอย่าง: นับจำนวนคลิก

<div x-data="{ count: 0 }">
    <h1 x-text="'Count: ' + count"></h1>
    <button @click="count++">Increase</button>
</div>
การทำงาน:
  • count คือ State ที่เริ่มต้นที่ 0
  • เมื่อคลิกปุ่ม ค่า count จะเพิ่มขึ้นทีละ 1

5. ข้อดีของการใช้ x-data และ x-text

  • ใช้งานง่ายและโค้ดกระชับ
  • ไม่ต้องเขียน JavaScript แยกจาก HTML
  • State และ DOM ผูกกันโดยตรง

สรุป

ในบทนี้ คุณได้เรียนรู้วิธีสร้าง Component แรกใน Alpine.js โดยใช้ x-data เพื่อกำหนด State และ x-text เพื่อแสดงค่า ในบทถัดไป เราจะเรียนรู้วิธีจัดการ Event และผูกค่ากับ Attribute ต่าง ๆ!