Научите Алпине ЈС у овом бесплатном интерактивном водичу

Алпине.јс је робустан, минималан оквир за компоновање понашања Јавасцрипта у ваше ознаке. Тачно, у вашем марку!

Омогућава вам да у свом ХТМЛ-у напишете већи део ЈС-а у линији, олакшавајући писање декларативног кода (за разлику од процедуралног кода). Према његовом творцу Цалебу Порзију, циљ му је да попуни празнину између ванилин ЈС (или јКуери) и великих в-дом оквира попут Вуе / Реацт.

Ми у Сцримби дефинитивно мислимо да испуњава обећања, па ћемо вам радо представити бесплатан једносатни курс!

Покретање курса. Научите Алпине ЈС?

Алпине ЈС је уредна и минимална библиотека @цалебпорзио која за циљ има да попуни празнину између ванилин ЈС (или јКуери) и великих в-дом оквира попут Вуе / Реацт.

У ово ? наравно, @дрехимселф вам даје једносатни увод .//т.цо/подСДјМЦ4А пиц.твиттер.цом/ЦвЦДВФуМаМ

- Сцримба (@сцримба) 24. фебруара 2020

У њему ћете пронаћи гомилу забавних и интерактивних водича који уграђују ваше учење и дају вам мишићну меморију која вам је потребна да бисте постали хитна тачка на Алпине.јс.

Сада погледајмо како је курс структуриран!

Зашто учити Алпине.јс?

У првој лекцији учитељ Андре Мадаранг започиње објашњавањем зашто треба учити библиотеку. Укратко, Алпине.јс добро функционише када вам треба мала количина ЈС-а, нпр. Неколико падајућих менија или картица. То значи да добијате гомилу енергије лудо мале величине без потребе за инсталирањем НПМ-а.

Андре вам такође даје увод у себе. Он је програмер са пуним стековима и Иоутубер који предаје концепте веб развоја као што су Ларавел, Вуе и Таилвинд ЦСС. Одушевљени смо што га имамо на броду као учитеља Сцримбе!

Инсталација и основна алпска компонента

Инсталација Алпине.јс је једноставна - можете да користите нпм ако желите, али Андре нам такође показује како да користимо цдн и додамо га у scriptознаку - то је једноставно !:

Сада је време да креирамо нашу прву компоненту Алпине.јс! Прво дефинишемо стање помоћу x-dataатрибута. Држава је доступна у оквиру подручја у којем је дефинисана, тако да у доњем примеру и и

имају приступ држави.

Да бисмо користили ово стање, тада користимо x-showдирективу за приказ или скривање елемента и укључивање и искључивање елемента помоћу @.

 Toggle 

index.html

Испустити

Сада користимо ново откривено знање о држави како бисмо применили падајући мени.

Кориснички интерфејс који садржи падајући мени

Онда видимо како да подесите догађаје за затварање падајући мени од кликом са падајућег менија или притиском на тастер есцапе, користећи @click.awayна

    или @keydown.escapeна .

    Модал и реф

    У овој улози, Андре нас води кроз још један пример како се користи држава за отварање и затварање модалног начина. Даље, он уводи референце, које нам омогућавају да додамо методе одређеним елементима у обрађивачу кликова.

    У овом случају фокусирамо дугме за затварање када се модал отвори додавањем референце на дугме за затварање са x-refдирективом, а затим додавањем методе у обрађивач кликова.

     $refs.modalCloseButton.focus()) " >

    Бочна трака

    Сада је време за неке ревизије које ће помоћи да наше ново знање тоне. У овај кратки састав додајемо функционалност за пребацивање видљивости бочне траке. Ово је сјајан начин уграђивања нашег учења и показује нам још једну примену наученог.

    Кориснички интерфејс са бочном траком

    Табс

    Даље градимо скуп картица. Ово је више укључено од наших претходних примера, јер морамо држати стање за све картице, а не само за логичке вредности.

    Као и обично, стање се дефинише помоћу x-dataдирективе о ХТМЛ елементу који обухваћа све потребне елементе. Затим постављамо подразумевано tab1и постављамо преслушач догађаја (што чини картицу активном) за сваку од картица.

  • Tab 1
  • Да бисмо променили одељак садржаја у садржај картице на коју смо кликнули, додајемо x-showдирективе sсадржају садржаја:

    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

      На крају, додајемо леп, гладак прелаз за бочну траку коју смо раније применили. Опет, нема спојлера, па можете сами да пуцате кад гледате курс.

      Закључак

      Сада смо прегледали неке примере употребе за Алпине.јс и направили неколико примера где би могао бити бољи избор од Реацт-а или Вуе-а. Надамо се да сте научили нешто ново о Алпине.јс и да ћете врло брзо добро искористити своје нове вештине.

      Ако већ нисте, не заборавите да погледате курс у Сцримби.

      У међувремену, срећно алпско кодирање! :)