หมวดหมู่: Alpine.js
-
บทที่ 14: การใช้ Index ใน x-for
Index ในคำสั่ง x-for คือค่าตำแหน่งของแต่ละรายการใน Array ซึ่งสามารถใช้งานได้เมื่อวนลูปผ่าน Array โดย…
-
บทที่ 15: การใช้ Key ใน x-for
Key เป็นคุณสมบัติที่ใช้ใน x-for เพื่อบอก Alpine.js ว่าจะต้องเชื่อมโยงองค์ประกอบ (Element) กับข้อมูลใ…
-
บทที่ 16: การผูกค่าด้วย x-model
x-model เป็นคำสั่งใน Alpine.js ที่ใช้สำหรับ ผูกค่า (Two-way Data Binding) ระหว่าง State และ ฟอร์มอิน…
-
บทที่ 17: การใช้ x-model กับ Checkbox และ Radio Button
x-model ช่วยจัดการค่าของ Checkbox และ Radio Button อย่างง่ายดาย โดยผูกค่าระหว่างตัวแปร State กับอินพ…
-
บทที่ 18: การใช้ x-model กับ Select Dropdown
x-model ใช้สำหรับผูกค่าใน Select Dropdown โดยค่าที่ผู้ใช้เลือกจะถูกเก็บในตัวแปร State และสามารถใช้ค่…
-
บทที่ 19: การใช้ Modifiers ใน x-model
Modifiers ใน Alpine.js เป็นคำสั่งเสริมที่ใช้ร่วมกับ x-model เพื่อปรับพฤติกรรมของการผูกค่าระหว่างอินพ…
-
บทที่ 20: การตรวจสอบฟอร์มเบื้องต้นด้วย Alpine.js
การตรวจสอบฟอร์ม (Form Validation) เป็นขั้นตอนสำคัญในการรับข้อมูลจากผู้ใช้งาน เพื่อให้มั่นใจว่าข้อมูล…
-
บทที่ 21: การใช้ x-init
x-init เป็นคำสั่งใน Alpine.js ที่ใช้สำหรับรันโค้ดหรือฟังก์ชันในครั้งแรกที่ DOM ขององค์ประกอบนั้นถูกโ…
-
บทที่ 22: การใช้ Transition กับ x-show
Alpine.js มีคำสั่ง x-transition เพื่อเพิ่มเอฟเฟกต์ Transition ในการแสดง (x-show=”true”) หรือซ่อน (x-…
-
บทที่ 23: การสร้าง Transition แบบกำหนดเอง
ransition แบบกำหนดเองใน Alpine.js ช่วยให้คุณสามารถควบคุมการแสดงผลขององค์ประกอบ (Element) ได้อย่างละเ…
-
บทที่ 24: การใช้ x-effect
x-effect เป็นคำสั่งใน Alpine.js ที่ช่วยให้คุณสามารถรันโค้ดอัตโนมัติเมื่อค่า State เปลี่ยนแปลง