Home-theater-designers
โลกของการพัฒนาเว็บนั้นวุ่นวาย—เฟรมเวิร์กผุดขึ้นและหายไป และสิ่งต่างๆ อาจล้นหลามสำหรับทั้งนักพัฒนามือใหม่และผู้มีประสบการณ์
Alpine.js แตกต่างจากเฟรมเวิร์กการพัฒนาเว็บส่วนใหญ่ตรงที่ต้องการให้เรียบง่ายที่สุดเท่าที่จะเป็นไปได้ แต่ทรงพลังพอที่จะจัดการกับแนวคิดต่างๆ เช่น ปฏิกิริยาตอบสนองและผลข้างเคียง
สร้างวิดีโอประจำวัน เลื่อนเพื่อดำเนินการต่อกับเนื้อหา
เริ่มต้นใช้งาน Alpine.js
การติดตั้ง Alpine.js นั้นค่อนข้างง่าย คุณต้องรวมสิ่งต่อไปนี้เท่านั้น สคริปต์ แท็กใน HTML ของคุณ:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
หรือคุณสามารถติดตั้ง Alpine.js ในโครงการของคุณโดยใช้ Node Package Manager:
npm install alpinejs
ปฏิกิริยาใน Alpine.js
สร้าง ดัชนี.htm ไฟล์และเพิ่มรหัสสำเร็จรูปต่อไปนี้:
ค้นหาบัญชีทั้งหมดที่เชื่อมโยงกับหมายเลขโทรศัพท์ของฉัน
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
เดอะ ผัดผ่อน คุณลักษณะใน สคริปต์ แท็กบอกให้เบราว์เซอร์เรียกใช้สคริปต์หลังจากแยกวิเคราะห์เอกสารเสร็จแล้วเท่านั้น
Alpine.js มีคำสั่งหลายอย่างเช่น x-ข้อมูล ซึ่งใช้ในการจัดเก็บข้อมูลและ x-ข้อความ ที่ใช้ตั้งค่า ข้อความภายใน ของส่วนประกอบที่แนบมาด้วย หากต้องการใช้คำสั่งเหล่านี้ ให้เพิ่มโค้ดต่อไปนี้ใน HTML ของคุณ
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</div>
คำสั่ง x-data เก็บวัตถุด้วยคีย์ ชื่อ และ องค์กร . จากนั้นคุณสามารถส่งคีย์เหล่านั้นไปยังคำสั่ง x-text เมื่อคุณรันโค้ด Alpine.js จะเติมค่า:
วิธีกู้คืนการสนทนาที่ถูกลบบน facebook
Alpine.js เปรียบเทียบกับ React อย่างไร
Alpine.js เป็นเฟรมเวิร์กที่มีน้ำหนักเบาซึ่งเหมาะสำหรับการพัฒนาโครงการขนาดเล็กและต้นแบบ
ในเฟรมเวิร์กที่ใหญ่กว่าเช่น React คุณใช้ ตะขอเช่น ใช้ผล () เพื่อจัดการกับผลข้างเคียงในวงจรชีวิตของส่วนประกอบ hook นี้เรียกใช้ฟังก์ชันการเรียกกลับเมื่อใดก็ตามที่หนึ่งในองค์ประกอบของอาร์เรย์การขึ้นต่อกันเปลี่ยนแปลง:
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
เพื่อจัดการกับผลข้างเคียงใน Alpine.js คุณสามารถใช้ไฟล์ x-ผล คำสั่ง ตัวอย่างเช่น สมมติว่าคุณต้องการดูตัวแปรและบันทึกค่าเมื่อใดก็ตามที่มีการเปลี่ยนแปลง:
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</div>
สิ่งแรกที่คุณอาจสังเกตเห็นคือคุณไม่จำเป็นต้องระบุการพึ่งพา อัลไพน์จะรับฟังการเปลี่ยนแปลงในตัวแปรทั้งหมดที่ส่งถึง x-ผล . เดอะ @คลิก คำสั่งเพิ่มจำนวนตัวแปรทีละ 1
windows 10 wifi เชื่อมต่อไม่ได้
การแสดงผลตามเงื่อนไขใน Alpine.js
การแสดงองค์ประกอบตามเงื่อนไข เป็นสิ่งที่คุณสามารถทำได้ในเฟรมเวิร์กเช่น React Alpine.js ยังช่วยให้คุณแสดงองค์ประกอบตามเงื่อนไข มันให้ x-ถ้า คำสั่งและพิเศษ แม่แบบ องค์ประกอบที่คุณสามารถใช้เพื่อแสดงผลองค์ประกอบตามเงื่อนไข
สร้างอีก ดัชนี.htm ไฟล์และเพิ่มรหัสต้นแบบเดียวกันเหมือนเมื่อก่อน เพิ่มโค้ดต่อไปนี้ในเนื้อหาของ HTML
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>
<template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</div>
เดอะ x-ถ้า คำสั่งจะถูกส่งไปยัง แม่แบบ องค์ประกอบ. สิ่งนี้มีความสำคัญเนื่องจากช่วยให้ Alpine.js ติดตามองค์ประกอบที่เพิ่มหรือลบออกจากหน้าได้ เดอะ แม่แบบ องค์ประกอบควรมีหนึ่งองค์ประกอบระดับราก รหัสต่อไปนี้จะละเมิดกฎนั้น:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
สร้างแอปพลิเคชันที่ต้องทำด้วย Alpine.js
ถึงเวลารวมทุกสิ่งที่คุณได้เรียนรู้มาและสร้างแอปพลิเคชันที่ต้องทำอย่างง่ายด้วยการสนับสนุนที่เก็บข้อมูลในตัวเครื่อง ขั้นแรก สร้างโฟลเดอร์และเติมข้อมูลด้วยไฟล์ ดัชนี.htm ไฟล์และไฟล์ style.css ไฟล์. เพิ่มรหัสสำเร็จรูปลงในไฟล์ index.htm และรวมการอ้างอิงถึง style.css ไฟล์:
<link rel="stylesheet" href="style.css">