<script src="//unpkg.com/alpinejs" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
<!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">
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<div class="container mx-auto mt-6 max-w-sm">
<h1 class="text-5xl mb-4"> Alpine demo</h1>
<div x-data="{ open: false }">
<div x-show="open">
<p class="bg-gray-200 p-4 my-6 rounded">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, veniam?
</p>
</div>
</div>
</div>
</body>
</html>
html <div x-data="{ open: false }" style="display: none">
<style>
[x-cloak] { display: none;
}
</style>
<div x-data="{ open: false }" x-cloak>
html <div x-show="open" x-cloak>
x-transition
x-on:click || $click
<button
x-on:click="open=true"
class="bg-slate-700 text-white px-4 py-2 rounded-xl">
Toggle
</button>
on:click="open=!open"
<!-- x-text -->
<div class="my-4">
The value of name is <span x-text="name" class="font-bold"></span>
</div>
<!-- x-effect -->
<div x-effect="console.log(open)"></div>
<!-- x-model -->
<input
x-model="search"
type="text"
class="border p-2 w-full mb-2 mt-6"
placeholder="search for something..."
>
<p>
<span class="font-bold">Searching for:</span>
<span x-text="search"></span>
</p>
<!-- x-if -->
<template x-if="open">
<div class="bg-gray-50 p-2 mt-8">
Template based on
</div>
</template>
<!-- x-if -->
<template x-if="open">
<div class="bg-gray-50 p-2 mt-8">
Template based on
</div>
</template>
<!-- x-for -->
<h3 class="text-2xl mt-6 mb-3 font-bold">Posts</h3>
<template x-for="post in posts">
<div x-text="post.title"></div>
</template>
</div>
<!-- x-ref -->
<div x-ref="text"></div>
<button @click="$refs.text.innerText = 'Hello World '" class="bg-black text-white p-2 rounded-lg">
Click
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js" integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<h1 class="text-2xl">This is HTML from another file</h1>
<!-- x-html -->
<div x-html="(await axios.get('./newfile.html')).data">...</div>
access current element
<!-- $el -->
<button @click="$el.innerHTML='Hello World'" class="mt-4 p-4 border">replace text</button>
</div>
run js when initalized
<div x-init="console.log(1)"></div>
<!-- x-init && x-watch -->
<div x-init="$watch('posts', value=> console.log(value))"></div>
<!-- $dispatch -->
<div @notify="alert('You have been notified')">
<button @click="$dispatch('notify')" class="bg-green-700 text-white p-2 mt-4 rounded-lg">
Notify
</button>
</div>
<!-- $data -->
<button
@click="getLatestPost($data.post)"
class="bg-orange-800 text-white mt-6 p-2 rounded-lg">
Get Latest Post
</button>