У цьому підручнику ми створимо простий додаток для підрахунку за допомогою Apline Js і створимо простий інтерфейс користувача за допомогою Tailwind css.
Alpine js - це легка бібліотека та інтерактивність нового інтерфейсного фреймворку. Синтаксис Alpine js майже схожий на Vue js, тому якщо ви знаєте vue, то вивчити цей фреймворк нескладно.
Використання
інструментів Tailwind CSS 2 CDN
alpine js 2.8 CDN
Tailwind CSS 2 CDN
в цьому розділі я використовую Tailwind css, ви можете використовувати будь-який css Framework
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">Apline js 2.8 CDN
використовує атрибут defer, атрибут defer вказує, що скрипт виконується, коли сторінка закінчила розбір аналізів. Якщо ви ставите скрипт перед закриттям, використовуйте відкласти.
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>як
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Create Simple App count Using Apline js with Tailwind CSS </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
</body>
</html>Далі створіть інтерфейс користувача за допомогою попутного вітру css
<div>
<div class="flex items-center justify-center h-screen bg-gray-200">
<button class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Increment</button>
<span class="m-5" x-text="count">0</span>
<button class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Decrement</button>
</div>
</div>Тепер вам потрібно поставити порожні div x-data, що декларують новий обсяг компонентів. Він вказує фреймворку ініціалізувати новий компонент з об'єктом даних.
Спочатку ви визначаєте змінну {count: 0}, а далі вам потрібно додати метод кліків за допомогою x-on:click ви також використовуєте: @click і дайте значення ++
оператор для приросту і -- для зменшення, В останньому використанні x-text для показу інтерактивного стану
Ви також можете використовувати другий Спосіб виконання цього завдання
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Create Simple App count Using Apline js with Tailwind CSS </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="counter()">
<div class="flex items-center justify-center h-screen bg-gray-200">
<button x-on:click="increment()"
class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Increment</button>
<span class="m-5" x-text="count">0</span>
<button x-on:click="decrement()"
class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Decrement</button>
</div>
</div>
<script>
function counter() {
return {
count: 0,
increment() {
this.count++;
},
decrement() {
this.count--;
}
};
}
</script>
</body>
</html>
