Viele Entwickler lieben die prägnante Syntax und Leistungsfähigkeit der Anweisungen von Vue.j so sehr, dass sie sogar versuchen, dieses Framework nicht nur in Anwendungen mit nur einer Seite zu verwenden. Es ist schwierig, auf die Verwendung von Reaktivität zu verzichten, nur weil es plötzlich notwendig wurde, ein kleines Projekt zu schreiben. Kehren Sie nicht zum guten alten jQuery oder reinen JS zurück ?!

Ich muss sagen, dass in Vue.js (und in vielen anderen Frameworks) eine solche Option für seine Verwendung bereitgestellt wird. Trotzdem scheint es für eine so einfache Operation zu umständlich zu sein, und die Funktionalität ist redundant. Und hier kommt Alpine.js zur Rettung .

Beachten Sie einige Funktionen dieses Frameworks:

1. Er wiegt sehr wenig! 7,2 kB in komprimierter Form.
2. Vertraute und einfache richtlinienbasierte Syntax.
3. Verwendet kein virtuelles DOM
4. Verbindungen sind sowohl über CDN (wie von den Autoren beabsichtigt, dies sollte die Hauptverwendung sein) als auch über npm möglich.

Betrachten Sie das einfachste Beispiel für die Verwendung dieses Frameworks:

Grundlegendes Beispiel

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

Zeigen Sie den gesamten Artikelcode auf playcode.io an

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

x-data="{}"

, , , .

Jetzt können wir die reaktive Variable msg nach Belieben verwenden. Zum Beispiel verknüpfen wir den Wert einer Variablen mit einem Text <input /> unter Verwendung der x-model-Direktive. Erfahrene Entwickler haben darin bereits das Twin-V-Modell von Vue.js erkannt. Eine sehr nützliche Analogie, da beide absolut identisch sind! Durch Aufhängen der Direktive mit der Variablen msg erhalten wir automatisch die Zeichenfolge 'Hallo, Habr!' im Eingabefeld. Jetzt können wir seinen Wert ändern und das Ergebnis in der nächsten Zeile sehen.

Hier sind wir gezwungen, viele zu enttäuschen, die an die Vue.js-Syntax und die einfache Übertragung von Variablenwerten auf Tags mit geschweiften Klammern gewöhnt sind, z.

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

muss mit dem speziellen x-text-Attribut übergeben werden. Das x-html-Attribut wird für die Übertragung eines gesamten Markup-Blocks bereitgestellt.

Event-Abonnement

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

Wir hoffen es hat euch gefallen.

Erfolgreiche Projekte und bis bald!

Nun, für den Anfang eine Liste von Leckereien, die die Macher von Alpine versprechen, in der nächsten Version hinzuzufügen:

• Benutzerdefinierte Anweisungen
• Komponenten
• Unterstützung für Stilattribute
• Und vieles mehr...