Alpine veebiraamistik

https://alpinejs.dev/

<script src="//unpkg.com/alpinejs" defer></script>

https://tailwindcss.com/

<script src="https://cdn.tailwindcss.com"></script>

x-data Component

<!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>

x-show

html <div x-show="open" x-cloak>

x-transition

x-on

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

  <!-- x-text -->
  <div class="my-4">
    The value of name is <span x-text="name" class="font-bold"></span>
  </div>

x-effect

<!-- x-effect -->
<div x-effect="console.log(open)"></div>

x-model

        <!-- 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-open

        <!-- x-if -->
        <template x-if="open">
          <div class="bg-gray-50 p-2 mt-8">
            Template based on
          </div>
        </template>

x-if

        <!-- x-if -->
        <template x-if="open">
          <div class="bg-gray-50 p-2 mt-8">
            Template based on
          </div>
        </template>

x-for

        <!-- 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

magic prop $refs--> $refs.siin.innerText "siin" viitab mingi div x-ref taolise nimega divile

        <!-- 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>

x-html

axios cdn

<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>

newfile.html

<h1 class="text-2xl">This is HTML from another file</h1>

<!-- x-html -->
<div x-html="(await axios.get('./newfile.html')).data">...</div>

$el

access current element

        <!-- $el -->
        <button @click="$el.innerHTML='Hello World'" class="mt-4 p-4 border">replace text</button>
      </div>

x-init

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

        <!-- $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

        <!-- $data -->
        <button 
          @click="getLatestPost($data.post)" 
          class="bg-orange-800 text-white mt-6 p-2 rounded-lg">
          Get Latest Post
        </button>

TLUPeterson / alpine