# Alpine.js
[](https://alpinejs.codewithhugo.com/chat/)
Alpine.js bietet dir die gewohnte Reaktivität und deklarative Natur von Vue und React, verzichtet jedoch auf den gegebenen Ballast, der bei solchen Frameworks anfallen kann.
Du erweiterst dein DOM nur dort um zusätzliche Funktionalität, wo du es für richtig hältst.
Unsere Philosophie erinnert dich vielleicht an [Tailwind](https://tailwindcss.com/), nur eben für Javascript.
> Hinweis: Alpines Syntax baut fast gänzlich auf der Syntax von [Vue](https://vuejs.org/) auf (zum Teil auch von [Angular](https://angularjs.org/)). Ich bin für immer dankbar für den Mehrwert, den diese Frameworks der Entwicklung des Webs gebracht haben.
## Übersetzungen der Dokumentation
| Language | Link for documentation |
| --- | --- |
| Chinese Traditional | [**繁體中文說明文件**](./README.zh-TW.md) |
| German | [**Dokumentation in Deutsch**](./README.de.md) |
| Indonesian | [**Dokumentasi Bahasa Indonesia**](./README.id.md) |
| Japanese | [**日本語ドキュメント**](./README.ja.md) |
| Portuguese | [**Documentação em Português**](./README.pt.md) |
| Russian | [**Документация на русском**](./README.ru.md) |
| Spanish | [**Documentación en Español**](./README.es.md) |
## Installation
**Von einem CDN:** Erweitere deinen HTML-Kopf (``) um folgendes Skript.
```html
```
Das wars. Die Initialisierung passiert automatisch.
Für die Produktionsumgebung wird empfohlen, den Link mit einer spezifischen Versionsnummer zu versehen. Somit kann präventiv sichergestellt werden, dass keine unerwarteten Fehler durch Versionsaktualisierungen zustande kommen.
Als Beispiel wird hier die (letzte) Version `2.8.2` spezifiziert:
```html
```
**Über npm:** Installiere das Paket über npm.
```js
npm i alpinejs
```
Inkludiere es in deinem Skript.
```js
import 'alpinejs'
```
**Für IE11 Support** Nutze stattdessen die folgenden Skripts.
```html
```
Da obige Schema wird als [module/nomodule pattern](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) bezeichnet. Dadurch wird bezweckt, dass in modernen Browsern automatisch das "modern"-Bundle geladen wird, und das IE11-spezifische Bundle automatisch in IE11 und anderen "legacy"-Browsern geladen wird.
## Use
*Dropdown/Modal*
```html
Dropdown Inhalt
```
*Tabs*
```html
Tab Foo
Tab Bar
```
Du kannst es sogar für nicht-triviale Dinge verwenden:
*Pre-fetching a dropdown's HTML content on hover*
```html
Lade Spinner...
```
## Lerne
Es stehen 14 Direktiven zur Verfügung:
| Direktive | Beschreibung |
| --- | --- |
| [`x-data`](#x-data) | Deklariert einen neuen Komponenten-Geltungsbereich. |
| [`x-init`](#x-init) | Wertet einen Ausdruck aus, sobald die Komponente initialisiert wurde. |
| [`x-show`](#x-show) | Schaltet anhand des Ausdrucks (true oder false) das Element auf `display: none;`. |
| [`x-bind`](#x-bind) | Setzt den Wert eines Attributs auf das Ergebnis eines JS-Ausdrucks. |
| [`x-on`](#x-on) | Verbindet einen EventHandler mit einem HTML-Elemment. Der spezifizierte JS-Code wird nur dann aufgerufen, wenn das jeweilige Ereignis empfangen wird. |
| [`x-model`](#x-model) | Das Direktive sorgt für das Databinding mit Input-Elementen. Hierbei wird ein Databinding in beide Richtungen ermöglicht ("Two way databinding"). |
| [`x-text`](#x-text) | Funktioniert ähnlich wie `x-bind`, wobei hier das `innerText` eines Elements aktualisiert wird. |
| [`x-html`](#x-html) | Funktioniert ähnlich wie `x-bind`, wobei hier das `innerHTML` eines Elements aktualisiert wird. |
| [`x-ref`](#x-ref) | Ermöglicht es, die Elemente einer Komponente im DOM zu referenzieren. |
| [`x-if`](#x-if) | Entfernt ein Element aus dem DOM. Kann nur in Kombination mit ``-Tags benutzt werden. |
| [`x-for`](#x-for) | Erstellt einen neuen DOM-Knoten (node) für jedes Element in einem Array. Kann nur in Kombination mit ``-Tags benutzt werden. |
| [`x-transition`](#x-transition) | Ein Direktive zur Anwedung von Klassen auf unterschiedliche Phasen der Transition eines Elements. |
| [`x-spread`](#x-spread) | Ermöglicht die Bindung von einem Objekt aus Alpine Direktiven an ein Element. Dies erlaubt eine bessere Wiederverwendbarkeit von Direktiven. |
| [`x-cloak`](#x-cloak) | Dieses Attribut wird entfernt, sobald Alpine initalisiert wird. Das Direktive wird genutzt, um das pre-initalisierte DOM auszublenden. |
Und 6 magische Eigenschaften (englisch *magic properties*):
| Magische Eigenschaft | Beschreibung |
| --- | --- |
| [`$el`](#el) | Liefert den DOM-Knoten der Stammkomponente. |
| [`$refs`](#refs) | Liefert jene Elemente des DOM innerhalb der Komponente, welche mit `x-ref` markiert sind. |
| [`$event`](#event) | Liefert das native "Event"-Objekt innerhalb eines EventHandlers. |
| [`$dispatch`](#dispatch) | Erstellt ein `CustomEvent`, welches intern via `.dispatchEvent()` versendet werden kann. |
| [`$nextTick`](#nexttick) | Führt den gegebenen Ausdruck aus, NACHDEM Alpine die reaktiven DOM-Aktualisierungen durchgeführt hat. |
| [`$watch`](#watch) | Wenn sich der Wert einer beobachteten (englisch *watched*) Eigenschaft einer Komponente ändert, wird die angegebene Callback-Funktion aufgerufen. |
## Sponsoren
**Du möchtest Sponsor werden? [Schreib mir auf Twitter](https://twitter.com/calebporzio)**
## Gemeinschaftsprojekte
* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
* [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
### Direktiven
---
### `x-data`
**Beispiel:** `
...
`
**Struktur:** `
...
`
`x-data` deklariert einen neuen Komponenten-Geltungsbereich. Jede neu erstellte Komponente wird nun mit der angegebenen Datenquelle initialisiert.
Dies verhält sich ähnlich wie die `data`-Eigenschaft einer Vue-Komponente.
**Extrahieren von Komponenten-Logik**
Datenquellen und zugehörige Funktionalität können in wiederverwendbare Funktionen extrahiert werden.
```html
// Dropdown
```
> **Für Nutzer von Modul-Packern**: Alpine.js ruft Funktionen auf, welche sich im globalen Geltungsbereich (`window`) befinden. Um Funktionen mit `x-data` zu benutzen, müssen sie daher explizit dem Geltungsbereich `window` zugewießen werden. Zum Beispiel `window.dropdown = function () {}` (Dieses Verhalten ist auf Webpack, Rollup, Parcel etc. zurückzuführen. Hier leben selbstdefinierte Funktionen defaultmäßig im Geltungsbereich des Moduls, und nicht `window`).
Durch Objektdestrukturierung können mehrere Datenobjekte an `x-data` übergeben werden:
```html
```
---
### `x-init`
**Beispiel:** ``
**Struktur:** ``
`x-init` Wertet einen Ausdruck aus, sobald die Komponente initialisiert wurde.
Wenn der Code erst aufgerufen werden soll, NACHDEM Alpine die initialen Aktualisierungen des DOM vorgenommen hat (ähnlich zum `mounted()` Lebenszyklus in VueJS), kann eine Callback-Funktion von `x-init` retourniert werden:
`x-init="() => { // Im Funktionsblock haben wir Zugriff auf den Zustand nach der DOM-Initialisierung // }"`
---
### `x-show`
**Beispiel:** ``
**Struktur:** ``
`x-show` schaltet die Eigenschaft `display: none;` des Elements, je nachdem ob der Ausdruck `true` oder `false` zurückliefert.
**x-show.transition**
`x-show.transition` ist eine convenience API, um Übergänge mit `x-show` durch CSS Transitionen ansprechender zu gestalten.
```html
Die Inhalte werden mithilfe von Transitionen ein- und ausgeblendet.
```
| Direktive | Beschreibung |
| --- | --- |
| `x-show.transition` | Ein simultaner Fading- und Skalierungseffekt. (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms)
| `x-show.transition.in` | Die Transition gilt nur für den anfänglichen Übergang. |
| `x-show.transition.out` | Die Transition gilt nur für den abschließenden Übergang. |
| `x-show.transition.opacity` | Nur das Fading wird genutzt. |
| `x-show.transition.scale` | Nur die Skalierung wird genutzt. |
| `x-show.transition.scale.75` | Zur Anpassung des Skalierungswerts `transform: scale(.75)`. |
| `x-show.transition.duration.200ms` | Setzt den Wert der anfänglichen Transition auf 200ms. Der Wert der abschließenden Transition nimmt die Hälfte des angegebenen Werts an (in diesem Fall 100ms). |
| `x-show.transition.origin.top.right` | Zur Anpassung des Ursprungs der CSS-Transformation `transform-origin: top right`. |
| `x-show.transition.in.duration.200ms.out.duration.50ms` | Zur Spezifizierung der einzelnen Dauern einer Transition. |
> Hinweis: Alle oben genannten Modifikatoren können miteinander kombiniert werden. Auch solche Spielerein sind möglich (lol): `x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95`
> Hinweis: Defaultmäßig wartet `x-show`, bis jede untergeordnete Komponente seine Transition beendet hat. Um dieses Verhalten zu umgehen, kann der Modifikator `.immediate` eingesetzt werden:
```html
```
---
### `x-bind`
> Hinweis: Es kann auch folgende Kurzschreibweise genutzt werden: `:type="..."`
**Beispiel:** ``
**Struktur:** ``
`x-bind` setzt den Wert eines Attributs auf das Ergebnis eines JavaScript Ausdrucks. Dabei hat der Ausdruck Zugang zu allen Datenquellen der Komponente und wird jedes Mal aktualisiert, wenn sich eine der Datenquellen ändert.
> Hinweis: Attributbindungen aktualisieren sich nur dann, WENN sich deren Abhängigkeiten aktualisieren. Das Framework erkennt solche Abhängigkeiten automatisch und führt dementsprechend Aktualisierungen durch.
**`x-bind` für Klassenattribute**
`x-bind` hat eine spezielle Verhaltensweise, wenn es mit dem Attribut `class` verknüpft wird.
Hierbei wird ein Objekt übergeben, dessen Namen die potenziellen Klassenselektoren sind. Die Werte dieser Paare sind boolesche Ausdrücke, durch welche determiniert wird, ob die Klasse auf das Element angewendet wird oder nicht.
Zum Beispiel:
``
In diesem Beispiel wird die Klasse "hidden" nur dann angewendet, wenn `foo` den Wert `true` liefert.
**`x-bind` für boolesche Attribute**
`x-bind` unterstützt sowohl Variablen als auch JavaScript Ausdrücke in seiner Bedingung, wenn diese einen booleschen Wert (`true` oder `false`) zurückliefern.
Zum Beispiel:
```html
```
Hier wird das Attribut `disabled` je nach der Auswertung von `myVar` hinzugefügt oder entfernt.
Alle in der [HTML Spezifikation](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute) angeführten booleschen Attribute werden unterstützt. Dazu zählen `disabled`, `readonly`, `required`, `checked`, `hidden`, `selected`, `open`, etc.
**`.camel` Modifikator**
**Beispiel:** `
**Du möchtest Sponsor werden? [Schreib mir auf Twitter](https://twitter.com/calebporzio)**
## Gemeinschaftsprojekte
* [AlpineJS Weekly Newsletter](https://alpinejs.codewithhugo.com/newsletter/)
* [Spruce (State Management)](https://github.com/ryangjchandler/spruce)
* [Turbolinks Adapter](https://github.com/SimoTod/alpine-turbolinks-adapter)
* [Alpine Magic Helpers](https://github.com/KevinBatdorf/alpine-magic-helpers)
* [Awesome Alpine](https://github.com/ryangjchandler/awesome-alpine)
### Direktiven
---
### `x-data`
**Beispiel:** `