Mikä on Alpine.js ja kuinka käytät sitä?

Verkkokehityksen maailma on kaoottinen – kehyksiä tulee esiin ja poistuu, ja asiat voivat olla ylivoimaisia ​​sekä uusille että kokeneille kehittäjille.

Toisin kuin useimmat verkkokehityskehykset, Alpine.js pyrkii olemaan mahdollisimman yksinkertainen, mutta kuitenkin riittävän tehokas käsittelemään sellaisia ​​käsitteitä kuin reaktiivisuus ja sivuvaikutukset.

Alpine.js: n käytön aloittaminen

Alpine.js: n asentaminen on melko yksinkertaista. Sinun tarvitsee vain sisällyttää seuraavat tiedot käsikirjoitus tagi HTML-koodissasi:

<käsikirjoituslykätäsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">käsikirjoitus>

Vaihtoehtoisesti voit asentaa Alpine.js: n projektiisi käyttämällä Node Package Manageria:

npm asenna alpinejs

Reaktiivisuus Alpine.js: ssä

Luo an index.htm tiedosto ja lisää seuraava yleiskoodi:

html>
<htmllang="en">
<pää>
<metamerkkisetti="UTF-8">





instagram viewer


<metahttp-ekv="X-UA-yhteensopiva"sisältö="IE = reuna">
<metanimi="näkymä"sisältö="leveys = laitteen leveys, alkumittakaava = 1,0">
<otsikko>Alpine.jsotsikko>
pää>
<kehon>
<käsikirjoituslykätäsrc=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">käsikirjoitus>
kehon>
html>

The lykätä attribuutti kohdassa käsikirjoitus -tunniste käskee selaimen suorittamaan komentosarjan vasta, kun se on jäsentänyt asiakirjan.

Alpine.js tarjoaa useita direktiivejä, kuten x-data joita se käyttää tietojen tallentamiseen ja x-teksti jota se käyttää asettamiseen sisäteksti liitetystä komponentista. Jos haluat käyttää näitä ohjeita, lisää seuraava koodi HTML-koodiisi.

<divx-data="{name:'David Uzondu', organisaatio:'Make Use Of'}">
 Nimeni on <vahvax-teksti="nimi">vahva>
 ja <ix-teksti="organisaatio">i> on mahtava
div>

X-data-direktiivi tallentaa objektin avaimilla nimi ja organisaatio. Voit sitten välittää nämä avaimet x-text-direktiiviin. Kun suoritat koodin, Alpine.js täyttää arvot:

Miten Alpine.js verrattuna Reactiin

Alpine.js on kevyt kehys, joka sopii pienten projektien ja prototyyppien kehittämiseen.

Suuremmissa kehyksissä, kuten React, käytät koukut kuten useEffect() käsittelemään komponentin elinkaaren sivuvaikutuksia. Tämä koukku suorittaa takaisinsoittotoiminnon aina, kun jokin riippuvuustaulukon elementeistä muuttuu:

tuonti {useEffect} alkaen"Reagoi";
toimintoMyComponent() {
 useEffect(() => {
/* Takaisinsoittotoiminto menee tähän */
 }, [ /* Riippuvuustaulukko on valinnainen */ ]);
}

Voit käsitellä Alpine.js: n sivuvaikutuksia käyttämällä x-efekti direktiivi. Oletetaan esimerkiksi, että haluat katsella muuttujaa ja kirjata arvon aina, kun se muuttuu:

<divx-data="{numero 1}"x-efekti="console.log (numero)">
<h1x-teksti="määrä">h1>
<-painiketta @klikkaus="numero = numero + 1">Lisää uusi numero-painiketta>
div>

Ensimmäinen asia, jonka saatat huomata, on, että sinun ei tarvitse määrittää riippuvuutta. Alpine vain kuuntelee muutoksia kaikissa muuttujissa, joille välitetään x-efekti. The @klikkaus direktiivi lisää lukumuuttujaa yhdellä.

Ehdollinen renderöinti Alpine.js: ssä

Renderöi elementit ehdollisesti on jotain, jonka voit tehdä Reactin kaltaisissa puitteissa. Alpine.js mahdollistaa myös elementtien ehdollisen hahmontamisen. Se tarjoaa an x-jos direktiivi ja erityinen sapluuna elementti, jota voit käyttää elementtien ehdolliseen hahmontamiseen.

Luo toinen index.htm tiedosto ja lisää sama yleiskoodi kuin aiemmin. Lisää seuraava koodi HTML-koodin runkoon.

<divx-data="{shown: true}">
<-painiketta @klikkaus="näytetään=!näytetään"x-teksti="näkyy? "Piilota elementti": "Näytä elementti"">Vaihda-painiketta>
<sapluunax-jos="näytetty">
<div>Nopea ruskea kettu hyppäsi koiran yli.div>
sapluuna>
div>

The x-jos direktiivi siirretään sapluuna elementti. Tämä on tärkeää, koska sen avulla Alpine.js voi seurata elementtiä, jota lisätään tai poistetaan sivulta. The sapluuna elementin tulee sisältää yksi juuritason elementti; seuraava koodi rikkoisi tätä sääntöä:

<sapluunax-jos="näytetty">
<div>Tämä elementti hahmonnetaan hienosti.div>
<div>Alpine.js ohittaa tämän elementindiv>
sapluuna>

Tehtäväsovelluksen rakentaminen Alpine.js: n avulla

On aika yhdistää kaikki tähän mennessä oppimasi ja rakentaa yksinkertainen tehtäväsovellus paikallisen tallennustuen kanssa. Luo ensin kansio ja täytä se a index.htm tiedosto ja a tyyli.css tiedosto. Lisää yleiskoodi index.htm-tiedostoon ja liitä mukaan viittaus tiedostoon tyyli.css tiedosto:

<linkkirel="tyylitaulukko"href="tyyli.css">

Älä ole huolissasi CSS: stä täällä, kopioi vain tyyli.css tiedosto tästä projektin GitHub-arkisto.

Jotta tiedot säilyvät sivun uudelleenlatauksen jälkeen, tarvitset Alpine.js: n jatkua kytkeä. Lisää tämän laajennuksen CDN-versio muodossa a käsikirjoitus -tunniste, juuri Alpine.js: n CDN-ytimen koontiversion yläpuolella:

<käsikirjoituslykätäsrc=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">käsikirjoitus>

Vuonna kehon määrittele a div elementti, jossa on x-data direktiivi. Tämän direktiivin tulisi sisältää taulukko nimeltä kaikkiTasks. Lisää sitten an h1 elementti tekstillä "To-Do Application".

<divx-data="{allTasks:$persist([])}">
<h1>Tehtäväsovellush1>
div>

The $pysyä plugin on kääre varten JavaScript localStorage API. Se käskee selainta tallentamaan taulukon paikalliseen tallennustilaan, jotta tiedot pysyvät ennallaan myös sivun uudelleenlatauksen jälkeen. Lisää muodossa kanssa Lähetä direktiivi, joka estää myös oletuslähetystoiminnon.

<muodossa @lähettää.estää="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{tehtävä: $refs.task.value.trim(), id: Date.now(), tehty: false}].concat (allTasks)
: $refs.task.value.trim() '' 
? alert('Syötearvo ei voi olla tyhjä')
: alert('Tehtävä lisätty jo.');
 $refs.task.value=''
">
muodossa>

The $refs lauseke sallii pääsyn DOM-elementtiin "tehtävällä" x-ref direktiivi. Koodi käsittelee myös jonkin verran vahvistusta ja varmistaa, että se ei lisää luetteloon tyhjiä merkkijonoja tai päällekkäisiä tehtäviä. Ennen kuin lopetat lomakkeen, lisää an syöttö elementti, jossa on x-ref "tehtävä" ja paikkamerkki. Lisää sitten painike ja aseta sen tyypiksi "lähetä".

<syöttötyyppi="teksti"x-ref="tehtävä">
<-painikettatyyppi="Lähetä">Lisää tehtävä-painiketta>

Määritä seuraavaksi div luokassa "kohteet". Tämän divin tulee sisältää kaksi muuta div: tä: yksi, jossa on x-data asetettu "uncompleted" -taulukkoon ja toinen asetettu "completed" -taulukkoon. Molemmissa diveissä tulee olla x-efekti direktiivi ja taulukko tulee kääriä $pysyä lauseke, kuten aiemmin on esitetty.

<divluokkaa="esineet">
<divx-data="{uncompleted:$persist([])}"x-efekti="uncompleted = allTasks.filter (x=>x.donefalse)">
div>

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

Lisää ensimmäiseen divoon an h3 -tunniste tekstillä "Uncompleted". Sitten jokaiselle elementille keskeneräinen array, renderöi a div joka pitää "hallintalaitteet" ja itse tehtävän.

Ohjainten avulla käyttäjä voi poistaa kohteen tai merkitä sen valmiiksi:

<h3>keskeneräinenh3>
<sapluunax-for="elementti keskeneräisessä":avain="element.id">
<divx-data="{showControls: false}" @hiiren osoitin="showControls = tosi" @hiiri pois="showControls = false"
 class="tehtävä"
 >
<divluokkaa="ohjaukset">
<divx-show="showControls" @klikkaus="element.done=true">[M]div>
<divx-show="showControls" @klikkaus="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-teksti="elementti.tehtävä" >div>
div>
sapluuna>

Voit käyttää x-for käsky iteroida taulukon ja renderöivien elementtien läpi. Se on samanlainen kuin v-for Vuessa ja Array.map() array menetelmä Reactissa. "Controls"-div sisältää kaksi div-merkkiä merkkijonoilla "[M]" ja "[R]". Nämä merkkijonot tarkoittavat "Merkitse valmiiksi" ja "Poista". Voit halutessasi korvata ne oikeilla kuvakkeilla.

The x-show direktiivi asettaa elementin näyttö CSS-ominaisuus kohteeseen ei mitään jos direktiiviin osoittava arvo on väärä. Toinen div "tuote"-divikkeessä on samanlainen kuin ensimmäinen muutamalla merkittävällä poikkeuksella: The h3 tekstin arvoksi on asetettu "Completed", "control"-div: n ensimmäisessä lapsessa on teksti "[U]" "[M]" sijaan ja tässä div: ssä @klikkaus direktiivi, element.done on asetettu väärä.

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

Siinä se, olet käynyt läpi Alpine.js: n perusteet ja käyttänyt oppimaasi perustehtäväsovelluksen luomiseen.

Alpine.js-koodin kirjoittaminen helpottuu

Kun aloitat Alpine.js-koodin kirjoittamisen, voi olla vaikeaa kiertää päätäsi. Onneksi koodieditorit, kuten Visual Studio Code, tarjoavat laajan valikoiman laajennuksia, jotka helpottavat kehitystä.

Extensions Marketplacesta voit hankkia Alpine.js IntelliSense -laajennuksen, joka helpottaa käskyjen käsittelyä. Tämä voi auttaa parantamaan tuottavuuttasi, kun käytät Alpine.js: ää projekteissasi.