Home-theater-designers
Мир веб-разработки хаотичен — фреймворки появляются и исчезают, и вещи могут быть ошеломляющими как для новичков, так и для опытных разработчиков.
В отличие от большинства фреймворков для веб-разработки, Alpine.js стремится быть максимально простым, но достаточно мощным, чтобы справляться с такими понятиями, как реактивность и побочные эффекты.
СДЕЛАТЬ ВИДЕО ДНЯ ПРОКРУТИТЕ, ЧТОБЫ ПРОДОЛЖИТЬ СОДЕРЖАНИЕ
Начало работы с Alpine.js
Установить Alpine.js довольно просто. Вам нужно только включить следующее сценарий тег в вашем HTML:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Кроме того, вы можете установить Alpine.js в свой проект с помощью Node Package Manager:
npm install alpinejs
Реактивность в Alpine.js
Создать index.htm файл и добавьте следующий шаблонный код:
инстаграмм уведомляет, когда вы снимаете скриншот dm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
откладывать атрибут в сценарий Тег указывает браузеру запускать скрипт только после того, как он закончит синтаксический анализ документа.
Alpine.js предоставляет несколько директив, таких как x-данные который он использует для хранения данных и x-текст который он использует для установки внутренний текст присоединяемого компонента. Чтобы использовать эти директивы, добавьте следующий код в свой HTML.
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</div>
Директива x-data хранит объект с ключами имя и организация . Затем вы можете передать эти ключи в директиву x-text. Когда вы запустите код, Alpine.js заполнит значения:
Чем Alpine.js отличается от React
Alpine.js — это легкий фреймворк, который подходит для разработки небольших проектов и прототипов.
В более крупных фреймворках, таких как React, вы используете крючки, как использоватьЭффект() для обработки побочных эффектов в жизненном цикле компонента. Этот хук запускает функцию обратного вызова всякий раз, когда изменяется один из элементов массива зависимостей:
поставить булавку на карты Google
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
Для обработки побочных эффектов в Alpine.js вы можете использовать х-эффект директива. Например, допустим, вы хотите наблюдать за переменной и регистрировать значение всякий раз, когда оно изменяется:
как мне найти IP-адрес принтера
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</div>
Первое, что вы можете заметить, это то, что вам не нужно указывать зависимость. Alpine будет просто прослушивать изменения во всех переменных, переданных в х-эффект . @щелчок директива увеличивает числовую переменную на 1.
Условный рендеринг в Alpine.js
Отрисовка элементов условно это то, что вы можете делать в таких фреймворках, как React. Alpine.js также позволяет условно отображать элементы. Он обеспечивает х-если директива и спец. шаблон элемент, который можно использовать для условного рендеринга элементов.
Создать еще index.htm файл и добавьте тот же шаблонный код, что и раньше. Добавьте следующий код в тело HTML.
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>
<template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</div>
х-если директива передается в шаблон элемент. Это важно, поскольку позволяет Alpine.js отслеживать элементы, которые добавляются или удаляются со страницы. шаблон element должен содержать один корневой элемент; следующий код нарушил бы это правило:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
Создание приложения To-Do с помощью Alpine.js
Пришло время объединить все, что вы узнали, и создать простое приложение с поддержкой локального хранилища. Сначала создайте папку и заполните ее index.htm файл и стиль.css файл. Добавьте шаблонный код в файл index.htm и включите ссылку на стиль.css файл:
<link rel="stylesheet" href="style.css">