Az Alpine.js egy robusztus, minimális keretrendszer a Javascript viselkedésének összeállításához a jelölésben. Így van, a jelölésedben!

Ez lehetővé teszi, hogy a JS nagy részét beírja a HTML-be, megkönnyítve ezzel a deklaratív kód írását (szemben az eljárási kóddal). Alkotója, Caleb Porzio szerint célja a vanília JS (vagy jQuery) és a nagy v-dom keretrendszerek, például a Vue / React közötti üreg kitöltése.

Mi, a Scrimba határozottan azt gondoljuk, hogy beváltja az ígéretét, ezért örömmel mutatunk be egy órás ingyenes tanfolyamot!

Tanfolyam indítása. Megtanulod az Alpine JS-t?

Az Alpine JS a @calebporzio ügyes és minimális libje, amelynek célja a vanília JS (vagy jQuery) és a nagy v-dom keretrendszerek, például a Vue / React közötti hiányosság kitöltése.

Ebben ? tanfolyam, a @drehimself egy órás bevezetést ad .//t.co/podSDjMC4A pic.twitter.com/CvCDVFuMaM

- Scrimba (@scrimba) 2020. február 24

Ebben talál egy csomó szórakoztató és interaktív oktatóanyagot, amelyek beágyazzák a tanulásodat, és megadják az izom memóriát, amelyre az Alpine.js hotshotjává kell válnod.

Most nézzük meg a tanfolyam felépítését!

Miért érdemes megtanulni az Alpine.js fájlt?

Az első órán Andre Madarang tanárnő azzal kezdi, hogy elmagyarázza, miért kellene megtanulnia a könyvtárat. Röviden szólva az Alpine.js jól működik, ha kis mennyiségű JS-re van szüksége, például néhány legördülő menüre vagy fülre. Ez azt jelenti, hogy egy csomó energiát kap őrült kis méretben, nem kell NPM-et telepíteni.

Andre bemutat önnek is. Teljes körű fejlesztő és Youtuber, aki olyan webfejlesztési koncepciókat oktat, mint a Laravel, a Vue és a Tailwind CSS. Nagyon örülünk, hogy Scrimba tanárként a fedélzetén van!

Telepítés és egy alapvető alpesi alkatrész

Az Alpine.js telepítése egyszerű - használhatja az npm-et, ha akarja, de Andre megmutatja nekünk, hogyan kell használni a cdn-t és hozzáadni egy scriptcímkéhez - ez ilyen egyszerű !:

Itt az ideje létrehozni az első Alpine.js összetevőt! Először az állapotot definiáljuk az x-dataattribútum segítségével. Az állapot azon a tartományon belül érhető el , amelyben meghatározták, így az alábbi példában mind a, mind a

hozzáférhetnek az államhoz.

Ennek az állapotnak a használatához az x-showirányelv segítségével az elemet megjelenítjük vagy elrejtjük, és az elemet be- és kikapcsoljuk a használatával @.

 Toggle 
index.html

Ledob

Most egy újszerű állapotismeretet használunk egy legördülő menü megvalósításához.

Ezután megnézzük, hogyan állíthatjuk be az eseményeket a legördülő menü bezárásához, ha rákattintunk a legördülő menüre, vagy megnyomjuk a menekülési gombot @click.awaya

vagy @keydown.escapea .

Modálok és x-ref

Ebben a szereposztásban Andre egy másik példán mutat be, hogyan lehet az állapotot használni a modál megnyitásához és bezárásához. Ezután referenciákat vezet be, amelyek lehetővé teszik számunkra, hogy módszereket adjunk a kattintáskezelő egyes elemeihez.

Ebben az esetben a bezárás gombra fókuszálunk, amint a modál megnyílik, hozzáadva egy hivatkozást a bezárás gombra egy x-refirányelvvel, majd hozzáadva egy módszert a kattintáskezelőhöz.

 $refs.modalCloseButton.focus()) " >

Oldalsáv

Itt az ideje egy új átdolgozásnak, amely elősegíti új ismereteink süllyedését. Ebben a rövid szereposztásban hozzáadjuk a funkcionalitást az oldalsáv láthatóságának átkapcsolásához. Ez nagyszerű módja a tanulás beágyazásának, és megmutatja számunkra a tanultak újabb alkalmazását.



Fülek

Ezután felépítünk egy fület. Ez jobban érintett, mint a korábbi példáink, mert az összes fülre állapotot kell tartanunk, nem csak logikai értéket.

Szokás szerint az állapotot az x-datairányelv segítségével határozzuk meg egy HTML elemen, amely az összes szükséges elemet beágyazza. Ezután beállítottuk az alapértelmezett értéket, tab1és mindegyik fülhöz beállítottunk egy eseményfigyelőt (amely a fület aktívvá teszi).

 Tab 1 

Ahhoz, hogy a tartalom szakasz a kattintott fül tartalmára váltson, x-showirányelveket sadunk a tartalmat tartalmazó tartalomhoz:

Finally, Andre shows us how to apply the active tab styles with conditional class rendering.

:class="{ 'bg-white text-blue-700 border-l border-t border-r' : tab === 'tab1' }" ; 

Image Selection

In this cast, Andre shows us how the skills we learned in the previous cast can be applied to a different UI experience - an image selector. Image selectors work in the same way as tabs, but with images instead of text.

Image selector



Scroll Detection

Now, Andre shows us how to build a scroll detector which changes the background color as the user scrolls. To do this, we define some state which keeps track of whether the user has scrolled.

Now, we add a scroll event listener on the window and some conditional class rendering on the .

 40) ? false : true" > Top Nav goes here  

Accordion Toggle and Loops

In this section, we build an accordion toggle using loops. In our example, there are several FAQs with answers, and we want to toggle the visibility of the answers.

A great way of doing this without repeating code is to use loops. To do this, we store all our questions and answers in an array, loop over them, and then set the event listener on each iteration of the loop.

Note: For this to work, our elements need to be wrapped in a template tag.

fetch and x-init

Now, we see how we can make requests to an external API. This sounds intimidating but is easily broken down into four steps.

• Add state to hold the quotes:

x - data = "{ quote:'' }"; 

• Give the app a quote to show upon initialization:

x - init = "quote = 'Awesome quote'"; 

• Set the text in the which displays the quote as the state:

Use fetch to grab the quote from an external API:

x-init=" fetch('//api.kanye.rest') .then(response => response.json()) .then(data => quote = data.quote) "

Here's the full code block:

 response.json()) .then(data => quote = data.quote) " >

The UI looks like this:



Todo App and x-model

In this cast, we learn how to build a mini to-do app. We need three pieces of state for this; one for keeping the to-dos in an array (todos), one to keep track of whether the user types in a new to-do (todoTitle) and one to keep track of the new to-do ID (todoId).

As we are using many pieces of state, we extract our function to a tag to make things cleaner. The function returns an object which contains our state and our functions:

 function todos() { return { todos: [ { id: 1, title: "Finish Alpine Screencast", isComplete: false } ], todoTitle: "", todoId: 2 }; }  

Now we loop over our to-dos to display the title we have stored in the array and conditionally add a line-through if the to-do is completed.

 × 

We now work on adding a to-do. First, we add an x-model directive to our which syncs the todoTitle with whatever is typed into the :

The function we want to run when a user types a new to-do is then added to our tag.

We also use an x-model on the checkbox to allow the user to mark a to-do as complete.

Transitions: Dropdown

Next up, Andre shows us some funky transitions which give our dropdown a crisp and professional finish using Tailwind CSS utility classes. These transitions give you fine-grained control over how your dropdown switches from hidden to visible, with options including opacity, duration, origin and others.

Transitions: Modal

Now it's time to put our new knowledge of transitions to the test by adding them to our modal. In the spirit of Scrimba, Andre gives us a chance to test out our new skills before showing us how he does it, so no spoilers here!

Transitions: Sidebar

Végül hozzáadunk egy szép, zökkenőmentes átmenetet a korábban megvalósított oldalsávhoz. Ismét, nincs spoiler, így előre mehet, és lőheti magát, amikor megnézi a pályát.

Következtetés

Most megvizsgáltunk néhány felhasználási esetet az Alpine.js-hez, és készítettünk néhány példát, amelyek jobb választást jelenthetnek, mint a React vagy a Vue. Remélhetőleg megtanultál valami újat az Alpine.js fájlról, és hamarosan hasznosítani fogod új készségeidet.

Ha még nem tette meg, ne felejtse el megnézni a tanfolyamot a Scrimban.

Addig is boldog alpesi kódolás! :)