Alpine.js – это прочная, минимальная структура для составления поведения JavaScript в вашей разметке. Это верно, в вашей разметке!
Это позволяет писать большинство ваших js inline в вашем HTML, что облегчает запись декларативного кода (в отличие от процедурного кода). Согласно его создателю Caleb Porzio, он направлен на заполнение пустоты между ванильными ся js (или jQuery) и крупными рамками V-DOM, как Vue/React.
Мы в Scrimba определенно считаем, что это оживит свое обещание, поэтому мы рады представить вам Бесплатный одночасовой курс!
Запуск курса. Учите альпийские js? Alpine JS – это аккуратный и минимальный Lib @calebporzio Это направлено на заполнение пустоты между ванильными JS (или jQuery) и крупными рамками V-DOM, такими как Vue/React. В этом ? Курс, @drehimself дает вам одночасовое введение. https://t.co/podsdjmc4a pic.twitter.com/CvCDVFuMaM
В нем вы найдете кучу веселых и интерактивных учебных пособий, которые встроили ваше обучение и дают вам мышечную память, вам нужно стать горячей в Alpine.js.
Теперь давайте посмотрим, как структурирован курс!
Почему учить Alpine.js?
В первом уроке учитель Андре Мадаранг начинается, объяснив, почему вы должны узнать библиотеку. В ближайшее время Alpine.js хорошо работает, когда вам нужно небольшое количество JS, например, несколько раскрывающихся или вкладок. Это означает, что вы получите кучу мощности в сумасшедшем маленьком размере без необходимости устанавливать NPM.
Андре также дает вам введение в себя. Он является полноценным разработчиком и YouTuber, который преподает концепции веб-разработки, такие как Laravel, Vue и CSS Tailwind. Мы в восторве, чтобы у него на борту как учитель Scrimba!
Установка и базовый альпийский компонент
Установка Alpine.js легко – вы можете использовать NPM, если хотите, но Andre также показывает нам, как использовать CDN и добавить его в Сценарий Тег – это так просто, как это!
Теперь пришло время создать наш первый компонент Alpine.js! Во-первых, мы определяем состояние, используя X-Data атрибут. Состояние доступно в рамках в котором он определен, поэтому в примере ниже, оба <кнопка> и иметь доступ к государству.
Чтобы использовать это состояние, мы тогда используем X-Show Директива, чтобы показать или скрыть элемент и переключить элемент включения и выключения, используя @ .
index.html
Падать
Теперь мы используем наши новые знания из государства для реализации раскрывающегося списка.
Затем мы видим, как установить события, чтобы закрыть раскрывающуюся, щелкнув раскрывающуюся или нажав клавишу Escape, используя @ click.awy на @ keydown.escape на <кнопка> Отказ
Модали и X-REF
В этом актеры Андре берет нас через другой пример того, как использовать состояние, чтобы открыть и закрыть модал. Далее он представляет ссылки, которые позволяют нам добавлять методы к определенным элементам в обработчике кликов.
В этом случае мы фокусируем кнопку «Закрыть, как только модаль открыт», добавив ссылку на кнопку «Закрыть» с помощью X-Ref Директива, а затем добавление метода обработчика клики.
Боковая панель
Теперь пришло время для некоторой ревизии, чтобы помочь нашим новым знаниям погружаться. В этом короткометре мы добавляем функциональность, чтобы переключить видимость боковой панели. Это отличный способ встраивать наше обучение и показывает нам другое применение того, что мы узнали.
Вкладки
Далее мы строим набор вкладок. Это более вовлечено, чем наши предыдущие примеры, потому что мы должны держать состояние для всех вкладок, а не просто логического.
Как обычно, состояние определяется с использованием X-Data Директива на HTML-элемент, который инкапсулирует все необходимые элементы. Затем мы устанавливаем по умолчанию для Tab1 и установить слушатель события (который делает вкладку активную) для каждой из вкладок.
Чтобы изменить раздел содержимого на содержимое вкладки, который нажал, мы добавляем X-Show Директивы к
Наконец, Andre показывает нам, как применять активные стили вкладки с помощью условного рендеринга класса.
:class="{ 'bg-white text-blue-700 border-l border-t border-r' : tab === 'tab1'
}" ;
Выбор изображения
В этом актеры Андре показывает нам, как навыки, которые мы узнали в предыдущем актере, могут быть применены к другому опыту интерфейса – селектор изображений. Сборники изображений работают так же, как вкладки, но с изображениями вместо текста.
Селектор изображений
Обнаружение прокрутки
Теперь Andre показывает нам, как создать детектор прокрутки, который изменяет цвет фона в качестве прокрутки пользователей. Для этого мы определяем некоторое состояние, которое отслеживает, прокрутит ли пользователь.
Теперь мы добавляем прослушиватель событий прокрутки в окне и некоторое условное рендеринг класса на Отказ
Аккордеонные тумблеры и петли
В этом разделе мы строим аккордеонный переключатель с использованием петель. В нашем примере есть несколько часто задаваемых вопросов с ответами, и мы хотим переключить видимость ответов.
Отличный способ сделать это без повторяющегося кода – использовать петли. Для этого мы храним все наши вопросы и ответы в массиве, цикл над ними, а затем установите прослушиватель событий на каждую итерацию цикла.
Примечание: Для этого на наши элементы должны быть завернуты в шаблон ярлык.
извлекать
Теперь мы видим, как мы можем сделать запросы на внешний API. Это звучит пугающим, но легко разбиты на четыре шага.
- Добавьте состояние, чтобы держать кавычки:
x - data = "{ quote:'' }";
- Дайте приложению цитату, чтобы показать по инициализации:
x - init = "quote = 'Awesome quote'";
- Установите текст в
Что отображает цитату как состояние:
Использовать извлекать Чтобы схватить цитату из внешнего API:
x-init=" fetch('https://api.kanye.rest') .then(response => response.json()) .then(data => quote = data.quote) "Вот полный блок кода:
UI выглядит так:
Приложение Todo и X-модель
В этом отлив мы узнаем, как построить приложение Mini To-Do. Нам нужны три части государства для этого; Один для хранения до DOS в массиве ( TODOS ), один, чтобы отслеживать, являются ли типы пользователей в новом DO-DO ( TOOTITLE ) и один для отслеживания нового DO ID ( TODOID ).
Как мы используем много государств, мы извлекаем нашу функцию на Теперь мы зацикливаем наш дос, чтобы отобразить заголовок, которое мы сохранили в массиве, и условно добавьте строку, если TO-DO завершено. Теперь мы работаем над добавлением TO-DO. Во-первых, мы добавляем Функция, которую мы хотим запустить, когда пользовательские типы появятся новые TO-DO, затем добавляются в наше
X-модель Директива к нашему что синхронизирует Tootitle с тем, что напечатано в :
Оригинал: "https://www.freecodecamp.org/news/learn-alpine-js-in-this-free-tutorial-course/"