Home-theater-designers
Verden af webudvikling er kaotisk - rammer dukker ind og ud af eksistensen, og tingene kan være overvældende for både nye og erfarne udviklere.
I modsætning til de fleste webudviklingsrammer sigter Alpine.js efter at være så simpelt som muligt, men alligevel kraftfuldt nok til at håndtere begreber som reaktivitet og bivirkninger.
MAKEUSE AF DAGENS VIDEO RUL FOR AT FORTSÆTTE MED INDHOLD
Kom godt i gang med Alpine.js
Installation af Alpine.js er ret simpelt. Du behøver kun at inkludere følgende manuskript tag i din HTML:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Alternativt kan du installere Alpine.js i dit projekt ved hjælp af Node Package Manager:
npm install alpinejs
Reaktivitet i Alpine.js
Opret en index.htm fil og tilføj følgende kedelkode:
hvordan afinstalleres google backup og synkronisering
<!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>
Det udsætte attribut i manuskript tag fortæller browseren, at den først skal køre scriptet, når det er færdig med at parse dokumentet.
Alpine.js giver flere direktiver som x-data som den bruger til at gemme data og x-tekst som den bruger til at indstille indreTekst af den vedhæftede komponent. For at bruge disse direktiver skal du tilføje følgende kode til din 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-direktivet gemmer et objekt med tasterne navn og organisation . Du kan derefter overføre disse nøgler til x-text-direktivet. Når du kører koden, vil Alpine.js udfylde værdierne:
Hvordan Alpine.js sammenligner med React
Alpine.js er en letvægtsramme, som gør den velegnet til udvikling af små projekter og prototyper.
I større rammer som React bruger du kroge som useEffect() at håndtere bivirkninger i komponentens livscyklus. Denne hook kører en tilbagekaldsfunktion, når et af elementerne i afhængighedsarrayet ændres:
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
For at håndtere bivirkninger i Alpine.js kan du bruge x-effekt direktiv. Lad os f.eks. sige, at du vil se en variabel og logge værdien, når den ændres:
<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>
Det første, du måske bemærker, er, at du ikke behøver at angive en afhængighed. Alpine vil blot lytte efter ændringer i alle de variabler, der sendes til x-effekt . Det @klik direktiv øger talvariablen med 1.
Betinget gengivelse i Alpine.js
Gengivelse af elementer betinget er noget du kan gøre i rammer som React. Alpine.js giver dig også mulighed for betinget gengivelse af elementer. Det giver en x-hvis direktiv og et særligt skabelon element, som du kan bruge til betinget gengivelse af elementer.
Opret en anden index.htm fil og tilføj den samme boilerplate-kode som før. Tilføj følgende kode til HTML-teksten.
<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>
Det x-hvis direktiv videregives til skabelon element. Dette er vigtigt, fordi det giver Alpine.js mulighed for at holde styr på et element, der tilføjes eller fjernes fra siden. Det skabelon element skal indeholde et element på rodniveau; følgende kode ville overtræde denne regel:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
Opbygning af en To-Do-applikation med Alpine.js
Det er tid til at kombinere alt det, du har lært indtil nu, og bygge en enkel opgave-applikation med lokal lagerunderstøttelse. Først skal du oprette en mappe og udfylde den med en index.htm fil og en style.css fil. Tilføj boilerplate-koden til index.htm-filen og medtag en reference til style.css fil:
<link rel="stylesheet" href="style.css">