Postoji obilje JavaScript okvira, ali Alpineova jednostavnost i lakoća korištenja čine ga izvrsnim kandidatom za početnike.

Svijet web razvoja je kaotičan - okviri se pojavljuju i nestaju, a stvari mogu biti neodoljive i za nove i za iskusne programere.

Za razliku od većine okvira za web razvoj, Alpine.js nastoji biti što jednostavniji, ali dovoljno moćan da se nosi s konceptima kao što su reaktivnost i nuspojave.

Početak rada s Alpine.js

Instaliranje Alpine.js je vrlo jednostavno. Samo trebate uključiti sljedeće skripta oznaka u vašem HTML-u:

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

Alternativno, možete instalirati Alpine.js u svoj projekt koristeći Node Package Manager:

npm instalirajte alpinejs

Reaktivnost u Alpine.js

Stvorite indeks.htm datoteku i dodajte sljedeći šablonski kod:

html>
<htmljezik="en">
<glava>
<metaskup znakova="UTF-8">
<metahttp-ekviv="X-UA-kompatibilno"sadržaj="IE=rub">
<metaIme="viewport"sadržaj="width=device-width, initial-scale=1.0">





instagram viewer



<titula>Alpine.jstitula>
glava>
<tijelo>
<skriptaodgoditisrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">skripta>
tijelo>
html>

The odgoditi atribut u skripta tag govori pregledniku da pokrene skriptu tek nakon što završi analiziranje dokumenta.

Alpine.js pruža nekoliko direktiva poput x-podaci koje koristi za pohranu podataka i x-tekst koje koristi za postavljanje unutarnjiTekst priložene komponente. Za korištenje ovih uputa, dodajte sljedeći kod u svoj HTML.

<divx-podaci="{name:'David Uzondu', organizacija:'Make Use Of'}">
 Moje ime je <snažnax-tekst="Ime">snažna>
 i <jax-tekst="organizacija">ja> je odlicno
div>

Direktiva x-data pohranjuje objekt s ključevima Ime i organizacija. Zatim možete proslijediti te ključeve u x-text direktivu. Kada pokrenete kod, Alpine.js će popuniti vrijednosti:

Kako se Alpine.js uspoređuje s Reactom

Alpine.js je lagani okvir što ga čini prikladnim za razvoj malih projekata i prototipova.

U većim okvirima kao što je React, koristite kuke poput useEffect() za rješavanje nuspojava u životnom ciklusu komponente. Ova kuka pokreće funkciju povratnog poziva kad god se promijeni jedan od elemenata niza ovisnosti:

uvoz {useEffect} iz"Reagirati";
funkcijaMoja komponenta() {
 useEffect(() => {
/* Funkcija povratnog poziva ide ovdje */
 }, [ /* Niz ovisnosti nije obavezan */ ]);
}

Za rješavanje nuspojava u Alpine.js, možete koristiti x-efekt direktiva. Na primjer, recimo da želite promatrati varijablu i zabilježiti vrijednost kad god se promijeni:

<divx-podaci="{broj 1}"x-efekt="console.log (broj)">
<h1x-tekst="broj">h1>
<dugme @klik="broj = broj + 1">Dodajte novi brojdugme>
div>

Prvo što biste mogli primijetiti je da ne morate navesti ovisnost. Alpine će jednostavno slušati promjene u svim varijablama koje su proslijeđene x-efekt. The @klik direktiva povećava varijablu broj za 1.

Uvjetno iscrtavanje u Alpine.js

Uvjetno prikazivanje elemenata je nešto što možete učiniti u okviru kao što je React. Alpine.js vam također omogućuje uvjetno renderiranje elemenata. Pruža x-ako direktiva i posebna šablona element koji možete koristiti za uvjetno prikazivanje elemenata.

Stvorite drugu indeks.htm datoteku i dodajte isti šablonski kod kao prije. Dodajte sljedeći kod u tijelo HTML-a.

<divx-podaci="{prikazano: istinito}">
<dugme @klik="prikazano=!prikazano"x-tekst="prikazano? 'Sakrij element': 'Prikaži element'">Prebacivanjedugme>
<šablonax-ako="prikazano">
<div>Brza smeđa lisica preskočila je psa.div>
šablona>
div>

The x-ako direktiva se prenosi na šablona element. Ovo je važno jer omogućuje Alpine.js da prati element koji se dodaje ili uklanja sa stranice. The šablona element treba sadržavati jedan element korijenske razine; sljedeći kod bi prekršio to pravilo:

<šablonax-ako="prikazano">
<div>Ovaj će element biti dobro prikazan.div>
<div>Alpine.js će zanemariti ovaj elementdiv>
šablona>

Izrada To-Do aplikacije s Alpine.js

Vrijeme je da kombinirate sve što ste do sada naučili i napravite jednostavnu aplikaciju za obavljanje zadataka s podrškom za lokalnu pohranu. Najprije stvorite mapu i popunite je s indeks.htm datoteka i a stil.css datoteka. Dodajte standardni kod u datoteku index.htm i uključite referencu na stil.css datoteka:

<vezarel="list stilova"href="style.css">

Ne brinite o CSS-u ovdje, samo kopirajte stil.css datoteka iz ovoga GitHub repozitorij projekta.

Da biste zadržali podatke nakon ponovnog učitavanja stranice, potreban vam je Alpine.js ustrajati uključiti. Dodajte CDN verziju ovog dodatka kao a skripta oznaku, odmah iznad jezgre Alpine.js CDN izgradnje:

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

u tijelo definirati a div element s an x-podaci direktiva. Ova bi direktiva trebala sadržavati niz tzv svi zadaci. Zatim dodajte h1 element s tekstom "To-Do Application".

<divx-podaci="{allTasks:$persist([])}">
<h1>Aplikacija za obvezeh1>
div>

The $ustrajati plugin je omotač za JavaScript localStorage API. Govori pregledniku da pohrani niz u lokalnu pohranu, tako da podaci ostaju netaknuti čak i nakon ponovnog učitavanja stranice. Dodati oblik s podnijeti direktiva koja također sprječava zadanu radnju slanja.

<oblik @podnijeti.spriječiti="
 ($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() '' 
? upozorenje('Ulazna vrijednost ne može biti prazna')
: alert('Zadatak je već dodan.');
 $refs.task.value=''
">
oblik>

The $refs klauzula dopušta pristup DOM elementu sa "task" x-ref direktiva. Kod također obrađuje neke provjere i osigurava da ne dodaje prazne nizove ili duplicirane zadatke na popis. Prije završetka obrasca dodajte ulazni element s an x-ref od "zadatak" i rezervirano mjesto. Zatim dodajte gumb i postavite njegovu vrstu na "pošalji".

<ulaznitip="tekst"x-ref="zadatak">
<dugmetip="podnijeti">Dodaj zadatakdugme>

Zatim definirajte div s klasom "items". Ovaj div treba sadržavati dva druga diva: jedan s x-podaci postaviti na "nedovršeno" polje, a drugo postaviti na "dovršeno" polje. Oba bi diva trebala imati x-efekt direktivu i niz bi trebao biti omotan u $ustrajati klauzula kao što je ranije prikazano.

<divrazreda="predmeti">
<divx-podaci="{nedovršeno:$persist([])}"x-efekt="nedovršeno = allTasks.filter (x=>x.donefalse)">
div>

<divx-podaci="{dovršeno:$persist([])}"x-efekt="dovršeno=allTasks.filter (y=>y.donetrue).reverse()">
div>
div>

U prvi div dodajte h3 oznaku s tekstom "Nedovršeno". Zatim za svaki element u nedovršen niz, prikaz a div koji drži "kontrole" i sam zadatak.

Kontrole omogućuju korisniku da izbriše stavku ili je označi kao dovršenu:

<h3>Nedovršenoh3>
<šablonax-za="element u nedovršenom":ključ="element.id">
<divx-podaci="{showControls: false}" @prelazak mišem="showControls = true" @mouseout="showControls = false"
 klasa="zadatak"
 >


<divrazreda="kontrole">
<divx-show="showControls" @klik="element.done=true">[M]div>
<divx-show="showControls" @klik="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-tekst="element.zadatak" >div>
div>
šablona>

Možete koristiti x-za direktiva za ponavljanje niza i renderiranje elemenata. Slično je v-za u Vue i Array.map() metoda polja u Reactu. Div "controls" sadrži dva diva s nizom "[M]" i "[R]". Ovi nizovi označavaju "Označi kao gotovo" i "Ukloni". Možete ih zamijeniti odgovarajućim ikonama ako želite.

The x-show direktiva postavlja element prikaz CSS svojstvo za nikakav ako je vrijednost koja pokazuje na direktivu lažna. Drugi div u divu "items" sličan je prvom uz nekoliko značajnih iznimaka: The h3 tekst je postavljen na "Dovršeno", prvo dijete diva "control" ima tekst "[U]" umjesto "[M]" i u ovom divu @klik direktiva, element.gotovo postavljeno je na lažno.

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

I to je to, prošli ste osnove Alpine.js i upotrijebili ono što ste naučili za izradu osnovne aplikacije za zadatke.

Olakšavanje pisanja Alpine.js koda

Kada počnete pisati Alpine.js kod, može biti teško zamisliti se. Srećom, uređivači koda poput Visual Studio Code pružaju široku lepezu proširenja koja olakšavaju razvoj.

U Extensions Marketplaceu možete nabaviti Alpine.js IntelliSense ekstenziju koja olakšava rad s direktivama. To može pomoći u poboljšanju vaše produktivnosti kada koristite Alpine.js u svojim projektima.