يحب العديد من المطورين بناء الجملة الموجزة وقوة توجيهات Vue.js لدرجة أنهم يحاولون حتى استخدام هذا الإطار ليس فقط في تطبيقات الصفحة الواحدة. من الصعب التخلي عن استخدام التفاعل ، فقط لأنه أصبح من الضروري فجأة كتابة مشروع صغير. لا ترجعوا إلى المسجد القديم أو شبيبة نقية ؟!

يجب أن أقول أنه في Vue.js (وفي العديد من الأطر الأخرى) يتم توفير هذا الخيار لاستخدامه. ولكن لا يزال يبدو مرهقًا للغاية لمثل هذه العملية البسيطة ، والوظيفة زائدة عن الحاجة. وهنا يأتي Alpine.js للإنقاذ .

دعنا نلاحظ بعض ميزات هذا الإطار:

1. يزن القليل جدا! 7.2 كيلو بايت في شكل مضغوط.
2. بناء جملة توجيهي مألوف وبسيط.
3. لا يستخدم DOM الافتراضي
4. التوصيلات ممكنة من خلال CDN (كما هو مقصود من قبل المؤلفين ، يجب أن يكون هذا هو الاستخدام الرئيسي) ومن خلال npm.

فكر في أبسط مثال لاستخدام هذا الإطار:

مثال أساسي

    <div x-data="{ msg: 'Hello, Habr!' }">
        <input type="text" x-model="msg" />
        <p x-text="msg"></p>
    </div>

عرض جميع كود المادة على playcode.io

, , x-data. , JSON- . . Dom-, .

x-data="{}"

, , , .

الآن نحن أحرار في استخدام المتغير التفاعلي msg كما يحلو لنا. على سبيل المثال ، نقوم بربط قيمة متغير مع نص <إدخال /> باستخدام توجيه x-model. لقد أدرك المطورون ذوو الخبرة بالفعل فيه النموذج v المزدوج من Vue.js. تشبيه مفيد للغاية ، لأن استخدام كلاهما متطابق تمامًا! من خلال تعليق التوجيه باستخدام متغير msg ، نحصل تلقائيًا على السلسلة "Hello، Habr!" في مجال الإدخال. الآن يمكننا تغيير قيمته ، ونرى النتيجة في السطر التالي.

نحن هنا مضطرون لإحباط الكثير من الأشخاص الذين اعتادوا على بناء جملة Vue.js ونقل القيم المتغيرة البسيطة إلى العلامات باستخدام الأقواس المتعرجة ، على سبيل المثال ،

<p>{{ msg }}</p>

يجب أن تمر باستخدام سمة النص الخاص. يتم توفير سمة x-html لنقل كتلة ترميز كاملة.

اشتراك الحدث

    <div x-data="{ counter: 1 }">
      <h1 x-text="counter"></h1>
      <button x-on:click="counter++">+1</button>
    </div>

x-on. Alpine.js , js-, . , , x-on — @. :

<button @click="counter++">+1</button>

x-if:

    <div x-data="{ show: false }">
      <button
        x-on:click="show = ! show"
        x-text="show ? '' : ''"
      ></button>
      <template x-if="show">
        <p> !</p>
      </template>
    </div>

x-if, Vue.js. Boolean . . .

<div x-data="{ items: ['habr', 'hubr', 'hobr'] }">
   <ol>
     <template x-for="item in items" x-bind:key="item">
       <li>
         <p x-text="item"></p>
       </li>
     </template>
  </ol>
</div>

x-for , . , , item. , , item , Alpine . ( ) key. key x-bind. x-for x-if , .

. github.

Alpine.js.

نأمل أن تكون قد استمتعت به.

مشاريع ناجحة ونراكم قريبا!

حسنًا ، بالنسبة للمبتدئين ، قائمة بالأشياء الجيدة التي يعد منشئو Alpine بإضافتها في الإصدار التالي:

• توجيهات مخصصة
• مكونات
• دعم سمة النمط
• وأكثر بكثير...