👲 📂 🍋 Alpine.js an einem konkreten Beispiel 🎅🏾 🕒 💈

Möglicherweise haben Sie bereits von Alpine.js gehört. Wenn nicht, ist dies "Vue.js mindestens". "Winkel 1 für Millennials." Nennen Sie es, was Sie wollen, die Hauptsache, die Sie verstehen.

Warum brauchen wir einen anderen Rahmen? Nun, Alpine passt gut in seine Nische. Tatsächlich ist es eine Alternative zu großen Frameworks für Sites, an denen diese großen Frameworks nicht benötigt werden. Zum Beispiel wurde ich, ein trendiger Webentwickler, dazu genutzt, eine mehrseitige Website zu schreiben. Ich muss ein Formular elementar und jedes andere interaktive machen. Was werde ich tun? Ich nehme jQuery - Freunde verstehen nicht, beim reinen JS-Schreiben ist auch alles nicht comme il faut. Außerdem kenne ich bereits die Reaktionen, Winkel und Ansichten, ich weiß, was ein datengetriebener Ansatz ist. Wie speichere ich jetzt Daten, bevor ich sie in HTML sende?

Hier kommt Alpine.js zur Rettung. Sie können natürlich Vue oder React schrauben. Aber niemand wird React ohne JSX bei klarem Verstand schreiben, und Vue, das über CDN minimiert wurde, wiegt 34 kB (gegenüber 8,1 kB für Alpine). Es stellt sich also heraus, dass die Wahl auf Alpine fällt.

Kürzlich gab es hier auf Habré bereits Einarbeitungsartikel über Alpine.js . Abgesehen von der Tatsache, dass die Site überall Verweise auf das Template-Tag herausschneidet, erwiesen sich die Artikel als recht gut.

Um mich nicht zu wiederholen, werde ich die Dokumentation nicht nacherzählen , da sie sehr kurz ist (das gesamte Framework besteht aus 13 Direktiven und 6 magischen Eigenschaften) und bald auf Russisch verfügbar sein wird (zum Zeitpunkt des Schreibens ist die Übersetzung unter der Genehmigung des Erstellers, aber sie ist bereits vorhanden kann in meiner Gabel gelesen werden ).

Wenn Sie interessiert und / oder nicht mit Vue vertraut sind, kann ich es nur empfehlen. Für diejenigen, die mit Vue vertraut sind, eine kurze Beschreibung der wichtigsten Unterschiede:

Stattdessen wir v-verwenden x-, das heißt nicht v-model, aber x-model; nicht v-bind, aber x-bindwarum? Das sind deine Hausaufgaben :)
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 Für englischsprachige Personen möchte ich auch einen "fast völlig kostenlosen" Screencast des Erstellers von Alpine.js empfehlen. Er ist so gut, dass es schade ist, einen Link zu teilen. Na dann . Darin spricht der Autor darüber, wie man einen solchen Rahmen wie Alpine schafft und dass es überhaupt nicht so schwierig ist, wie es scheinen mag.

Alpine.js an einem konkreten Beispiel

More articles: