هذه هي المقالة الثانية حول إطار Alpine.js الواعد .
يمكن قراءة أولها هنا:
Alpine.js - إطار خفيف الوزن مع بناء جملة مناسب

نواصل تعريف المجتمع بهذه الأداة الرائعة.
رمز الدرس الكامل هنا .

X-SHOW و X-CLOAK

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

في المثال أعلاه ، سنقوم بتحليل توجيهين جديدين في وقت واحد. لا ينبغي الخلط بين X-show ، على الرغم من أنه مشابه في استخدام x-if. لا يغير X-show شجرة الصفحة ، ولكنه يتحكم فقط في خاصية عرض العنصر. أي ، سيتم تقديم العنصر ، ولكن لا يظهر.

X-cloak هو توجيه يتم حذفه مباشرة بعد بدء البرنامج النصي. يبدو ، ما هو الخير؟ خذ بعين الاعتبار التطبيق العملي. عندما نقوم بتشغيل الكود أعلاه ، نرى للحظة عنصرًا يحتوي على النص "Hello!" ، على الرغم من القيمة الزائفة في توجيه x-show. هنا يأتي x-cloak لمساعدتنا ، ما عليك سوى كتابته بالأسلوب التالي:

[x-cloak] { 
  display: none;
}

الآن سيتم إخفاء العنصر حتى يبدأ البرنامج النصي.

المظهر المفاجئ واختفاء عنصر ليسا واضحين للغاية ، لذلك يتم استخدام معدّل الانتقال لتحريك هذه الأحداث.

X-SHOW.TRANSITION

سنقوم بتحسين الكود السابق بمساعدة المعدلات:

<div x-data="{ show: false }">
  <button x-on:click="show= ! show" x-text="show ? '': '' ">
  </button>
  <p x-show="show"> NO TRANSITION</p>
  <p x-show.transition="show">TRANSITION</p>
  <p x-show.transition.in.duration.1000ms="show">TRANSITION IN</p>
  <p x-show.transition.out.duration.1000ms="show">TRANSITION OUT</p>
  <p x-show.transition.scale.05.duration.1000ms="show">TRANSITION Scale</p>
  <p x-show.transition.opacity.in.duration.1000ms="show">TRANSITION Opacity</p>
  <p x-show.transition.in.duration.1000ms.out.duration.500ms="show">TRANSITION IN Duration</p>
</div>

1 .in.duration.1000ms

transition ( ) opacity scale ( scale: 0.95), cubic-bezier(0.4, 0.0, 0.2, 1), 150 75 . , .

:

• .in ;
• .out — ;
• .scale — ;
• .opacity — ;
• .duration .

x-if x-transition. x-show. . .

X-INIT

X-init — , , . created Vue.js. x-data. :

<div
  x-data="{ posts: [] }"
  x-init="
    fetch('https://jsonplaceholder.typicode.com/albums/1/photos')
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        posts = data
      });
    "
>
  <template x-for="post in posts" :key="post.id">
    <div class="post">
      <h1 x-text="post.title"></h1>
      <img :src="post.thumbnailUrl" :alt="post.title" />
    </div>
  </template>
  <hr/>
</div>

x-data posts, . x-init fetch json- . x-for «» .

X-REF $REFS

يوفر هذا التوجيه الوصول إلى العنصر المطلوب في أي جزء من الصفحة ، بما في ذلك خارج المكون. تصبح جميع الروابط متاحة من خلال حقل refs العالمي. دعونا نوضح هذه الميزة باستخدام مثال:

<div x-data="{ }">
  <input type="text" x-ref="myInput"/>
  <button x-on:click="alert($refs.myInput.value)">Alert</button>
<hr />
</div>

النص الذي تم إدخاله بإدخال السمة x-ref = "myInput" سيكون متاحًا في $ refs.myInput.value

بهذا نختتم درسنا اليوم. جميع أمثلة الدرس هنا .
جميع المشاريع الناجحة ونراكم قريبا!