Este é o segundo artigo sobre a promissora estrutura Alpine.js .
O primeiro pode ser lido aqui:
Alpine.js - uma estrutura leve com sintaxe conveniente

Continuamos familiarizando a comunidade com esta ferramenta maravilhosa.
O código completo da lição está aqui .

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

No exemplo acima, analisaremos duas novas diretivas ao mesmo tempo. O X-show, embora similar em uso ao x-if, não deve ser confundido. O X-show não altera a árvore da página, mas controla apenas a propriedade de exibição do elemento. Ou seja, o item será renderizado, mas não mostrado.

X-cloak é uma diretiva que é excluída imediatamente após o início do script. Parece, que bom é isso? Considere a aplicação prática. Quando executamos o código acima, por um momento, vemos um elemento com o texto "Olá!", Apesar do valor falso na diretiva x-show. Aqui x-cloak vem em nosso auxílio, você só precisa escrever para ele o seguinte estilo:

[x-cloak] { 
  display: none;
}

Agora o elemento ficará oculto até o script iniciar.

O surgimento e o desaparecimento repentinos de um elemento não são muito óbvios; portanto, o modificador de transição é usado para animar esses eventos.

X-SHOW.TRANSITION

Melhoraremos o código anterior com a ajuda de modificadores:

<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

Esta diretiva fornece acesso ao elemento desejado em qualquer parte da página, inclusive fora do componente. Todos os links ficam disponíveis através do campo global $ refs. Vamos demonstrar esse recurso usando um exemplo:

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

O texto inserido na entrada com o atributo x-ref = "myInput" estará disponível em $ refs.myInput.value

Isso conclui a lição de hoje. Todos os exemplos da lição estão aqui .
Todos os projetos de sucesso e até breve!