Vad är Alpine.js och hur använder du det?

Webbutvecklingsvärlden är kaotisk – ramar dyker in och ur existensen och saker kan vara överväldigande för både nya och erfarna utvecklare.

Till skillnad från de flesta webbutvecklingsramverk strävar Alpine.js efter att vara så enkelt som möjligt, men ändå kraftfullt nog att hantera begrepp som reaktivitet och biverkningar.

Komma igång med Alpine.js

Att installera Alpine.js är ganska enkelt. Du behöver bara inkludera följande manus tag i din HTML:

<manusuppskjutasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">manus>

Alternativt kan du installera Alpine.js i ditt projekt med hjälp av Node Package Manager:

npm installera alpinejs

Reaktivitet i Alpine.js

Skapa en index.htm fil och lägg till följande typkod:

html>
<htmllang="en">
<huvud>
<metateckenuppsättning="UTF-8">
<metahttp-ekvivalent="X-UA-kompatibel"innehåll="IE=kant">
<metanamn="viewport"innehåll="width=device-width, initial-scale=1.0">





instagram viewer


<titel>Alpine.jstitel>
huvud>
<kropp>
<manusuppskjutasrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">manus>
kropp>
html>

De uppskjuta attribut i manus taggen säger åt webbläsaren att köra skriptet först efter att det är färdigt att tolka dokumentet.

Alpine.js tillhandahåller flera direktiv som x-data som den använder för att lagra data och x-text som den använder för att ställa in innerText av den bifogade komponenten. För att använda dessa direktiv, lägg till följande kod i din HTML.

<divx-data="{name:'David Uzondu', organisation:'Make Use Of'}">
 Mitt namn är <starkx-text="namn">stark>
 och <ix-text="organisation">i> är grymt
div>

Direktivet x-data lagrar ett objekt med nycklarna namn och organisation. Du kan sedan skicka dessa nycklar till x-text-direktivet. När du kör koden kommer Alpine.js att fylla i värdena:

Hur Alpine.js jämförs med React

Alpine.js är ett lätt ramverk som gör det lämpligt för att utveckla små projekt och prototyper.

I större ramverk som React använder du krokar som useEffect() för att hantera biverkningar i komponentens livscykel. Denna hook kör en återuppringningsfunktion när ett av elementen i beroendematrisen ändras:

importera {useEffect} från"Reagera";
fungeraMyComponent() {
 useEffect(() => {
/* Återuppringningsfunktionen går här */
 }, [ /* Beroendematrisen är valfri */ ]);
}

För att hantera biverkningar i Alpine.js kan du använda x-effekt direktiv. Låt oss till exempel säga att du vill titta på en variabel och logga värdet när det ändras:

<divx-data="{nummer 1}"x-effekt="console.log (nummer)">
<h1x-text="siffra">h1>
<knapp @klick="nummer = nummer + 1">Lägg till nytt nummerknapp>
div>

Det första du kanske lägger märke till är att du inte behöver ange ett beroende. Alpine kommer helt enkelt att lyssna efter ändringar i alla variabler som skickas till x-effekt. De @klick direktivet ökar talvariabeln med 1.

Villkorlig rendering i Alpine.js

Återge element villkorligt är något du kan göra i ramar som React. Alpine.js låter dig också villkorligt rendera element. Det ger en x-om direktiv och ett särskilt mall element som du kan använda för att villkorligt rendera element.

Skapa en till index.htm fil och lägg till samma standardkod som tidigare. Lägg till följande kod i HTML-koden.

<divx-data="{visat: sant}">
<knapp @klick="visas=!visas"x-text="visad? 'Göm element': 'Visa element'">Växlaknapp>
<mallx-om="visad">
<div>Den kvicka brunräven hoppade över hunden.div>
mall>
div>

De x-om direktivet överförs till mall element. Detta är viktigt eftersom det tillåter Alpine.js att hålla reda på ett element som läggs till eller tas bort från sidan. De mall element bör innehålla ett element på rotnivå; följande kod skulle bryta mot den regeln:

<mallx-om="visad">
<div>Detta element kommer att renderas bra.div>
<div>Detta element kommer att ignoreras av Alpine.jsdiv>
mall>

Bygga en att göra-applikation med Alpine.js

Det är dags att kombinera allt du har lärt dig hittills och bygga en enkel att göra-applikation med lokalt lagringsstöd. Skapa först en mapp och fyll i den med en index.htm fil och en style.css fil. Lägg till boilerplate-koden i filen index.htm och inkludera en referens till style.css fil:

<länkrel="stilmall"href="style.css">

Oroa dig inte för CSS här, bara kopiera style.css fil från denna projektets GitHub-förråd.

För att bevara data efter att sidan laddats om behöver du Alpine.js envisas plugin. Lägg till CDN-bygget för detta plugin som en manus taggen, precis ovanför kärnan Alpine.js CDN:

<manusuppskjutasrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">manus>

I den kropp definiera a div element med en x-data direktiv. Detta direktiv bör innehålla en array som kallas alla uppgifter. Lägg sedan till en h1 element med texten "Att göra-applikation".

<divx-data="{allTasks:$persist([])}">
<h1>Att göra-applikationh1>
div>

De $bestå plugin är ett omslag för JavaScript localStorage API. Den säger åt webbläsaren att lagra arrayen i lokal lagring, så att data förblir intakt även efter att sidan laddats om. Lägg till en form med en Skicka in direktiv som också förhindrar standardinlämningsåtgärden.

<form @submit.prevent="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{task: $refs.task.value.trim(), id: Date.now(), done: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert('Indata kan inte vara tomt')
: alert('Uppgiften har redan lagts till.');
 $refs.task.value=''
">
form>

De $refs klausul tillåter åtkomst till DOM-elementet med "task" x-ref direktiv. Koden hanterar även viss validering och säkerställer att den inte lägger till tomma strängar eller dubbletter av uppgifter i listan. Innan du avslutar formuläret, lägg till en inmatning element med en x-ref av "uppgift" och en platshållare. Lägg sedan till en knapp och ställ in dess typ på "skicka".

<inmatningtyp="text"x-ref="uppgift">
<knapptyp="Skicka in">Lägg till uppgiftknapp>

Därefter definierar du en div med klassen "artiklar". Denna div bör innehålla två andra div: er: en med x-data inställd på en "uncompleted" array och den andra satt till en "completed" array. Båda diverna ska ha en x-effekt direktivet och arrayen ska vara insvept i $bestå klausul som visats tidigare.

<divklass="artiklar">
<divx-data="{uncompleted:$persist([])}"x-effekt="uncompleted = allTasks.filter (x=>x.donefalse)">
div>

<divx-data="{completed:$persist([])}"x-effekt="completed=allTasks.filter (y=>y.donetrue).reverse()">
div>
div>

I den första div, lägg till en h3 tagga med texten "Uncompleted". Sedan för varje element i ofullbordad array, rendera en div som håller "kontrollerna" och själva uppgiften.

Kontrollerna låter användaren ta bort ett objekt eller markera det som slutfört:

<h3>Oavslutadh3>
<mallx-för="element i ofullbordat":nyckel="element.id">
<divx-data="{showControls: false}" @för muspekaren="showControls = sant" @musen ut="showControls = false"
 class="uppgift"
 >
<divklass="kontroller">
<divx-show="showControls" @klick="element.done=true">[M]div>
<divx-show="showControls" @klick="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-text="element.task" >div>
div>
mall>

Du kan använda x-för direktiv att iterera genom en array och rendera element. Det liknar v-för i Vue and the Array.map() array-metod i React. "Controlls" div innehåller två divs med strängen "[M]" och "[R]". Dessa strängar står för "Mark as done" och "Remove". Du kan ersätta dessa med lämpliga ikoner om du vill.

De x-show direktiv sätter ett element visa CSS-egenskap till ingen om värdet som pekar på direktivet är falskt. Den andra div i "artiklar" div liknar den första med några anmärkningsvärda undantag: The h3 text är inställd på "Completed", "Control" div: s första barn har texten "[U]" istället för "[M]" och i denna div: s @klick direktiv, element.klar är satt till falsk.

<divx-show="showControls" @klick="element.done=false">[U]div>

Och det var allt, du har gått igenom grunderna i Alpine.js och använt det du lärt dig för att skapa en grundläggande att göra-applikation.

Gör Alpine.js-koden lättare att skriva

När du börjar skriva Alpine.js-kod kan det vara svårt att linda huvudet. Lyckligtvis ger kodredigerare som Visual Studio Code ett brett utbud av tillägg som gör utvecklingen lättare.

På Extensions Marketplace kan du få tillägget Alpine.js IntelliSense som gör det lättare att arbeta med direktiv. Detta kan bidra till att förbättra din produktivitet när du använder Alpine.js i dina projekt.