W tym samouczku utworzymy prostą aplikację do liczenia przy użyciu Apline Js i utworzymy prosty interfejs użytkownika za pomocą css Tailwind.
Alpine js to lekka biblioteka i interaktywność nowego frameworka front-end. Alpejska składnia js jest prawie podobna do Vue js, więc jeśli znasz vue , to łatwo jest nauczyć się tego frameworka.
Użycie
narzędzi Tailwind CSS 2 CDN
Apline js 2.8 CDN
Tailwind CSS 2 CDN
W tej sekcji używam css tailwind, możesz użyć dowolnego css Framework
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">Apline js 2.8 CDN
use defer attribute , defer attribute określa, że skrypt jest wykonywany po zakończeniu analizowania strony. Jeśli umieścisz skrypt przed close head, użyj odroczenia .
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>lubić
<!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>Następnie utwórz interfejs użytkownika za pomocą css tailwind
<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>Teraz musisz umieścić puste div x-data deklaruje nowy zakres komponentu. Mówi frameworkowi, aby zainicjował nowy komponent z obiektem danych.
Najpierw definiujesz zmienną {count: 0}, a następnie musisz dodać metodę click za pomocą x-on:click używasz również @:click u i podajesz wartość ++
operator dla Increment i -- dla Decrement ,In Last use x-text for show interactive state
Możesz również użyć drugiego sposobu, aby wykonać to zadanie
<!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>
