🤰🏿 👼🏽 🕶️ अल्पाइन। एक ठोस उदाहरण पर 🐒 😜 🤳🏻

आपने अल्पाइन के बारे में पहले ही सुना होगा। यदि नहीं, तो यह "Vue.js न्यूनतम पर है।" "मिलेनियल्स के लिए कोणीय 1।" इसे आप जो चाहते हैं, उसे मुख्य बात समझें।

हमें दूसरे ढांचे की आवश्यकता क्यों है? खैर, अल्पाइन अपने आला में अच्छी तरह से फिट बैठता है। वास्तव में, यह उन साइटों के लिए बड़े ढांचे का विकल्प है जहां इन बड़े ढांचे की जरूरत नहीं है। उदाहरण के लिए, मुझे, एक ट्रेंडी वेब डेवलपर, एक बहु-पृष्ठ साइट लिखने के लिए तैयार किया गया था। मुझे एक फार्म प्राथमिक और किसी भी अन्य इंटरैक्टिव बनाने की आवश्यकता है। में क्या करूंगा? मुझे jQuery लेना चाहिए - दोस्तों समझ में नहीं आता, शुद्ध जेएस पर सब कुछ लिखना भी il faut नहीं है। इसके अलावा, मैं पहले से ही प्रतिक्रिया, कोणीय और दृश्य जानता हूं, मुझे पता है कि डेटा-संचालित दृष्टिकोण क्या है। HTML में भेजने से पहले अब मैं डेटा कैसे स्टोर करूं?

यहाँ अल्पाइन.जेएस बचाव के लिए आता है। आप निश्चित रूप से, Vue या React को पेंच कर सकते हैं। लेकिन जेएसएक्स के बिना रिएक्ट उनके सही दिमाग में कोई भी नहीं लिखेगा, और सीडीएन के माध्यम से माइन किए गए वीयू का वजन 34 केबी (अल्पाइन के लिए 8.1 केबी) होता है। तो यह पता चला है कि चुनाव अल्पाइन पर पड़ता है।

हाल ही में यहाँ हैबे पर पहले से ही अल्पाइन.जे के बारे में परिचित लेख थे । इस तथ्य के अलावा कि साइट ने हर जगह टेम्प्लेट टैग के संदर्भ काट दिए, लेख काफी अच्छे निकले।

अपने आप को नहीं दोहराने के लिए, मैं प्रलेखन को फिर से नहीं लिखूंगा , क्योंकि यह बहुत छोटा है (पूरा ढांचा 13 निर्देश और 6 जादू गुण हैं) और जल्द ही रूसी में उपलब्ध होगा (लेखन के समय, अनुवाद निर्माता के अनुमोदन के तहत है, लेकिन यह पहले से ही है मेरे कांटे में पढ़ा जा सकता है )।

यदि आप रुचि रखते हैं और / या Vue से परिचित नहीं हैं, तो मैं इसकी अत्यधिक अनुशंसा करता हूं। उन लोगों के लिए जो Vue से परिचित हैं, प्रमुख अंतरों का एक संक्षिप्त विवरण:

इसके बजाय, हम v-उपयोग करते हैं x-, अर्थात्। नहीं v-model, लेकिन x-model; नहीं v-bind, लेकिन x-bindक्यों? यह आपका होमवर्क है :)
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. , , .

पीएस इंग्लिश बोलने वालों के लिए मैं भी एल्पाइन.जेएस के निर्माता से "लगभग पूरी तरह से मुक्त" स्क्रैंकेस्ट को सलाह देना चाहता हूं। वह इतना अच्छा है कि एक लिंक भी साझा करने के लिए एक दया है। तो ठीक है । इसमें, लेखक इस बारे में बात करता है कि अल्पाइन के रूप में ऐसा ढांचा कैसे बनाया जाए, और यह बिल्कुल भी उतना मुश्किल नहीं है जितना यह लग सकता है।

अल्पाइन। एक ठोस उदाहरण पर

More articles: