Many developers love the concise syntax and power of Vue.js directives so much that they even try to use this framework not only in single-page applications. It is difficult to abandon the use of reactivity, only because it suddenly became necessary to write a small project. Do not return to the good old jQuery or pure JS ?!

I must say that in Vue.js (and in many other frameworks) such an option for its use is provided. But still it seems too cumbersome for such a simple operation, and the functionality is redundant. And here Alpine.js comes to the rescue .

Let's note some features of this framework:

1. He weighs very little! 7.2kB in compressed form.
2. Familiar and simple directive based syntax.
3. Doesn't use virtual DOM
4. Connections are possible both through CDN (as intended by the authors, this should be the main use) and through npm.

Consider the simplest example of using this framework:

Basic example

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

View all article code on playcode.io

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

x-data="{}"

, , , .

Now we are free to use the msg reactive variable as we please. For example, we associate the value of a variable with a text <input /> using the x-model directive. Experienced developers have already recognized in it the twin v-model from Vue.js. A very useful analogy, since using both of them is absolutely identical! By hanging the directive with the msg variable, we automatically get the string 'Hello, Habr!' in the input field. Now we can change its value, and see the result in the next line.

Here we are forced to disappoint many who are accustomed to the Vue.js syntax and the simple transfer of variable values ​​to tags using curly braces, for example,

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

will have to pass using the special x-text attribute. The x-html attribute is provided for the transfer of an entire markup block.

Event Subscription

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

We hope you enjoyed it.

Successful projects and see you soon!

Well, for starters, a list of goodies that the creators of Alpine promise to add in the next version:

• Custom directives
• Components
• Style attribute support
• And much more...