``` --- ### `x-init` **例:** `

` **構造:** `

` `x-init` はコンポーネントが初期化されると式を実行します。 Alpine が DOM（VueJS の `mounted()` フックのようなもの）に最初の更新を行った後にコードを実行したい場合、`x-init` からコールバックを返すことができ、その後実行されます： `x-init="return () => { // ここで初期化後の DOM ステートにアクセスできます // }"` --- ### `x-show` **例:** `

` **構造:** `

` `x-show` は、式が `true` または `false` のどちらかの結果によって、要素の `display: none;` スタイルを切り替えます。 --- ### `x-bind` > 注意: 短い「:」シンタックスを使えます: `:type="..."` **例:** `` **構造:** `` `x-bind` は、属性の値を JavaScript 式の結果を設定します。この式は、コンポーネントのデータオブジェクトのすべてのキーにアクセスでき、データが更新されるたびに反映されます。 > 注意: 属性バインディングは、依存関係が更新されたときにのみ更新されます。このフレームワークは、データの変化を観察し、どのバインディングがそれらを検出するのか最適化されています。 **`x-bind` for class attributes** `x-bind` は、`class` 属性にバインドするときの動作が少し異なります。クラスの場合、キーがクラス名であり、値がそれらのクラス名が適用されるかどうかを決定するブール式であるオブジェクトを渡します。例: `

` この例では、「hidden」クラスは、`foo` データ属性値が `true` の場合にのみ適用されます。 **ブール属性の `x-bind`** `x-bind` は、値属性と同じ方法でブール値属性をサポートします。条件として変数を使用するか、`true` または `false` に解決される JavaScript 式を使用します。例: `` `myVar` が true または false の場合に `disabled` 属性を追加または削除します。 `readonly`, `required` など、最も一般的なブール属性がサポートされています。 --- ### `x-on` > 注意：より短い「@」シンタックスを自由に使用できます: `@click="..."` **例:** `` **構造:** `` `x-on` は、イベントリスナを宣言された要素にアタッチします。そのイベントが発行されると、その値として設定された JavaScript 式が実行されます。式でデータが変更されると、このデータに「バインドされた」他の要素属性が更新されます。 **`keydown` 修飾子** **例:** `` `x-on：keydown` ディレクティブに追加された keydown 修飾子を使用し、待ち受けする特定のキーを指定できます。修飾子は `Event.key` 値のケバブケースであることに注意してください。例: `enter`, `escape`, `arrow-up`, `arrow-down` > 注意: 次のようなシステム修飾子キーの組み合わせを待ち受けもできます: `x-on：keydown.cmd.enter="foo"` **`.away` 修飾子** **例:** `

` `.away` 修飾子を付与すると、イベントがそれ自体またはその子以外のソースから発生した場合にのみイベントハンドラは実行されます。ユーザがクリックしたときにドロップダウンやモーダルを非表示にするのに便利です。 **`.prevent` 修飾子** **例:** `` イベントリスナに `.prevent` を追加すると、トリガされたイベントで `preventDefault` が呼び出されます。上記の例では、ユーザがクリックしたときにチェックボックスが実際にチェックされないことを意味します。 **`.stop` 修飾子** **例:** `

` イベントリスナに `.stop` を追加すると、トリガされたイベントで `stopPropagation` が呼び出されます。上記の例では、ボタンから外側の `

` に「click」イベントが浮上しないことを意味します。言い換えると、ユーザがボタンをクリックしても、`foo` は `'bar'` に設定されません。 **`.window` 修飾子** **例:** `

` イベントリスナに `.window` を付与すると、それが宣言されている DOM ノードではなく、グローバル window オブジェクトにリスナがインストールされます。これは、resize イベントなど window で何かが変更されたときにコンポーネントの状態を変更する場合に役立ちます。この例では、ウィンドウの幅が768ピクセルを超えた場合、モーダル/ドロップダウンを閉じます。それ以外の場合は同じ状態を維持します。 > 注意: `.document` 修飾子を使用して、リスナを `window` の代わりに `document` にアタッチすることもできます。 **`.once` 修飾子** **例:** `` イベントリスナに `.once` 修飾子を付与すると、リスナが1回だけ処理されることが保証されます。HTML パーシャルの取得など、1度だけ実行したい場合に便利です。 --- ### `x-model` **例:** `` **構造:** `` `x-model` は要素に「双方向データバインディング」を追加します。つまり、入力要素の値はコンポーネントの項目データの値と同期します。 > 注意: `x-model` は、テキストインプット、チェックボックス、ラジオボタン、テキストエリア、セレクト、およびマルチセレクトの変更を検出するのに最適です。これらのシナリオで [Vue がどのように](https://vuejs.org/v2/guide/forms.html)動作するのか確認してください。 --- ### `x-text` **例:** `` **構造:** `` **構造:** `

` **構造:** `

` `x-ref` は、コンポーネントから生 DOM 要素を取得する便利な方法を提供します。要素に `x-ref` 属性を設定することで、すべてのイベントハンドラで `$refs` というオブジェクト内から利用できるようになります。これは、ID を設定し、あらゆる場所で `document.querySelector` を使用する代替手段に役立ちます。 --- ### `x-if` **例:** `` **構造:** `` `x-show` では不十分な場合（`x-show` が false の場合、要素を `display： none` に設定します）、`x-if` を使用して DOM から要素を完全に削除できます。 Alpine は仮想 DOM を使用しないため、`` タグで `x-if` を使用することが重要です。この実装により、Alpine は堅牢性を保ち、実際の DOM を使用してその仕様を働かせることができます。 > 注意: `x-if` には、`` タグ内に単一要素のルートが必要です。 --- ### `x-for` **例:** ```html ``` `x-for` は、配列の各アイテム毎に新しい DOM ノードを作成する場合に使用します。これは、Vue の `v-for` に似ています。ただし、通常の DOM 要素ではなく、`template` タグに存在する必要があります。 > 注意: `：key` バインディングはオプションですが、強く推奨しています。 --- ### `x-transition` **例:** ```html

...

``` ```html ``` Alpine は、「非表示」と「表示」の遷移間のさまざまな段階にクラスを要素に適用するための6つの異なるトランジションディレクティブを提供します。これらのディレクティブは、`x-show` と `x-if` の両方で機能します。これらは、VueJs のトランジションディレクティブとまったく同じように動作しますが、より理にかなった異なる名前を持っています。 | ディレクティブ | 説明 | | --- | --- | | `:enter` | エンターフェーズ全体に適用されます。 | | `:enter-start` | 要素が挿入される前に追加され、要素が挿入の1フレーム後に削除されます。 | | `:enter-end` | 要素が挿入後（`enter-start` が削除されると同時）の1フレームに追加され、トランジション/アニメーションが終了すると削除されます。 | `:leave` | リーブフェーズ全体に適用されます。 | | `:leave-start` | リーブ遷移がトリガされるとすぐに追加され、1フレーム後に削除されます。 | | `:leave-end` | リーブ遷移がトリガされた後（同時に `leave-start` が削除される）の1フレームに追加され、トランジション/アニメーションが終了すると削除されます。 --- ### `x-cloak` **例:** `

` Alpine の初期化時に、要素から `x-cloak` 属性が削除されます。これは、事前に初期化された DOM を隠すのに役立ちます。これが機能するためには、通常、次のグローバルスタイルを追加します。: ```html ``` ### マジックプロパティ --- ### `$el` **例:** ```html

``` `$el` は、ルートコンポーネントの DOM ノードを取得するために使用できるマジックプロパティです。 ### `$refs` **例:** ```html ``` `$refs` は、コンポーネント内で `x-ref` でマークされた DOM 要素を取得するために使用できるマジックプロパティです。これは、DOM 要素を手動で操作する必要がある場合に便利です。 --- ### `$event` **例:** ```html ``` `$event` は、ネイティブブラウザの「Event」オブジェクトを取得するためにイベントリスナ内で使用できるマジックプロパティです。 --- ### `$dispatch` **例:** ```html

``` `$dispatch` は、`CustomEvent` を作成し、内部で `.dispatchEvent()` を使用してディスパッチするためのショートカットです。カスタムイベントを使用してコンポーネント間およびコンポーネント間でデータを渡すには、多くの適切なユースケースがあります。基礎となるブラウザの `CustomEvent` システムの詳細については、[こちらをご覧ください。](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) `$dispatch('some-event', { some: 'data' })` の2番目のパラメータとして渡されるデータは、新しいイベントの「detail」プロパティ: `$event.detail.some` です。カスタムイベントデータを `.detail` プロパティにアタッチすることは、ブラウザの `CustomEvent` の標準的な方法です。詳細は[こちらをご覧ください。](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) また、`$dispatch()` を使用して、`x-model` バインディングのデータ更新をトリガすることもできます。例えば: ```html

``` --- ### `$nextTick` **例:** ```html

``` `$nextTick` は、Alpine がリアクティブな DOM 更新を行った後、指定された式のみを実行できるマジックプロパティです。これは、データ更新が反映された後に DOM ステートとやり取りしたい場合に便利です。 ## ライセンス Copyright © 2019-2020 Caleb Porzio and contributors MIT ライセンスの下でライセンスされています。詳細については、[LICENSE.md](LICENSE.md) を参照してください。