This is the second article about the promising Alpine.js framework .
The first one can be read here:
Alpine.js - a lightweight framework with convenient syntax

We continue to familiarize the community with this wonderful tool.
The full lesson code is here .

X-SHOW and 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>

In the example above, we will analyze two new directives at once. X-show, although similar in use to x-if, should not be confused. X-show does not change the page tree, but only controls the display property of the element. That is, the item will be rendered, but not shown.

X-cloak is a directive that is deleted immediately after the initiation of the script. It would seem, what good is it? Consider the practical application. When we run the code above, for a moment we see an element with the text “Hello!”, Despite the false value in the x-show directive. Here x-cloak comes to our aid, you just need to write him the following style:

[x-cloak] { 
  display: none;
}

Now the element will be hidden until the script starts.

The sudden appearance and disappearance of an element is not very obvious, therefore .transition modifier is used to animate these events.

X-SHOW.TRANSITION

We will improve the previous code with the help of modifiers:

<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

This directive provides access to the desired element in any part of the page, including outside the component. All links become available through the global $ refs field. Let's demonstrate this feature using an example:

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

Text entered in input with the x-ref = "myInput" attribute will be available in $ refs.myInput.value

This concludes our today's lesson. All examples of the lesson are here .
All successful projects and see you soon!