🙎🏾 🤵🏽 😊 Alpine.js على مثال ملموس 💞 🧖🏽 👨‍🔬

ربما سمعت بالفعل عن Alpine.js. إذا لم يكن كذلك ، فهذا هو "Vue.js كحد أدنى." "الزاوي 1 لجيل الألفية." أطلق عليه ما تريد ، الشيء الرئيسي الذي تفهمه.

لماذا نحتاج إلى إطار آخر؟ حسنًا ، تتناسب جبال الألب بشكل جيد مع مكانتها. في الواقع ، إنه بديل لأطر العمل الكبيرة للمواقع حيث لا توجد حاجة لهذه الأطر الكبيرة. على سبيل المثال ، أنا ، مطور ويب عصري ، تم تسخيره لكتابة موقع متعدد الصفحات. أحتاج إلى جعل نموذج الابتدائية وأي تفاعلية أخرى. ماذا سأفعل؟ سآخذ jQuery - الأصدقاء لا يفهمون ، في كتابة JS البحتة كل شيء ليس كذلك. بالإضافة إلى ذلك ، أنا أعلم بالفعل ردود الفعل ، والزوايا ، والمنظر ، وأنا أعرف ما هو النهج القائم على البيانات. كيف أقوم الآن بتخزين البيانات قبل إرسالها في HTML؟

هنا يأتي Alpine.js للإنقاذ. يمكنك بالطبع تثبيت Vue أو React. لكن رد الفعل بدون JSX لن يكتب أحد في عقله الأيمن ، ويصل حجم Vue المصغر عبر CDN إلى 34 كيلوبايت (مقابل 8.1 كيلوبايت لـ Alpine). لذلك اتضح أن الاختيار يقع على جبال الألب.

في الآونة الأخيرة هنا في حبري كانت هناك بالفعل مقالات للتعرف على Alpine.js . بصرف النظر عن حقيقة أن الموقع قطع المراجع لعلامة القالب في كل مكان ، تبين أن المقالات جيدة جدًا.

لكي لا أكرر نفسي ، لن أعيد رواية الوثائق ، لأنها قصيرة جدًا (إطار العمل بأكمله هو 13 توجيهًا و 6 خصائص سحرية) وسيتوفر قريبًا باللغة الروسية (في وقت كتابة هذا التقرير ، كانت الترجمة تحت موافقة منشئ المحتوى ، لكنها بالفعل يمكن قراءتها في شوكة بلدي ).

إذا كنت مهتمًا و / أو لست على دراية بـ Vue ، فإنني أوصي به بشدة. بالنسبة لأولئك الذين هم على دراية بـ Vue ، وصف موجز للاختلافات الرئيسية:

بدلاً من ذلك ، v-نستخدم x-، أي لا v-model، ولكن x-model؛ لا v-bind، ولكن x-bindلماذا؟ هذا هو واجبك :)
x-ifو x-forيمكن أن تستخدم إلا في العلامة القالب. تكاليف الافتقار إلى DOM الافتراضي.
{{}}لا يوجد استيفاء مفضل للجميع. إرسال x-textو x-html، والرجل الحقيقي منذ فترة طويلة تفعل في فيو.

والباقي في العملية.

لن أخرج بأي شيء أصلي ، فالخيال ضعيف. دعونا نجعل الجميع tudushnik مكروه. لماذا لا شيء آخر؟ العذر الأول الذي ذكرته بالفعل هو الخيال السيئ. والثاني - الجميع يعرف بالفعل عن ظهر قلب عملية إنشاء toadka ، والتي ستسمح لهم بعدم تشتيت الفكرة ، ولكن التركيز على التنفيذ. الثالث والمفضل لدي هو "هناك جميع الوظائف الأساسية في تودا ، والتي تسمح لنا بالنظر في جميع العمليات" ، إلخ. إلخ

باختصار ، انتهيت من صب الماء ، وأظهر الرمز.

لنبدأ بـ 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.js على مثال ملموس

More articles: