Muitos desenvolvedores adoram a sintaxe concisa e o poder das diretivas Vue.js. tanto que tentam usar essa estrutura não apenas em aplicativos de página única. É difícil abandonar o uso da reatividade, apenas porque de repente se tornou necessário escrever um pequeno projeto. Não retorne ao jQuery antigo ou ao JS puro ?!

Devo dizer que no Vue.js (e em muitos outros frameworks) é fornecida uma opção para seu uso. Mas ainda parece muito complicado para uma operação tão simples, e a funcionalidade é redundante. E aqui o Alpine.js vem em socorro .

Vamos observar alguns recursos dessa estrutura:

1. Ele pesa muito pouco! 7,2kB na forma compactada.
2. Sintaxe familiar e simples baseada em diretivas.
3. Não usa DOM virtual
4. As conexões são possíveis através da CDN (conforme planejado pelos autores, esse deve ser o uso principal) e através do npm.

Considere o exemplo mais simples de uso dessa estrutura:

Exemplo básico

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

Veja todo o código do artigo em playcode.io

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

x-data="{}"

, , , .

Agora estamos livres para usar a variável reativa msg como quisermos. Por exemplo, associamos o valor de uma variável a um texto <input /> usando a diretiva x-model. Desenvolvedores experientes já reconheceram nele o modelo v duplo do Vue.js. Uma analogia muito útil, já que o uso dos dois é absolutamente idêntico! Ao suspender a diretiva com a variável msg, obtemos automaticamente a string 'Olá, Habr!' no campo de entrada. Agora podemos mudar seu valor e ver o resultado na próxima linha.

Aqui somos forçados a decepcionar muitos que estão acostumados à sintaxe Vue.js. e a simples transferência de valores variáveis ​​para tags usando chaves, por exemplo,

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

terá que passar usando o atributo especial x-text. O atributo x-html é fornecido para a transferência de um bloco de marcação inteiro.

Assinatura de evento

    <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.

Nós esperamos que você tenha apreciado.

Projetos de sucesso e até breve!

Bem, para iniciantes, uma lista de brindes que os criadores da Alpine prometem adicionar na próxima versão:

• Diretivas personalizadas
• Componentes
• Suporte a atributos de estilo
• E muito mais...