Opi Alpine JS tässä ilmaisessa interaktiivisessa opetusohjelmassa

Alpine.js on tukeva, minimaalinen kehys Javascript-käyttäytymisen säveltämiseen merkinnöissä. Aivan oikein, merkinnöissäsi!

Sen avulla voit kirjoittaa suurimman osan JS-rivistäsi HTML-muotoon, mikä helpottaa deklaratiivisen koodin kirjoittamista (toisin kuin menettelykoodi). Luojan Caleb Porzion mukaan sen tavoitteena on täyttää vanilja JS: n (tai jQuery) ja suurten v-dom-kehysten, kuten Vue / React, välinen aukko.

Me Scrimban mielestä se täyttää ehdottomasti lupauksensa, joten esitämme sinulle mielellämme ilmaisen tunnin kurssin!

Kurssin käynnistäminen. Opi Alpine JS?

Alpine JS on @calebporzion siisti ja minimaalinen lib, jonka tavoitteena on täyttää vaniljan JS: n (tai jQuery) ja suurten v-dom-kehysten, kuten Vue / React, välinen aukko.

Tässä ? kurssi, @drehimself antaa sinulle yhden tunnin esittelyn .//t.co/podSDjMC4A pic.twitter.com/CvCDVFuMaM

- Scrimba (@scrimba) 24. helmikuuta 2020

Sieltä löydät joukon hauskoja ja interaktiivisia opetusohjelmia, jotka upottavat oppimisen ja antavat sinulle lihasmuistin, jota tarvitset tullaksesi Alpine.js: n hotshotiksi.

Katsotaan nyt, kuinka kurssi on rakennettu!

Miksi oppia Alpine.js?

Ensimmäisessä oppitunnissa opettaja Andre Madarang aloittaa selittämällä, miksi sinun tulisi oppia kirjasto. Lyhyesti sanottuna Alpine.js toimii hyvin, kun tarvitset pienen määrän JS: ää, esim. Muutamia pudotusvalikkoja tai välilehtiä. Tämä tarkoittaa, että saat joukon tehoa hullulla pienellä koolla ilman tarvetta asentaa NPM: ää.

Andre antaa sinulle myös johdannon itselleen. Hän on täyden pinon kehittäjä ja Youtuber, joka opettaa verkkokehityskonsepteja, kuten Laravel, Vue ja Tailwind CSS. Olemme innoissamme saadessamme hänet laivaan Scrimba-opettajana!

Asennus ja Alpine-komponentti

Alpine.js: n asentaminen on helppoa - voit käyttää npm: tä, jos haluat, mutta Andre näyttää myös kuinka cdn: tä käytetään ja lisätään se scripttagiin - se on niin yksinkertaista !:

Nyt on aika luoda ensimmäinen Alpine.js-komponenttimme! Ensin määritellään tila x-dataattribuutin avulla. Tila on käytettävissä siinä määrin kuin se on määritelty, joten alla olevassa esimerkissä sekä ja että

on pääsy valtioon.

Tämän tilan käyttämiseksi käytämme sitten x-showdirektiiviä elementin näyttämiseen tai piilottamiseen ja sen kytkemiseen päälle ja pois päältä @.

 Toggle 

index.html

Pudota alas

Nyt käytämme uutta löydettyä valtiontietoa avattavan valikon toteuttamiseen.

Käyttöliittymä, jossa on avattava valikko

Me sitten nähdä miten asettaa tapahtumia sulkea avattavan klikkaamalla pois avattavan tai painamalla Esc-näppäintä käyttäen @click.awayon

    tai @keydown.escapeon .

    Moodit ja x-ref

    Tässä näyttelijässä Andre vie meidät läpi toisen esimerkin siitä, kuinka tilaa käytetään modaalin avaamiseen ja sulkemiseen. Seuraavaksi hän esittelee viitteitä, joiden avulla voimme lisätä menetelmiä napsautuskäsittelijän tiettyihin elementteihin.

    Tässä tapauksessa keskitymme sulkemispainikkeeseen, kun modeali on auki, lisäämällä viittaus sulkemispainikkeeseen x-refdirektiivillä ja lisäämällä sitten menetelmä napsautuskäsittelijään.

     $refs.modalCloseButton.focus()) " >

    Sivupalkki

    Nyt on aika tehdä muutos, joka auttaa uutta tietämystämme uppoutumaan sisään. Tässä lyhyessä osassa lisäämme toiminnallisuuden vaihtaaksesi sivupalkin näkyvyyttä. Tämä on hieno tapa oppimisen sisällyttämiseen ja osoittaa meille uuden sovelluksen oppimiseen.

    Käyttöliittymä sivupalkilla

    Välilehdet

    Seuraavaksi rakennamme joukon välilehtiä. Tämä on enemmän kuin edelliset esimerkit, koska meidän on pidettävä tilaa kaikissa välilehdissä, ei vain loogisena.

    Kuten tavallista, tila määritetään käskyllä x-dataHTML-elementissä, joka kapseloi kaikki vaaditut elementit. Sitten asetetaan oletusarvoksi tab1ja asetetaan tapahtumakuuntelija (joka tekee välilehden aktiiviseksi) kullekin välilehdelle.

  • Tab 1
  • Muuta sisältöosio napsautetun välilehden sisältöön lisäämällä x-showdirektiivit ssisältöön, joka sisältää sisällön:

    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

    Kuvanvalitsin

    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:

    Koodigeneraattori loppukäyttäjän näkemällä tavalla

    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

      Lopuksi lisäämme mukavan, sujuvan siirtymän aiemmin toteuttamalle sivupalkille. Jälleen ei spoilereita, joten voit mennä eteenpäin ja antaa sen ampua itsesi, kun katselet kurssia.

      Johtopäätös

      Olemme nyt tarkastelleet joitain Alpine.js: n käyttötapauksia ja rakentaneet muutaman esimerkin, joissa se voi olla parempi valinta kuin React tai Vue. Toivottavasti olet oppinut jotain uutta Alpine.js: stä ja hyödynnät uusia taitojasi hyvin pian.

      Jos et ole vielä tehnyt niin, älä unohda tarkistaa kurssi Scrimban kautta.

      Sillä välin hyvää Alpine-koodausta! :)