Home-theater-designers
Svet spletnega razvoja je kaotičen – ogrodja se pojavljajo in izginjajo in stvari so lahko izjemne tako za nove kot za izkušene razvijalce.
Za razliko od večine ogrodij za spletni razvoj želi Alpine.js biti čim preprostejši, a dovolj zmogljiv za obravnavo konceptov, kot so odzivnost in stranski učinki.
MAKEUSEOF VIDEO DNEVA POMIKITE SE ZA NADALJEVANJE Z VSEBINO
Kako začeti z Alpine.js
Namestitev Alpine.js je zelo preprosta. Vključiti morate le naslednje scenarij oznako v vašem HTML-ju:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Druga možnost je, da namestite Alpine.js v svoj projekt z uporabo Node Package Manager:
npm install alpinejs
Reaktivnost v Alpine.js
Ustvarite index.htm datoteko in dodajte naslednjo kodo:
kako se odjaviti iz Netflixa na TV -roku
<!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 odložiti atribut v scenarij pove brskalniku, naj zažene skript šele, ko konča z razčlenjevanjem dokumenta.
Alpine.js ponuja več direktiv, kot je x-podatki ki jih uporablja za shranjevanje podatkov in x-besedilo ki jih uporablja za nastavitev innerText priložene komponente. Če želite uporabiti te direktive, dodajte naslednjo kodo v svoj 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>
Direktiva x-data shrani objekt s ključi ime in organizacija . Nato lahko te ključe posredujete v direktivo x-text. Ko zaženete kodo, bo Alpine.js zapolnil vrednosti:
Kako se Alpine.js primerja z React
Alpine.js je lahek okvir, zaradi česar je primeren za razvoj majhnih projektov in prototipov.
V večjih okvirih, kot je React, uporabljate kavlji kot useEffect() za obvladovanje stranskih učinkov v življenjskem ciklu komponente. Ta kavelj zažene funkcijo povratnega klica vsakič, ko se spremeni eden od elementov niza odvisnosti:
kako deliti igre na xbox 1
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
Za obvladovanje stranskih učinkov v Alpine.js lahko uporabite x-učinek direktiva. Na primer, recimo, da želite opazovati spremenljivko in zabeležiti vrednost vsakič, ko se spremeni:
<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>
Prva stvar, ki jo boste morda opazili, je, da vam ni treba določiti odvisnosti. Alpine bo preprosto poslušal spremembe v vseh spremenljivkah, ki so bile posredovane x-učinek . The @klik direktiva poveča spremenljivko števila za 1.
Pogojno upodabljanje v Alpine.js
Pogojno upodabljanje elementov je nekaj, kar lahko počnete v okvirih, kot je React. Alpine.js omogoča tudi pogojno upodabljanje elementov. Zagotavlja x-če direktivo in posebno predlogo element, ki ga lahko uporabite za pogojno upodabljanje elementov.
Ustvari drugo index.htm datoteko in dodajte isto kodo kot prej. V telo HTML dodajte naslednjo kodo.
<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-če direktiva se prenese na predlogo element. To je pomembno, ker omogoča Alpine.js, da spremlja element, ki je bil dodan ali odstranjen s strani. The predlogo element mora vsebovati en element korenske ravni; naslednja koda bi kršila to pravilo:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
Izdelava aplikacije To-Do z Alpine.js
Čas je, da združite vse, kar ste se do zdaj naučili, in zgradite preprosto aplikacijo za opravila s podporo za lokalno shranjevanje. Najprej ustvarite mapo in jo napolnite z index.htm datoteka in a style.css mapa. Dodajte okvirno kodo v datoteko index.htm in vključite sklic na style.css mapa:
<link rel="stylesheet" href="style.css">