Get best of the week

一个具体例子中的Alpine.js

您可能已经听说过Alpine.js。如果不是，则为“至少Vue.js”。“千禧一代的角度1”。称它为您想要的，这是您了解的主要内容。


为什么我们需要另一个框架？好吧，Alpine非常适合其利基市场。实际上，对于不需要这些大型框架的站点，它是大型框架的替代方案。例如，我是一个新潮的Web开发人员，被利用来编写一个多页面的网站。我需要使表单成为基本表单，并进行其他交互。我该怎么办？我将使用jQuery-朋友们不理解，在纯JS上编写所有内容也不是很容易。另外，我已经知道反应，角度和视图，我知道什么是数据驱动方法。现在如何在以HTML发送之前存储数据？


这里Alpine.js可以解救。您当然可以拧Vue或React。但是没有JSX的React没有人会写，通过CDN压缩的Vue重34 kB（而Alpine则是8.1 kB）。因此，事实证明选择权在于阿尔卑斯。


最近在Habré上已经有关于Alpine.js的熟悉文章。除了该站点在所有地方都切掉对template标签的引用之外，这些文章还算不错。


为了不重复我的内容，我不会重述该文档，因为该文档非常简短（整个框架是13个指令和6个魔术属性），并且很快将以俄语提供（在撰写本文时，翻译已经得到创作者的认可，但已经可以在我的fork中读取）。


如果您有兴趣和/或不熟悉Vue，我强烈推荐您。对于那些熟悉Vue的人，简要描述主要区别：


  • 相反，我们v-使用x-，即 不是v-model，但是x-model; 不是v-bind，但是x-bind为什么呢？这是你的作业:)
  • x-if并且x-for只能在template标签中使用。缺乏虚拟DOM的成本。
  • {{}}没有每个人都喜欢的插值法。就像真正的男人在Vue中所做的那样，编写x-text和x-html。

其余的正在处理中。


我不会提出任何原创的东西，幻想是虚弱的。让我们每个人都成为讨厌的图杜什尼克。为什么不别的呢？我已经提到的第一个借口是幻想。第二个-每个人都已经完全知道创建蟾蜍的过程，这将使他们不被想法分散注意力，而是专注于实现。第三个也是我最喜欢的是“ tuda中有所有基本功能，使我们可以查看所有过程”，等等。等等


简而言之，我倒水完毕，然后显示代码。


让我们从裸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对于讲英语的人，我也想建议Alpine.js的创建者进行“几乎完全免费”的截屏。他是如此出色，以至于连一个链接都可惜。好吧，然后。在其中，作者谈到了如何创建像Alpine这样的框架，并且它并不像看起来那样困难。

More articles:


All Articles