Учебный тур

Урок 1: Введение в Alpine.js

Alpine.js — это минималистичный JavaScript-фреймворк, предназначенный для добавления интерактивности на веб-страницы. Он позволяет создавать динамические интерфейсы прямо в HTML с помощью декларативных атрибутов, что делает его простым и удобным инструментом.

Установка и подключение
Заголовок раздела «Установка и подключение»

Для начала работы достаточно подключить Alpine.js через CDN. Вот базовый пример:
```
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Alpine.js: Начало</title>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <h1>Добро пожаловать в Alpine.js!</h1>
</body>
</html>
```
Атрибут defer обеспечивает загрузку скрипта после разбора HTML.

Создайте файл index.html, поместите в него указанный выше код, и откройте файл в браузере.

В этот файл мы будем добавлять дальнейшие примеры.

Урок 2: Основы синтаксиса

Alpine.js использует директивы для управления данными и поведением. Основная директива — x-data, которая задает область данных.

Пример: Приветствие
Заголовок раздела «Пример: Приветствие»
<div x-data="{ message: 'Привет, Alpine!' }"> <p x-text="message"></p> </div>
- x-data определяет объект с переменной message.
- x-text отображает значение message внутри элемента.
Работа с вводом
Заголовок раздела «Работа с вводом»

Директива x-model связывает данные с полями ввода:
<div x-data="{ name: '' }"> <input type="text" x-model="name" placeholder="Введите имя"> <p>Привет, <span x-text="name"></span>!</p> </div>
Привет, !
При вводе текста в поле значение name обновляется автоматически.

Урок 3: Управление видимостью элементов

Alpine.js предоставляет директивы x-show, x-if и x-for для управления отображением элементов.

Пример с x-show
Заголовок раздела «Пример с x-show»
<div x-data="{ isVisible: false }"> <button @click="isVisible = !isVisible">Переключить</button> <p x-show="isVisible">Скрытый текст!</p> </div>
Скрытый текст!
- x-show скрывает или показывает элемент в зависимости от условия.
- @click — это сокращение для x-on:click.

Циклы с `x-for`

<div x-data="{ items: ['Яблоко', 'Банан', 'Груша'] }">
    <ul>
        <template x-for="item in items">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

Урок 4: Обработка событий

Директива x-on (или @) позволяет привязывать обработчики событий.

Пример: Счётчик
Заголовок раздела «Пример: Счётчик»
<div x-data="{ count: 0 }"> <button @click="count++"> Увеличить счётчик <span x-text="count"></span> </button> </div>
Каждый клик увеличивает значение count.
Модификаторы событий
Заголовок раздела «Модификаторы событий»

Модификатор .prevent предотвращает стандартное поведение:
<form x-data> <input type="submit" @click.prevent="alert('Отправка формы остановлена')"> </form>
Поэкспериментируйте с другими модификаторами.

Урок 5: Работа с состоянием

Состояние в Alpine.js хранится в x-data и является реактивным — изменения автоматически обновляют DOM.

Пример: Форма

<div x-data="{ email: '', password: '' }">
    <input type="email" x-model="email" placeholder="Имейл">
    <input type="password" x-model="password" placeholder="Пароль">
    <button @click="alert('Имейл: ' + email + ', Пароль: ' + password)">Войти</button>
</div>

Введённые данные доступны через переменные email и password.

Попробуйте добавить ещё какие-нибудь поля, по аналогии.

Урок 6: Компоненты и их изоляция

Alpine.js позволяет создавать переиспользуемые компоненты с изолированным состоянием.

Пример: Компонент счётчика

<div x-data="counter()">
    <button @click="increment">
        Увеличить счётчик
        <span x-text="count"></span>
    </button>
</div>
<div x-data="counter()">
    <button @click="increment">
        Увеличить другой счётчик
        <span x-text="count"></span>
    </button>
</div>

<script>
function counter() {
    return {
        count: 0,
        increment() {
            this.count++;
        }
    }
}
</script>

Функция counter определяет логику компонента, который можно использовать многократно.

Урок 7: Анимации и переходы

Директива x-transition добавляет анимации к элементам.

Пример: Появление элемента
Заголовок раздела «Пример: Появление элемента»
<div x-data="{ show: false }"> <button @click="show = !show">Переключить</button> <div x-show="show" x-transition> <p>Я появляюсь плавно!</p> </div> </div>
Я появляюсь плавно!
Элемент появляется с анимацией по умолчанию.

Попробуйте настроить эффекты анимации с помощью CSS.

Урок 8: Работа с AJAX и асинхронными запросами

Директива x-init выполняет код при инициализации компонента, что удобно для загрузки данных.

Пример: Загрузка постов

<div x-data="{ posts: [] }" x-init="fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
    .then(response => response.json())
    .then(data => posts = data)">
    <ul>
        <template x-for="post in posts">
            <li x-text="post.title"></li>
        </template>
    </ul>
</div>

Попробуйте реализовать другие методы API с помощью сервиса JSONPlaceholder.

Урок 9: Расширенные возможности

Alpine.js предлагает дополнительные инструменты, такие как x-ref и x-effect.

Пример с `x-ref`

<div x-data>
    <input type="text" x-ref="input" placeholder="Введите текст">
    <button @click="$refs.input.focus()">Фокус</button>
</div>

$refs предоставляет доступ к DOM-элементам.

Пример с `x-effect`

<div x-data="{ text: '' }">
    <input type="text" x-model="text" placeholder="Введите текст">
    <p x-effect="$el.textContent = text ? 'Вы ввели: ' + text : 'Начните вводить текст'"></p>
</div>

Параграф автоматически обновляется благодаря x-effect.

Урок 10: Практический проект — Список дел

Создайте простое приложение для управления задачами:

Задачи должны хранятся в массиве todos.
Новые задачи должны добавляться через метод addTodo.
Удаление задач должно осуществляться через метод removeTodo.
Данные должны сохраняться в localStorage.

Разметка

<div x-data="todoApp()">
    <input type="text" x-model="newTodo" @keyup.enter="addTodo" placeholder="Новая задача">
    <ul>
        <template x-for="(todo, index) in todos" :key="index">
            <li>
                <input type="checkbox" x-model="todo.completed">
                <span x-text="todo.text" :class="{ 'line-through': todo.completed }"></span>
                <button @click="removeTodo(index)">Удалить</button>
            </li>
        </template>
    </ul>
</div>

JavaScript

Допишите код, чтобы проект заработал:

<script>
function todoApp() {
    return {
        todos: JSON.parse(localStorage.getItem('todos')) || [],
        newTodo: '',
        addTodo() {},
        removeTodo(index) {},
        saveTodos() {}
    }
}
</script>

Решение

Посмотреть

<script>
function todoApp() {
    return {
        todos: JSON.parse(localStorage.getItem('todos')) || [],
        newTodo: '',
        addTodo() {
            if (this.newTodo.trim()) {
                this.todos.push({ text: this.newTodo, completed: false });
                this.newTodo = '';
                this.saveTodos();
            }
        },
        removeTodo(index) {
            this.todos.splice(index, 1);
            this.saveTodos();
        },
        saveTodos() {
            localStorage.setItem('todos', JSON.stringify(this.todos));
        }
    }
}
</script>

Этот курс охватывает все основные аспекты Alpine.js, от базового синтаксиса до создания полноценного приложения. Попробуйте повторить примеры и экспериментируйте с кодом, чтобы закрепить знания!