# Alpine.js
[](https://alpinejs.codewithhugo.com/chat/)
Alpine.js menawarkan kepada Anda sifat reaktif dan deklaratif dari framework besar seperti Vue atau React dengan biaya yang jauh lebih rendah.
Anda bisa mempertahankan DOM Anda, dan taburkan dalam perilaku sesuai keinginan Anda.
Anggap saja seperti [Tailwind](https://tailwindcss.com/) untuk JavaScript.
> Catatan: Hampir seluruh sintaks dipinjam dari [Vue](https://vuejs.org/) (dan dengan ekstensi [Angular](https://angularjs.org/)). Saya selamanya berterima kasih atas hadiah mereka untuk web.
## Dokumentasi yang diterjemahkan
| Bahasa | Tautan untuk dokumentasi |
| --- | --- |
| Arabic | [**التوثيق باللغة العربية**](./README.ar.md) |
| Chinese Traditional | [**繁體中文說明文件**](./README.zh-TW.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) |
| Korean | [**한국어 문서**](./README.ko.md) |
## Instalasi
**Dari CDN:** Tambahkan skrip berikut ke akhir bagian `` Anda.
```html
```
Itu saja. Itu akan menginisialisasi dirinya sendiri.
Untuk lingkungan produksi, disarankan untuk memasang pin pada nomor versi tertentu di link untuk menghindari kerusakan yang tidak terduga dari versi yang lebih baru. Misalnya, untuk menggunakan versi `2.8.2` (terbaru):
```html
```
**Dari NPM:** Instal paket dari NPM.
```js
npm i alpinejs
```
Sertakan dalam skrip Anda.
```js
import 'alpinejs'
```
**Untuk dukungan IE11** Gunakan skrip berikut sebagai gantinya.
```html
```
Pola di atas adalah pola modul / nomodule yang akan membuat bundel modern dimuat secara otomatis di browser modern, dan bundel IE11 dimuat secara otomatis di IE11 dan browser lama lainnya.
## Penggunaan
*Dropdown/Modal*
```html
Dropdown Body
```
*Tabs*
```html
Tab Foo
Tab Bar
```
Anda bahkan dapat menggunakannya untuk hal-hal yang tidak sepele:
*Mengambil konten HTML dari dropdown terlebih dahulu saat mengarahkan kursor*.
```html
Loading Spinner...
```
## Belajar
Ada 14 perintah yang tersedia untuk Anda:
| Perintah | Deskripsi |
| --- | --- |
| [`x-data`](#x-data) | Mendeklarasikan cakupan komponen baru. |
| [`x-init`](#x-init) | Menjalankan ekspresi saat komponen diinisialisasi. |
| [`x-show`](#x-show) | Merubah properti `display: none;` pada elemen tergantung pada ekspresi (true atau false). |
| [`x-bind`](#x-bind) | Menetapkan nilai atribut ke hasil ekspresi JS |
| [`x-on`](#x-on) | Melampirkan event listener ke elemen. Menjalankan ekspresi JS saat dipancarkan. |
| [`x-model`](#x-model) | Menambahkan "two-way data binding (pengikatan data dua arah)" ke sebuah elemen. Menjaga elemen masukan tetap sinkron dengan data komponen. |
| [`x-text`](#x-text) | Bekerja mirip dengan `x-bind`, tetapi akan memperbarui `innerText` dari sebuah elemen. |
| [`x-html`](#x-html) | Bekerja mirip dengan `x-bind`, tetapi akan memperbarui `innerHTML` dari sebuah elemen. |
| [`x-ref`](#x-ref) | Cara mudah untuk mengambil elemen DOM mentah dari komponen Anda. |
| [`x-if`](#x-if) | Hapus elemen sepenuhnya dari DOM. Harus digunakan pada tag ``. |
| [`x-for`](#x-for) | Buat node DOM baru untuk setiap item dalam array. Harus digunakan pada tag ``. |
| [`x-transition`](#x-transition) | Arahan untuk menerapkan kelas ke berbagai tahapan transisi elemen. |
| [`x-spread`](#x-spread) | Memungkinkan Anda mengikat objek arahan Alpine ke elemen agar dapat digunakan kembali dengan lebih baik. |
| [`x-cloak`](#x-cloak) | Atribut ini dihapus saat Alpine menginisialisasi. Berguna untuk menyembunyikan DOM yang sudah diinisialisasi. |
dan 6 properti-properti ajaib:
| Properti Ajaib | Deskripsi |
| --- | --- |
| [`$el`](#el) | Ambil node DOM komponen akar. |
| [`$refs`](#refs) | Ambil elemen DOM yang ditandai dengan `x-ref` di dalam komponen. |
| [`$event`](#event) | Mengambil objek "Event" browser asli dalam event listener. |
| [`$dispatch`](#dispatch) | Buat `CustomEvent` dan kirim menggunakan `.dispatchEvent()` secara internal. |
| [`$nextTick`](#nexttick) | Jalankan ekspresi tertentu SETELAH Alpine membuat pembaruan DOM reaktifnya. |
| [`$watch`](#watch) | Akan mengaktifkan callback yang diberikan saat properti komponen yang Anda "awasi" berubah. |
## Sponsor
**Ingin logo Anda di sini? [DM di Twitter](https://twitter.com/calebporzio)**
## Proyek Komunitas
* [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)
### Perintah
---
### `x-data`
**Contoh:** `
...
`
**Struktur:** `
...
`
`x-data` mendeklarasikan cakupan komponen baru. Ini memberi tahu kerangka kerja untuk menginisialisasi komponen baru dengan objek data berikut.
Anggap saja seperti properti data dari komponen Vue.
**Ekstrak Logika Komponen**
Anda dapat mengekstrak data (dan perilaku) menjadi fungsi yang dapat digunakan kembali:
```html
// Dropdown
```
> **Untuk pengguna bundler**, perhatikan bahwa Alpine.js mengakses fungsi yang ada dalam cakupan global (`window`), Anda harus secara eksplisit menetapkan fungsi Anda ke `window` untuk menggunakannya dengan `x-data` misalnya `window.dropdown = function () {}` (ini karena dengan fungsi Webpack, Rollup, Parcel, dll. yang Anda tentukan akan secara default ke lingkup modul, bukan `window`).
Anda juga dapat mencampur beberapa objek data menggunakan penghancuran objek:
```html
```
---
### `x-init`
**Contoh:** ``
**Struktur:** ``
`x-init` menjalankan ekspresi saat komponen diinisialisasi.
Jika Anda ingin menjalankan kode SETELAH Alpine telah melakukan pembaruan awal ke DOM (sesuatu seperti hook `mounted()` yang di VueJS), Anda dapat mengembalikan callback dari `x-init`, dan itu akan dijalankan setelah:
`x-init="() => { // kami memiliki akses ke status inisialisasi post-dom di sini // }"`
---
### `x-show`
**Contoh:** ``
**Struktur:** ``
`x-show` mengubah gaya `display: none;` pada elemen tergantung apakah ekspresi ditetapkan ke `true` atau `false`.
**x-show.transition**
`x-show.transition` adalah API kenyamanan untuk membuat `x-show` Anda lebih menyenangkan menggunakan transisi CSS.
```html
Konten ini akan ditransisikan masuk dan keluar.
```
| Perintah | Deskripsi |
| --- | --- |
| `x-show.transition` | Fade dan skala simultan. (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` | Hanya transisi masuk. |
| `x-show.transition.out` | Hanya transisi keluar. |
| `x-show.transition.opacity` | Hanya menggunakan fade saja. |
| `x-show.transition.scale` | Hanya menggunakan timbangan saja. |
| `x-show.transition.scale.75` | Sesuaikan transformasi skala CSS `transform: scale(.75)`. |
| `x-show.transition.duration.200ms` | Menyetel transisi "masuk" ke 200ms. Transisi "keluar" akan disetel menjadi setengahnya (100ms). |
| `x-show.transition.origin.top.right` | Sesuaikan asal transformasi CSS `transform-origin: top right`. |
| `x-show.transition.in.duration.200ms.out.duration.50ms` | Durasi berbeda untuk "masuk" dan "keluar". |
> Catatan: Semua pengubah transisi ini dapat digunakan bersama satu sama lain. Ini mungkin (meskipun konyol lol): `x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.85.out.duration.200ms.origin.bottom.left.opacity.scale.95`
> Catatan: `x-show` akan menunggu setiap anak menyelesaikan transisi keluar. Jika Anda ingin mengabaikan perilaku ini, tambahkan modifer `.immediate`:
```html
```
---
### `x-bind`
> Catatan: Anda bebas menggunakan sintaks ":" yang lebih pendek: `:type = "..."`
**Contoh:** ``
**Struktur:** ``
`x-bind` menyetel nilai atribut ke hasil ekspresi JavaScript. Ekspresi memiliki akses ke semua kunci objek data komponen, dan akan diperbarui setiap kali datanya diperbarui.
> Catatan: Binding atribut HANYA diperbarui ketika dependensinya diperbarui. Framework ini cukup pintar untuk mengamati perubahan data dan mendeteksi binding mana yang mempedulikannya.
**`x-bind` untuk atribut kelas**
`x-bind` berperilaku sedikit berbeda saat mengikat ke atribut class.
Untuk kelas, Anda meneruskan objek yang kuncinya adalah nama kelas, dan nilai adalah ekspresi boolean untuk menentukan apakah nama kelas tersebut diterapkan atau tidak.
Sebagai contoh:
``
Dalam contoh ini, kelas "hidden" hanya akan diterapkan jika nilai atribut data `foo` adalah `true`.
**`x-bind` untuk atribut boolean**
`x-bind` mendukung atribut boolean dengan cara yang sama seperti atribut nilai, menggunakan variabel sebagai kondisi atau ekspresi JavaScript apa pun yang menghasilkan `true` atau `false`.
Sebagai contoh:
```html
```
Ini akan menambah atau menghapus atribut `disabled` ketika `myVar` masing-masing bernilai `true` atau `false`.
Atribut Boolean didukung sesuai dengan [HTML spesifikasi](https://html.spec.whatwg.org/multipage/indices.html#attributes-3:boolean-attribute), sebagai contoh `disabled`, `readonly`, `required`, `checked`, `hidden`, `selected`, `open`, dll.
**pengubah `.camel`**
**Contoh:** `
**Ingin logo Anda di sini? [DM di Twitter](https://twitter.com/calebporzio)**
## Proyek Komunitas
* [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)
### Perintah
---
### `x-data`
**Contoh:** `