Lær Alpine JS i denne gratis interaktive tutorial

Alpine.js er en robust, minimal ramme til komponering af Javascript-opførsel i din markering. Det er rigtigt, i din markering!

Det giver dig mulighed for at skrive det meste af din JS inline i din HTML, hvilket gør det lettere at skrive erklærende kode (i modsætning til procedurekode). Ifølge skaberen Caleb Porzio sigter den mod at udfylde tomrummet mellem vanille JS (eller jQuery) og store v-dom-rammer som Vue / React.

Vi hos Scrimba synes bestemt, at det lever op til sit løfte, så vi er glade for at kunne præsentere dig for et gratis en times kursus!

Kursusstart. Lær Alpine JS?

Alpine JS er en pæn og minimal lib af @calebporzio, der sigter mod at udfylde tomrummet mellem vanille JS (eller jQuery) og store v-dom rammer som Vue / React.

Heri ? kursus, @drehimself giver dig en times introduktion .//t.co/podSDjMC4A pic.twitter.com/CvCDVFuMaM

- Scrimba (@scrimba) 24. februar 2020

I den finder du en masse sjove og interaktive tutorials, der integrerer din læring og giver dig den muskelhukommelse, du har brug for for at blive et hotshot på Alpine.js.

Lad os nu se på, hvordan kurset er struktureret!

Hvorfor lære Alpine.js?

I den første lektion begynder læreren Andre Madarang med at forklare, hvorfor du skal lære biblioteket. Kort sagt fungerer Alpine.js godt, når du har brug for en lille mængde JS, f.eks. Et par drop-downs eller faner. Dette betyder, at du får en masse strøm i en skør lille størrelse uden behov for NPM-installation.

Andre giver dig også en introduktion til sig selv. Han er en full-stack udvikler og Youtuber, der underviser i webudviklingskoncepter som Laravel, Vue og Tailwind CSS. Vi er begejstrede for at have ham ombord som Scrimba-lærer!

Installation & En grundlæggende alpekomponent

Det er let at installere Alpine.js - du kan bruge npm, hvis du vil, men Andre viser os også, hvordan vi bruger en cdn og tilføjer den i et scripttag - det er så simpelt som det !:

Nu er det tid til at oprette vores første Alpine.js-komponent! Først definerer vi tilstand ved hjælp af x-dataattributten. Staten er tilgængelig inden for rammerne af den , hvori den er defineret, så i nedenstående eksempel er både og og

har adgang til tilstand.

For at bruge denne tilstand bruger vi derefter x-showdirektivet til at vise eller skjule elementet og slå elementet til og fra ved hjælp af @.

 Toggle 

index.html

Dropdown

Nu bruger vi vores nyvundne viden om tilstand til at implementere en dropdown.

UI med drop-down

Vi ser derefter, hvordan man indstiller begivenheder til at lukke rullelisten ved at klikke på rullelisten eller ved at trykke på Escape-tasten ved hjælp @click.awayaf på

    eller @keydown.escape.

    Modeller og x-ref

    I denne rollebesætning tager Andre os et andet eksempel på, hvordan man bruger tilstand til at åbne og lukke et modal. Dernæst introducerer han referencer, som giver os mulighed for at tilføje metoder til bestemte elementer i klikhåndtereren.

    I dette tilfælde fokuserer vi luk-knappen, når modalen er åben ved at tilføje en henvisning til luk-knappen med et x-refdirektiv og derefter tilføje en metode til klikhåndtereren.

     $refs.modalCloseButton.focus()) " >

    Sidebjælke

    Nu er det tid til en vis revision for at hjælpe vores nye viden med at synke ned. I denne korte rollebesætning tilføjer vi funktionaliteten til at skifte synlighed af et sidebjælke. Dette er en fantastisk måde at integrere vores læring på og viser os en anden anvendelse af det, vi har lært.

    UI med sidebjælke

    Faner

    Næste opbygger vi et sæt faner. Dette er mere involveret end vores tidligere eksempler, fordi vi er nødt til at holde status for alle fanerne, ikke kun en boolsk.

    Som normalt defineres tilstand ved hjælp af x-datadirektivet om et HTML-element, der indkapsler alle de krævede elementer. Vi indstiller derefter standardindstillingen til tab1og indstiller en begivenhedslytter (som gør fanen aktiv) for hver af fanerne.

  • Tab 1
  • For at ændre indholdssektionen til indholdet af den fane, der er blevet klikket på, tilføjer vi x-showdirektiver til det, der sindeholder indholdet:

    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

    Billedvælger

    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:

    Kodegenerator set fra slutbruger

    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

      Endelig tilføjer vi en flot, jævn overgang til sidebjælken, vi implementerede tidligere. Igen ingen spoilere, så du kan gå videre og give det skud selv, når du ser kurset.

      Konklusion

      Vi har nu kigget på nogle brugssager til Alpine.js og bygget et par eksempler, hvor det måske er et bedre valg end React eller Vue. Forhåbentlig har du lært noget nyt om Alpine.js og vil snart bruge dine nye færdigheder.

      Hvis du ikke allerede har gjort det, så glem ikke at tjekke kurset over på Scrimba.

      I mellemtiden, glad alpinkodning! :)