许多开发人员非常喜欢Vue.js指令的简洁语法和强大功能，以至于他们甚至尝试不仅在单页应用程序中使用此框架。放弃使用反应性是困难的，仅因为突然有必要编写一个小型项目。不要返回旧的jQuery或纯JS吗？！
我必须说，在Vue.js（和许多其他框架）中，提供了这样一个使用选项。但是对于这种简单的操作而言似乎仍然太麻烦了，并且该功能是多余的。Alpine.js来了。
让我们注意一下该框架的一些功能：
- 他体重很小！压缩形式的7.2kB。
- 熟悉和简单的基于指令的语法。
- 不使用虚拟DOM
- 通过CDN（按作者的意图，这应该是主要用途）和通过npm都可以建立连接。
考虑使用此框架的最简单的示例：
基本例子
<div x-data="{ msg: 'Hello, Habr!' }">
<input type="text" x-model="msg" />
<p x-text="msg"></p>
</div>
在playcode.io上查看所有文章代码
, , x-data. , JSON- . . Dom-, .
x-data="{}"
, , , .
现在，我们可以随意使用msg反应变量。例如，我们使用x-model指令将变量的值与文本<input />关联。经验丰富的开发人员已经在其中认识到Vue.js的孪生v模型。一个非常有用的类比，因为使用它们是绝对相同的！通过将指令与msg变量一起挂起，我们自动获得字符串“ Hello，Habr！”。在输入字段中。现在我们可以更改其值，并在下一行中看到结果。
这里我们被迫让许多习惯于Vue.js语法和使用花括号将变量值简单地传递到标签的人失望，例如，
<p>{{ msg }}</p>
在Alpine.js中，此代码将不起作用。标签文字将必须使用特殊的x-text属性传递。提供了x-html属性，用于传输整个标记块。
活动订阅
示例代码： <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.
希望您喜欢。
成功的项目，很快见！
好吧，对于初学者来说，Alpine的创建者承诺会在下一个版本中添加的好东西列表：