Научете Alpine JS в този безплатен интерактивен урок

Alpine.js е здрава, минимална рамка за съставяне на поведението на Javascript във вашата маркировка. Точно така, във вашата маркировка!

Тя ви позволява да пишете по-голямата част от вашия JS вграден във вашия HTML, улеснявайки писането на декларативен код (за разлика от процедурния код). Според създателя му Caleb Porzio той има за цел да запълни празнотата между ванилия JS (или jQuery) и големи v-dom рамки като Vue / React.

Ние от Scrimba определено смятаме, че изпълнява обещанията си, затова се радваме да ви представим безплатен едночасов курс!

Стартиране на курса. Научете Alpine JS?

Alpine JS е изчистен и минимален lib от @calebporzio, който има за цел да запълни празнотата между ванилия JS (или jQuery) и големи v-dom рамки като Vue / React.

В това ? разбира се, @drehimself ви дава едночасово въведение .//t.co/podSDjMC4A pic.twitter.com/CvCDVFuMaM

- Scrimba (@scrimba) 24 февруари 2020 г.

В него ще намерите куп забавни и интерактивни уроци, които вграждат вашето обучение и ви дават мускулната памет, от която се нуждаете, за да станете хотшот на Alpine.js

Сега нека да разгледаме как е структуриран курсът!

Защо да научите Alpine.js?

В първия урок учителят Андре Мадаранг започва, като обяснява защо трябва да научите библиотеката. Накратко казано, Alpine.js работи добре, когато имате нужда от малко количество JS, например няколко падащи менюта или раздели. Това означава, че получавате куп мощност при луд малък размер, без да е необходимо да инсталирате NPM.

Андре ви дава и въведение за себе си. Той е разработчик на пълни стекове и Youtuber, който преподава концепции за уеб разработка като Laravel, Vue и Tailwind CSS. Радваме се, че го има на борда като учител по Скримба!

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

Инсталирането на Alpine.js е лесно - можете да използвате npm, ако искате, но Андре също ни показва как да използваме cdn и да го добавяме в scriptетикет - това е толкова просто !:

Сега е време да създадем нашия първи компонент Alpine.js! Първо, дефинираме състоянието с помощта на x-dataатрибута. Състоянието е достъпно в рамките на обхвата, в който е дефинирано, така че в примера по-долу, както и

имат достъп до държавата.

За да използваме това състояние, тогава използваме x-showдирективата, за да покажем или скрием елемента и да включим и изключим елемента с помощта @.

 Toggle 

index.html

Падащо меню

Сега използваме новооткритите ни знания за състоянието, за да приложим падащо меню.

Потребителски интерфейс с падащо меню

След това можем да видим как да се даде ход на събития, за да затворите падащото меню с щракване на разстояние от падащото меню или чрез натискане на бутона за бягство, като се използва @click.awayотносно

Original text


    или @keydown.escapeна .

    Модали и x-ref

    В този актьорски състав Андре ни превежда през друг пример за това как да използваме състояние за отваряне и затваряне на модал. След това той въвежда референции, които ни позволяват да добавяме методи към определени елементи в манипулатора на кликване.

    В този случай фокусираме бутона за затваряне, след като модалът е отворен, като добавим препратка към бутона за затваряне с x-refдиректива и след това добавяме метод към манипулатора на кликване.

     $refs.modalCloseButton.focus()) " >

    Странична лента

    Сега е време за ревизия, която да помогне на новите ни знания да потънат. В този кратък актьорски състав добавяме функционалността за превключване на видимостта на страничната лента. Това е чудесен начин за вграждане на нашето обучение и ни показва друго приложение на наученото.

    Потребителски интерфейс със странична лента

    Раздели

    След това изграждаме набор от раздели. Това е по-ангажирано от предишните ни примери, защото трябва да държим състояние за всички раздели, а не само за булево.

    Както обикновено, състоянието се дефинира с помощта на x-dataдирективата за HTML елемент, който капсулира всички необходими елементи. След това задаваме по подразбиране 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

      И накрая, добавяме хубав, плавен преход за страничната лента, която внедрихме по-рано. Отново, няма спойлери, така че можете да продължите и да го застреляте сами, когато гледате курса.

      Заключение

      Сега разгледахме някои случаи на използване на Alpine.js и създадохме няколко примера, където може да е по-добър избор от React или Vue. Надяваме се, че сте научили нещо ново за Alpine.js и много скоро ще използвате добре новите си умения.

      Ако все още не сте, не забравяйте да проверите курса в Скримба.

      Междувременно, щастливо алпийско кодиране! :)