В этом уроке мы создадим простое приложение подсчета с помощью Apline Js и создадим простой пользовательский интерфейс с помощью Tailwind css.
Alpine js - это облегченная библиотека и интерактивная новая интерфейсная структура. Синтаксис Alpine js почти похож на синтаксис Vue js, поэтому если вы знаете vue, то легко освоить этот фреймворк.
Использование
инструментов Попутный ветер CSS 2 CDN
Apline js 2.8 CDN
Попутный ветер CSS 2 CDN
В этом разделе я использую попутный ветер CSS, вы можете использовать любую платформу CSS
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">Apline js 2.8 CDN
use defer attribute, атрибут defer указывает, что сценарий выполняется, когда страница завершит синтаксический анализ. Если вы вставляете скрипт перед close head, используйте 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 you и даете значение ++
operator для Increment и -- для Decrement, In Last use x-text for show interactive state
Вы также можете использовать второй способ для выполнения этой задачи
<!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>
