Muchos desarrolladores adoran tanto la sintaxis lacónica y el poder de las directivas de Vue.js que incluso intentan usar este marco no solo en aplicaciones de una sola página. Es difícil abandonar el uso de la reactividad, solo porque de repente se hizo necesario escribir un pequeño proyecto. ¡No vuelvas al buen viejo jQuery o al JS puro!

Debo decir que en Vue.js (y en muchos otros marcos) se proporciona una opción para su uso. Pero aún parece demasiado engorroso para una operación tan simple, y la funcionalidad es redundante. Y aquí Alpine.js viene al rescate .

Tengamos en cuenta algunas características de este marco:

1. ¡Pesa muy poco! 7.2kB en forma comprimida.
2. Sintaxis familiar y simple basada en directivas.
3. No usa DOM virtual
4. Las conexiones son posibles tanto a través de CDN (según lo previsto por los autores, este debería ser el uso principal) como a través de npm.

Considere el ejemplo más simple de usar este marco:

Ejemplo básico

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

Ver todo el código del artículo en playcode.io

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

x-data="{}"

, , , .

Ahora somos libres de usar la variable reactiva msg como queramos. Por ejemplo, asociamos el valor de una variable con un texto <input /> usando la directiva x-model. Los desarrolladores experimentados ya han reconocido en él el modelo v gemelo de Vue.js. ¡Una analogía muy útil, ya que usar ambos es absolutamente idéntico! Al colgar la directiva con la variable msg, obtenemos automáticamente la cadena '¡Hola, Habr!' en el campo de entrada. Ahora podemos cambiar su valor y ver el resultado en la siguiente línea.

Aquí nos vemos obligados a decepcionar a muchos que están acostumbrados a la sintaxis de Vue.js y a la simple transferencia de valores variables a etiquetas que utilizan llaves, por ejemplo,

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

tendrá que pasar usando el atributo especial x-text. El atributo x-html se proporciona para la transferencia de un bloque de marcado completo.

Suscripción al 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.

Esperamos que lo hayas disfrutado.

¡Proyectos exitosos y hasta pronto!

Bueno, para empezar, una lista de golosinas que los creadores de Alpine prometen agregar en la próxima versión:

• Directivas personalizadas
• Componentes
• Soporte de atributos de estilo
• Y mucho más...