Kas yra Alpine.js ir kaip juo naudotis?

Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Žiniatinklio kūrimo pasaulis yra chaotiškas – sistemos atsiranda ir nebeegzistuoja, o tiek naujiems, tiek patyrusiems kūrėjams viskas gali būti didžiulė.

Skirtingai nuo daugelio žiniatinklio kūrimo sistemų, Alpine.js siekia būti kuo paprastesnis, tačiau pakankamai galingas, kad galėtų susidoroti su tokiomis sąvokomis kaip reaktyvumas ir šalutinis poveikis.

DIENOS VAIZDO ĮRAŠO PAGALBA SLĖKITE, KAD TĘSITE SU TURINIU

Darbo su Alpine.js pradžia

Įdiegti Alpine.js yra gana paprasta. Jums tereikia įtraukti šiuos dalykus scenarijus žyma savo HTML:

 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Arba galite įdiegti Alpine.js savo projekte naudodami Node Package Manager:

 npm install alpinejs

Reaktyvumas Alpine.js

Sukurti an index.htm failą ir pridėkite šį pagrindinį kodą:

 <!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>

The atidėti atributas scenarijus žyma nurodo naršyklei paleisti scenarijų tik baigus analizuoti dokumentą.

Alpine.js pateikia keletą direktyvų, tokių kaip x-duomenys kurią naudoja duomenims saugoti ir x-tekstas kurį jis naudoja nustatydamas vidinisTekstas prijungto komponento. Norėdami naudoti šias direktyvas, pridėkite šį kodą prie savo 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 direktyva saugo objektą su raktais vardas ir organizacija . Tada galite perduoti tuos raktus į x-teksto direktyvą. Kai paleisite kodą, Alpine.js įves reikšmes:

kaip nustatyti statinį ip aviečių pi

Atidarytas chromuotas skirtukas su kūrėjo įrankiais.

Kaip Alpine.js lyginamas su React

Alpine.js yra lengvas pagrindas, todėl jis tinka mažiems projektams ir prototipams kurti.

Didesnėse sistemose, tokiose kaip „React“, jūs naudojate kabliukai kaip useEffect() pašalinti šalutinį poveikį komponento gyvavimo ciklo metu. Šis kabliukas vykdo atgalinio skambučio funkciją, kai pasikeičia vienas iš priklausomybės masyvo elementų:

 import {useEffect} from "React"; 
 
function MyComponent() { 
    useEffect(() => { 
        /* Callback function goes here */ 
    }, [ /* The dependency array is optional */ ]); 
}

Norėdami valdyti Alpine.js šalutinį poveikį, galite naudoti x efektas direktyva. Pavyzdžiui, tarkime, kad norite žiūrėti kintamąjį ir įrašyti reikšmę, kai tik jis pasikeičia:

 <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>

Pirmas dalykas, kurį galite pastebėti, yra tai, kad jums nereikia nurodyti priklausomybės. Alpine tiesiog klausys visų perduotų kintamųjų pokyčių x efektas . The @spustelėkite direktyva padidina skaičiaus kintamąjį 1.

šaunių dalykų, kuriuos reikia padaryti „Excel“

Sąlyginis atvaizdavimas Alpine.js

Elementų atvaizdavimas sąlygiškai yra kažkas, ką galite padaryti tokiose sistemose kaip „React“. Alpine.js taip pat leidžia sąlygiškai pateikti elementus. Tai suteikia an x-jei direktyvą ir specialųjį šabloną elementas, kurį galite naudoti sąlyginiam elementų atvaizdavimui.

Sukurkite kitą index.htm failą ir pridėkite tą patį pagrindinį kodą kaip ir anksčiau. Pridėkite šį kodą prie HTML turinio.

 <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>

The x-jei direktyva perduodama šabloną elementas. Tai svarbu, nes leidžia Alpine.js sekti elementą, kuris pridedamas arba pašalinamas iš puslapio. The šabloną elemente turi būti vienas šakninio lygio elementas; šis kodas pažeistų šią taisyklę:

 <template x-if="shown"> 
    <div>This element will be rendered just fine.</div> 
    <div>This element will be ignored by Alpine.js</div> 
</template>

„To-Do“ programos kūrimas naudojant Alpine.js

Atėjo laikas sujungti viską, ko iki šiol išmokote, ir sukurti paprastą užduočių programą su vietinės saugyklos palaikymu. Pirmiausia sukurkite aplanką ir užpildykite jį a index.htm failas ir a stilius.css failą. Įtraukite pagrindinį kodą į index.htm failą ir įtraukite nuorodą į stilius.css failas:

 <link rel="stylesheet" href="style.css">