Что такое Alpine.js
Alpine.js — это адаптивный интерфейсный фреймворк, разработанный разработчиком Калебом Порцио. В отличие от Vue.js, React и Angular, с которыми люди были знакомы в прошлом, Alpine.js не требует внесения дорогостоящих изменений в существующие приложения, а также не имеет концепции VDom, его можно напрямую добавлять к существующим приложениям. система.использование.
Краткое руководство по обучению
Alpine.js мало используется в Китае, поэтому большая часть соответствующего учебного контента написана на английском языке, но концепций, задействованных в Alpine.js, не так много, как в Vue, React и т. д. Вы можете легко изучить его.
Рекомендуемый учебный маршрут
В Alpine.js не так много концепций, поэтому маршрут обучения также очень прост, вам нужно только освоить следующий контент.
- базовый синтаксис и использование Alpine.js;
- Волшебный помощник для Alpine.js; (не требуется)
- Spruce, инструмент управления состоянием для Alpines.js (не обязательно)
Знание базового синтаксиса позволяет разрабатывать собственные приложения с использованием Alpine.js. Последние два могут упростить весь рабочий процесс разработки и повысить эффективность разработки.
Рекомендуемые учебные документы
1. Ознакомьтесь с официальной документацией и изучите базовую грамматику
Чтобы изучить Alpine.js, первое, без чего не обойтись, — это официальная документация.Официальная документация Alpine.js находится на домашней странице проекта.
Если ваш английский недостаточно хорош, я рекомендую вам посмотреть традиционную китайскую версию, переведенную тайванью разработчиками. Хотя грамматика и словарный запас не совсем одинаковы, это хорошая добавка для разработчиков с плохим английским языком.
Кроме того, отечественные разработчики перевели упрощенную китайскую версию в своих блогах, но официально они не признаны, поэтому всем следует обращать внимание на проблему версии при чтении.
На конкретном уровне грамматики я предлагаю вам учиться по следующей логике
Уровень 1, изучите:
-
x-data: учит, как организовать код Alpine.js. -
x-on: привязка события -
x-if: логическая обработка -
x-for: рендеринг списка -
x-bind: привязка данных -
x-model: Двусторонняя привязка данных
Эти шесть синтаксисов помогут вам начать работу с Alpine.js.
Второй эшелон, изучите:
-
x-show: Управляет отображением -
x-spread: привязать свойства объекта Alpine.js к объекту. -
x-text: управляет текстом внутри элемента -
x-html: элемент управления внутри Html -
x-transition: управление анимацией затухания перехода
Добавьте больше функциональности в свой проект Alpine.js с помощью этих пяти синтаксисов.
Третий эшелон, узнайте:
-
x-cloak: Инициализация компонента управления завершена. -
x-ref: привязать объект родительского компонента -
$el: получить элемент -
$refs: получить внешнюю ссылку, отмеченную в объекте родительского компонента. -
$event: объект события -
$dispatch: инициировать событие -
$nextTick: следующее обновление DOM -
$watch: отслеживать изменения данных
Приведенный выше синтаксис позволит вам более глубоко использовать Alpine.js, но во многих сценариях вы можете не использовать его, так что не о чем беспокоиться.
2. Проверьте реализацию общей логики и сравните различия
Хьюго является одним из членов команды разработчиков Alpine.js. Помимо разработки, Хьюго также предоставляет игровую площадку на своем веб-сайте. Здесь вы можете увидеть некоторые распространенные варианты использования Alpine.js, такие как: привязка данных, цикл, захват данные и т. д.
вы можете посетитьalpinejs.codewithhugo.com/Ознакомьтесь с некоторыми примерами, подготовленными Хьюго, чтобы быстро понять, как знакомые вам функции должны быть реализованы в Alpine.js.
3. Онлайн-практика Alpine.js
Когда вы поймете некоторые основы использования, вы можете начать открывать веб-страницу и начать практиковаться в ее использовании самостоятельно.
Есть две среды отладки, которые можно использовать онлайн, вы можете попрактиковаться на их основе и непосредственно увидеть эффект.
- Практическая среда со встроенным TailwindCSS
- Практическая среда со встроенной консолью Console
Как инструмент, Alpine.js требует много практики, чтобы ознакомиться с его использованием.С документами и примерами, которые вы прочитали ранее, теперь вы можете попрактиковаться в использовании Alpine.js в этих двух практических средах.
4. Ознакомьтесь с реальным проектом, чтобы узнать об Alpine.js
Чтобы инструмент прошел путь от тестирования до внедрения в реальную среду, ему нужны референсы из реальных проектов. И Awesome предоставляет множество таких случаев.
Узнав об этих проектах и инструментах, вы сможете узнать, как другие используют Alpine.js.
Сводка учебных ресурсов для Alpine.js
Учебных ресурсов по Alpine.js не так много, но есть и более подходящие для отечественных разработчиков, я их еще раз перечислю, а именно:
видеоурок
- Создание AlpineJS: курс по Laracasts от разработчика Alpine.js Калеба Порцио о том, как создать Alpine.js с нуля. Этот курс поможет вам лучше и быстрее понять Alpine.js.
личный блог
- Code With Hugo: в блоге основных разработчиков Alpine.js будут обновлены некоторые технические статьи об Alpine.js.
- Один шаг за шагом Alpine.js: вводное руководство по Alpine.js, написанное тайваньскими соотечественниками, есть серия. Всего полных статей 30, можете посмотреть их немного.
Списки рассылки
- Еженедельник Alpine.js: Еженедельник Alpine.js поддерживается Hugo, основным разработчиком Alpine.js. Каждую пятницу рассылается электронное письмо, чтобы представить последние ресурсы сообщества Alpine.js. На него стоит подписаться.
Форум
- Github Discussions
- Discord
Некоторые часто задаваемые вопросы
1. Alpine.js зависит от Webpack / Alpine.js не поддерживает Webpack?
Ответ: Нет, Alpine.js можно использовать как с веб-пакетом, так и без него. Даже при сборке с помощью веб-пакета Alpine.js автоматически привязывает объекты для вашего удобства.
2. Alpine.js — это техническое решение, предназначенное для фронтенда/бэкэнда
О: Alpine.js — это не техническое решение, предназначенное для определенного типа людей. Хотя, на мой взгляд, он очень дружелюбен к бэкенду, потому что его можно использовать без инструментов построения фронтенда, таких как вебпак, но если вы фронтенд и вам не нравится JSX React или шаблон Vue, вы все равно можете выберите «Использовать Alpine.js».
3. Каков порог обучения для Alpine.js?
Для изучения Alpine.js достаточно освоить базовый синтаксис, после чего вы сможете официально начать его использовать. По сравнению с Vue и React, я думаю, что стоимость обучения все еще ниже. Vue имеет полную цепочку инструментов, которая упрощает процесс обучения, но есть еще много концепций, которые нужно изучить, но сложность начала работы невелика.
Мой собственный опыт
Alpine.js, на мой взгляд, отличный инструмент для бэкенд-разработчиков. Его синтаксис достаточно прост и не требует упаковки, поэтому для бэкенд-разработчиков он может быть легко доступен в системе. В то же время Alpine.js можно хорошо сочетать с логикой традиционного рендеринга на стороне сервера, используя контент рендеринга на стороне сервера, используя Alpine.js для управления контентом, чтобы построение страницы могло быть хорошо завершено. , и сложность проекта может быть достигнута без увеличения сложности проекта.В то же время это улучшает динамический эффект страницы и сложность написания логики, что является хорошим инструментом для back-end разработчиков.
Для фронтенд-разработчиков, если вы ненавидите необходимость собирать и упаковывать каждый раз, когда пишете проект, то Alpine.js также является хорошим выбором.
Оригинальный адрес:ву ву ву.и celery.com/2021/02/как…