De nombreux développeurs aiment tellement la syntaxe concise et la puissance des directives Vue.js qu'ils essaient même d'utiliser ce cadre non seulement dans les applications d'une seule page. Il est difficile d'abandonner l'utilisation de la réactivité, uniquement parce qu'il est soudainement devenu nécessaire d'écrire un petit projet. Ne revenez pas au bon vieux jQuery ou au pur JS?!

Je dois dire que dans Vue.js (et dans de nombreux autres frameworks) une telle option pour son utilisation est fournie. Mais cela semble encore trop lourd pour une opération aussi simple, et la fonctionnalité est redondante. Et ici Alpine.js vient à la rescousse .

Notons quelques fonctionnalités de ce framework:

1. Il pèse très peu! 7,2 Ko sous forme compressée.
2. Syntaxe familière et simple basée sur des directives.
3. N'utilise pas de DOM virtuel
4. Les connexions sont possibles à la fois via CDN (comme prévu par les auteurs, cela devrait être l'utilisation principale) et via npm.

Prenons l'exemple le plus simple d'utilisation de ce cadre:

Exemple de base

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

Voir tout le code article sur playcode.io

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

x-data="{}"

, , , .

Nous sommes maintenant libres d'utiliser la variable réactive msg à notre guise. Par exemple, nous associons la valeur d'une variable à un texte <input /> en utilisant la directive x-model. Les développeurs expérimentés y ont déjà reconnu le modèle en V double de Vue.js. Une analogie très utile, car l'utilisation des deux est absolument identique! En suspendant la directive avec la variable msg, nous obtenons automatiquement la chaîne 'Hello, Habr!' dans le champ de saisie. Maintenant, nous pouvons changer sa valeur et voir le résultat sur la ligne suivante.

Ici, nous sommes obligés de décevoir beaucoup de ceux qui sont habitués à la syntaxe Vue.js et au simple transfert de valeurs de variables vers des balises à l'aide d'accolades, par exemple,

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

devra passer en utilisant l'attribut spécial x-text. L'attribut x-html est fourni pour le transfert d'un bloc de balisage entier.

Inscription à l'événement

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

Nous espérons que vous l'avez apprécié.

Projets réussis et à bientôt!

Eh bien, pour commencer, une liste de goodies que les créateurs d'Alpine promettent d'ajouter dans la prochaine version:

• Directives personnalisées
• Composants
• Prise en charge des attributs de style
• Et beaucoup plus...