Home-theater-designers
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.
PÄIVÄN VIDEON TEKEMINEN JATKA SISÄLLÖLLÄ VIERÄTÄ
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:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Vaihtoehtoisesti voit asentaa Alpine.js:n projektiisi käyttämällä Node Package Manageria:
npm install alpinejs
Reaktiivisuus Alpine.js:ssä
Luo an index.htm tiedosto ja lisää seuraava yleiskoodi:
<!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 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.
<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-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:
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
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:
<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>
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.
<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-jos direktiivi siirretään sapluuna elementti. Tämä on tärkeää, koska sen avulla Alpine.js voi seurata sivulle lisättävää tai poistettavaa elementtiä. The sapluuna elementin tulee sisältää yksi juuritason elementti; seuraava koodi rikkoisi tätä sääntöä:
kuinka poistaa näppäimet käytöstä näppäimistössä Windows 10
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
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 avulla. 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 tyyli.css tiedosto:
<link rel="stylesheet" href="style.css">