หมวดหมู่: Alpine.js

บทที่ 1: แนะนำ Alpine.js และการติดตั้ง

Alpine.js เป็น JavaScript Framework ขนาดเล็กที่ถูกออกแบบมาเพื่อเพิ่มฟังก์ชันให้ HTML ได้ง่าย ๆ โดยไม…
บทที่ 2: สร้าง Component แรก

ใน Alpine.js, Component คือกลุ่มของ HTML, JavaScript, และ State ที่ทำงานร่วมกันใน Element เดียวโดยใช…
บทที่ 3: การใช้ x-data และการกำหนด State

x-data ใน Alpine.js เป็นคำสั่งที่ใช้สำหรับกำหนด State ของ Component โดยข้อมูลใน x-data จะถูกจัดเก็บใ…
บทที่ 4: การแสดงค่าด้วย x-text

x-text เป็นคำสั่งใน Alpine.js ที่ใช้แสดงค่าจาก State หรือ ตัวแปร โดยจะแปลงค่าให้เป็นข้อความ (Text) แ…
บทที่ 5: การแสดง HTML ด้วย x-html

x-html เป็นคำสั่งใน Alpine.js ที่ใช้แสดงเนื้อหา HTML ภายใน Element โดยจะแทนที่เนื้อหาทั้งหมดของ Elem…
บทที่ 6: การจับ Event ด้วย x-on

x-on ใน Alpine.js ใช้สำหรับจับ Events ที่เกิดขึ้นใน DOM เช่น การคลิก, การเลื่อนเมาส์, การป้อนข้อมูลใ…
บทที่ 7: การย่อ x-on เป็น @

ใน Alpine.js, คำสั่ง x-on ถูกใช้เพื่อจับ Event ต่าง ๆ เช่น click, mouseover, หรือ keydown อย่างไรก็ต…
บทที่ 8: การผูกค่าด้วย x-bind

x-bind เป็นคำสั่งใน Alpine.js ที่ใช้สำหรับผูกค่าจาก State ไปยัง Attributes ของ HTML Element เช่น cla…
บทที่ 9: การย่อ x-bind เป็น :

Alpine.js, คำสั่ง x-bind ถูกใช้เพื่อผูกค่าจาก State ไปยัง Attributes ของ HTML Element แต่เพื่อให้โค้…
บทที่ 10: การใช้ Template Literals

Template Literals เป็นฟีเจอร์ของ JavaScript ที่ช่วยให้เราสามารถสร้างข้อความ (String) แบบ Dynamic ได้…
บทที่ 11: การแสดง/ซ่อนด้วย x-show

x-show เป็นคำสั่งใน Alpine.js ที่ใช้สำหรับการแสดงหรือซ่อน HTML Element บนหน้าเว็บโดยอ้างอิงจากเงื่อน…
บทที่ 12: การใช้ x-if และข้อแตกต่างจาก x-show

x-if เป็นคำสั่งใน Alpine.js ที่ใช้สำหรับแสดงหรือซ่อน HTML Element โดยการเพิ่มหรือ ลบองค์ประกอบออกจาก…