Wat is Alpine.js en hoe gebruik je het?

De wereld van webontwikkeling is chaotisch: frameworks verschijnen en verdwijnen en dingen kunnen overweldigend zijn voor zowel nieuwe als ervaren ontwikkelaars.

In tegenstelling tot de meeste frameworks voor webontwikkeling, streeft Alpine.js ernaar zo eenvoudig mogelijk te zijn, maar toch krachtig genoeg om concepten als reactiviteit en bijwerkingen aan te pakken.

Aan de slag met Alpine.js

Het installeren van Alpine.js is vrij eenvoudig. U hoeft alleen het volgende op te nemen script tag in je HTML:

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

U kunt Alpine.js ook in uw project installeren met behulp van Node Package Manager:

npm installeer alpinejs

Reactiviteit in Alpine.js

Creëer een index.htm bestand en voeg de volgende boilerplate-code toe:

html>
<htmllang="en">
<hoofd>
<metatekenset="UTF-8">
<metahttp-equivalent="X-UA-compatibel"inhoud="IE=rand">





instagram viewer


<metanaam="uitkijk postje"inhoud="breedte=apparaatbreedte, beginschaal=1.0">
<titel>Alpine.jstitel>
hoofd>
<lichaam>
<scriptverschuivensrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">script>
lichaam>
html>

De verschuiven attribuut in de script tag vertelt de browser om het script pas uit te voeren nadat het document is geparseerd.

Alpine.js biedt verschillende richtlijnen zoals x-gegevens die het gebruikt om gegevens op te slaan en x-tekst die het gebruikt om in te stellen binnentekst van het aangesloten onderdeel. Om deze richtlijnen te gebruiken, voegt u de volgende code toe aan uw HTML.

<divx-gegevens="{naam:'David Uzondu', organisatie:'Make Use Of'}">
 Mijn naam is <sterkx-tekst="naam">sterk>
 En <ix-tekst="organisatie">i> is geweldig
div>

De x-data-richtlijn slaat een object op met de sleutels naam En organisatie. U kunt die sleutels vervolgens doorgeven aan de x-text-richtlijn. Wanneer u de code uitvoert, vult Alpine.js de waarden in:

Hoe Alpine.js zich verhoudt tot React

Alpine.js is een lichtgewicht framework waardoor het geschikt is voor het ontwikkelen van kleine projecten en prototypes.

In grotere frameworks zoals React gebruik je haken zoals gebruikEffect() om bijwerkingen in de levenscyclus van de component aan te pakken. Deze hook voert een callback-functie uit wanneer een van de elementen van de afhankelijkheidsmatrix verandert:

importeren {useEffect} van"Reageer";
functieMijnComponent() {
 gebruikEffect(() => {
/* Terugbelfunctie komt hier */
 }, [ /* De afhankelijkheidsmatrix is ​​optioneel */ ]);
}

Om bijwerkingen in Alpine.js aan te pakken, kunt u de x-effect richtlijn. Stel dat u bijvoorbeeld een variabele wilt bekijken en de waarde wilt loggen wanneer deze verandert:

<divx-gegevens="{nummer 1}"x-effect="console.log (nummer)">
<h1x-tekst="nummer">h1>
<knop @Klik="getal = aantal + 1">Nieuw nummer toevoegenknop>
div>

Het eerste dat opvalt, is dat u geen afhankelijkheid hoeft op te geven. Alpine luistert gewoon naar veranderingen in alle doorgegeven variabelen x-effect. De @Klik richtlijn verhoogt de getalvariabele met 1.

Voorwaardelijke weergave in Alpine.js

Elementen voorwaardelijk renderen is iets dat je kunt doen in frameworks zoals React. Met Alpine.js kunt u ook elementen voorwaardelijk renderen. Het biedt een x-als richtlijn en een speciaal sjabloon element dat u kunt gebruiken om elementen voorwaardelijk weer te geven.

Maak een ander index.htm bestand en voeg dezelfde boilerplate-code toe als voorheen. Voeg de volgende code toe aan de body van de HTML.

<divx-gegevens="{getoond: waar}">
<knop @Klik="getoond=!getoond"x-tekst="getoond? 'Element verbergen': 'Element tonen'">Schakelaarknop>
<sjabloonx-als="getoond">
<div>De snelle bruine vos sprong over de hond heen.div>
sjabloon>
div>

De x-als richtlijn wordt doorgegeven aan de sjabloon element. Dit is belangrijk omdat Alpine.js hierdoor een element kan volgen dat wordt toegevoegd aan of verwijderd van de pagina. De sjabloon element moet één element op rootniveau bevatten; de volgende code zou die regel schenden:

<sjabloonx-als="getoond">
<div>Dit element wordt prima weergegeven.div>
<div>Dit element wordt genegeerd door Alpine.jsdiv>
sjabloon>

Een to-do-applicatie bouwen met Alpine.js

Het is tijd om alles wat je tot nu toe hebt geleerd te combineren en een eenvoudige to-do-applicatie te bouwen met ondersteuning voor lokale opslag. Maak eerst een map en vul deze met een index.htm bestand en een stijl.css bestand. Voeg de boilerplate-code toe aan het index.htm-bestand en neem een ​​verwijzing op naar het stijl.css bestand:

<koppelingrel="stijlblad"href="stijl.css">

Maak je geen zorgen over de CSS hier, kopieer gewoon het stijl.css bestand hiervan project GitHub-repository.

Om gegevens te behouden nadat de pagina opnieuw is geladen, hebt u Alpine.js nodig volharden inpluggen. Voeg de CDN-build van deze plug-in toe als een script tag, net boven de core Alpine.js CDN-build:

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

In de lichaam definieer een div onderdeel met een x-gegevens richtlijn. Deze richtlijn zou een array moeten bevatten genaamd alle taken. Voeg dan een toe h1 element met de tekst "To-Do Application".

<divx-gegevens="{allTasks:$persist([])}">
<h1>To-do-applicatieh1>
div>

De $aanhouden plug-in is een wrapper voor de JavaScript lokale opslag API. Het vertelt de browser om de array op te slaan in lokale opslag, zodat de gegevens intact blijven, zelfs nadat de pagina opnieuw is geladen. Voeg een... toe formulier met een indienen richtlijn die ook de standaardactie voor indienen verhindert.

<formulier @indienen.voorkomen="
 ($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('Invoerwaarde mag niet leeg zijn')
: alert('Taak al toegevoegd.');
 $refs.task.value=''
">
formulier>

De $referenties clausule geeft toegang tot het DOM-element met de "taak" x-ref richtlijn. De code zorgt ook voor enige validatie en zorgt ervoor dat er geen lege tekenreeksen of dubbele taken aan de lijst worden toegevoegd. Voordat u het formulier beëindigt, voegt u een invoer onderdeel met een x-ref van "taak" en een tijdelijke aanduiding. Voeg vervolgens een knop toe en stel het type in op "verzenden".

<invoertype="tekst"x-ref="taak">
<knoptype="indienen">Voeg taak toeknop>

Definieer vervolgens een div met de klasse "items". Deze div moet twee andere divs bevatten: een met de x-gegevens ingesteld op een "onvoltooide" array en de andere op een "voltooide" array. Beide div's moeten een x-effect richtlijn en de array moet worden ingepakt in de $aanhouden clausule zoals eerder getoond.

<divklas="items">
<divx-gegevens="{uncompleted:$persist([])}"x-effect="uncompleted = allTasks.filter (x=>x.donefalse)">
div>

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

Voeg in de eerste div een h3 tag met de tekst "Uncompleted". Vervolgens voor elk element in de onvoltooid array, render a div dat bevat de "controles" en de taak zelf.

Met de bedieningselementen kan de gebruiker een item verwijderen of als voltooid markeren:

<h3>Niet voltooidh3>
<sjabloonx-voor="element in onvoltooid":sleutel="element.id">
<divx-gegevens="{showControls: false}" @mouseover="showControls = waar" @muis uit="showControls = onwaar"
 class="taak"
 >
<divklas="controles">
<divx-show="showControls" @Klik="element.klaar=waar">[M]div>
<divx-show="showControls" @Klik="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-tekst="element.taak" >div>
div>
sjabloon>

U kunt de x-voor richtlijn om door een array te itereren en elementen weer te geven. Het lijkt op v-voor in Vue en de Array.map() array-methode in Reageren. De "controls" div bevat twee div's met de string "[M]" en "[R]". Deze strings staan ​​voor "Mark as done" en "Remove". U kunt deze desgewenst vervangen door de juiste pictogrammen.

De x-show richtlijn stelt een element in weergave CSS-eigenschap naar geen als de waarde die naar de richtlijn verwijst onjuist is. De tweede div in de "items" div is vergelijkbaar met de eerste met een paar opmerkelijke uitzonderingen: The h3 tekst is ingesteld op "Completed", heeft het eerste kind van de "control" div de tekst "[U]" in plaats van "[M]" en in deze div's @Klik richtlijn, element.klaar ingesteld op vals.

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

En dat is alles, je hebt de basisprincipes van Alpine.js doorgenomen en wat je hebt geleerd gebruikt om een ​​eenvoudige to-do-applicatie te maken.

Alpine.js-code gemakkelijker schrijven maken

Wanneer u begint met het schrijven van Alpine.js-code, kan het moeilijk zijn om uw hoofd eromheen te wikkelen. Gelukkig bieden code-editors zoals Visual Studio Code een breed scala aan extensies die de ontwikkeling vergemakkelijken.

In de Extensions Marketplace kunt u de Alpine.js IntelliSense-extensie krijgen die het gemakkelijker maakt om met richtlijnen te werken. Dit kan uw productiviteit helpen verbeteren wanneer u Alpine.js in uw projecten gebruikt.