🧚 👨‍👩‍👧‍👦 🙅🏾 Alpine.js pada contoh nyata 🐝 👨‍🎨 😘

Anda mungkin sudah pernah mendengar tentang Alpine.js. Jika tidak, maka ini adalah "Vue.js minimal." "Angular 1 for Millennials." Sebut saja apa yang Anda inginkan, hal utama yang Anda pahami.

Mengapa kita membutuhkan kerangka kerja lain? Nah, Alpine cocok sekali di ceruknya. Bahkan, ini merupakan alternatif untuk kerangka kerja besar untuk situs di mana kerangka kerja besar ini tidak diperlukan. Sebagai contoh, saya, seorang pengembang web yang trendi, dimanfaatkan untuk menulis situs multi-halaman. Saya perlu membuat bentuk dasar dan interaktif lainnya. Apa yang akan saya lakukan? Saya akan mengambil jQuery - teman-teman tidak mengerti, pada penulisan JS murni semuanya juga tidak aman. Selain itu, saya sudah tahu reaksi, sudut pandang dan pandangan, saya tahu apa pendekatan berbasis data. Bagaimana saya sekarang menyimpan data sebelum mengirim dalam HTML?

Di sini Alpine.js datang untuk menyelamatkan. Anda dapat, tentu saja, mengacaukan Vue atau Bereaksi. Tetapi Bereaksi tanpa JSX tidak ada yang waras yang akan menulis, dan Vue yang diperkecil melalui CDN berbobot 34 kB (versus 8,1 kB untuk Alpine). Jadi ternyata pilihan ada pada Alpine.

Baru-baru ini di sini di Habré sudah ada artikel pengenalan tentang Alpine.js . Terlepas dari kenyataan bahwa situs tersebut memotong referensi ke tag templat di mana-mana, artikel-artikelnya ternyata cukup bagus.

Agar tidak mengulangi sendiri, saya tidak akan menceritakan kembali dokumentasi , karena sangat pendek (seluruh kerangka kerja adalah 13 arahan dan 6 properti sulap) dan akan segera tersedia dalam bahasa Rusia (pada saat penulisan, terjemahan berada di bawah persetujuan pencipta, tetapi sudah dapat dibaca di garpu saya ).

Jika Anda tertarik dan / atau tidak terbiasa dengan Vue, saya sangat merekomendasikannya. Bagi mereka yang terbiasa dengan Vue, deskripsi singkat tentang perbedaan utama:

Sebagai gantinya, kami v-menggunakan x-, mis. bukan v-model, tapi x-model; tidak v-bind, tapi x-bindmengapa? Ini adalah pekerjaan rumah Anda :)
x-if x-for template. Virtual DOM.
{{}} . x-text x-html, Vue.

, . . - ? – . – , , . – " , " .. ..

, , .

HTML, CDN Alpine

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To-Do  Alpine.js</title>
    <script
      src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js"
      defer
    ></script>
  </head>
  <body></body>
</html>

Alpine , . .

, ? . x-data.

<div x-data="{ name: '' }">
  <p>, <span x-text="name"></span></p>
</div>

<div> , . name <div> .

, to-do. :

<div
  x-data="{ todos: [{id: 1, title: ' ', completed: false}, {id: 2, title: ' ', completed: false}, {id: 3, title: '  ', completed: false}, {id: 4, title: '  ', completed: false}] }"
>
  <h1>  :</h1>
  <ul>
    <template x-for="todo in todos" :key="todo.id">
      <li x-text="todo.title"></li>
    </template>
  </ul>
</div>

. , , CSS- .completed, x-bind:class ( {[ ]: []}). cursor: pointer li, .

<style>
  .completed {
    text-decoration: line-through;
  }

  li {
    cursor: pointer;
  }
</style>

<div
  x-data="{ todos: [{id: 1, title: ' ', completed: false}, {id: 2, title: ' ', completed: false}, {id: 3, title: '  ', completed: false}, {id: 4, title: '  ', completed: false}], toggleTodo: function(id) { var todo = this.todos.find((todo) => todo.id === id); todo.completed = !todo.completed; } }"
>
  <h1>  :</h1>
  <ul>
    <template x-for="todo in todos" :key="todo.id">
      <li
        x-text="todo.title"
        @click="toggleTodo(todo.id)"
        :class="{'completed': todo.completed}"
      ></li>
    </template>
  </ul>
</div>

, , . , x-data :

<div x-data="todos()">
  <h1>  :</h1>
  <ul>
    <template x-for="todo in todos" :key="todo.id">
      <li
        x-text="todo.title"
        @click="toggleTodo(todo.id)"
        :class="{'completed': todo.completed}"
      ></li>
    </template>
  </ul>
</div>

<script>
  function todos() {
    return {
      todos: [
        { id: 1, title: ' ', completed: false },
        { id: 2, title: ' ', completed: false },
        { id: 3, title: '  ', completed: false },
        { id: 4, title: '  ', completed: false },
      ],
      toggleTodo: function (id) {
        var todo = this.todos.find((todo) => todo.id === id);
        todo.completed = !todo.completed;
      },
    };
  }
</script>

… Vue.

input :

<div x-data="todos()">
  <!-- ... -->
  <div>
    <h4>  :</h4>
    <input type="text" x-model="inputValue" />
    <button @click="addTodo()"></button>
  </div>
</div>

<script>
  function todos() {
    return {
      // ...
      inputValue: '',
      addTodo: function () {
        if (!this.inputValue) {
          return;
        }

        this.todos.push({
          id: Date.now(),
          title: this.inputValue,
          completed: false,
        });
        this.inputValue = '';
      },
    };
  }
</script>

push() , Alpine , - .

– . <li> span: , – .

<ul>
  <template x-for="todo in todos" :key="todo.id">
    <li @click="toggleTodo(todo.id)" :class="{'completed': todo.completed}">
      <span x-text="todo.title"></span>
      <span @click="deleteTodo(todo.id)">&times;</span>
    </li>
  </template>
</ul>

<script>
  function todos() {
    return {
      // ...
      deleteTodo: function (id) {
        this.todos = this.todos.filter((todo) => todo.id !== id);
      },
    };
  }
</script>

, , , REST API. , JSON Placeholder. x-init.

<div x-data="todos()" x-init="fetchTodos()">
  <!-- ... -->
</div>

<script>
  function todos() {
    return {
      // ...
      todos: [],
      fetchTodos: function () {
        fetch('https://jsonplaceholder.typicode.com/todos')
          .then((response) => response.json())
          .then((data) => {
            this.todos = data.slice(0, 10);
          });
      },
    };
  }
</script>

x-init DOM ( created Vue). – , ( mounted).
, ?_limit=10, query , , .

. Alpine.js. . , . , , .

sandbox. , , .

PS Untuk penutur bahasa Inggris, saya juga ingin menyarankan screencast "hampir sepenuhnya gratis" dari pencipta Alpine.js. Dia sangat baik sehingga bahkan sebuah tautan sangat disayangkan. Baiklah kalau begitu . Di dalamnya, penulis berbicara tentang bagaimana membuat kerangka kerja seperti Alpine, dan bahwa itu sama sekali tidak sesulit kelihatannya.

Alpine.js pada contoh nyata

More articles: