目次
ディレクティブ一覧
1. x-data
2. x-text
3. x-on
4. x-show
5. x-if
6. x-bind
7. x-init
マジックプロパティ一覧
1. $el
2. $refs
3. $root
4. $watch
x-data
書き込んだ要素内でAlpine.js/オブジェクトデータが使用できるようになる。
<div x-data="{ hoge:'はろー、わーるど！' }">
<p></p>
</div>
See the Pen Alpine.js 例2 by yumaRenacido (@yumaRenacido) on CodePen.
x-text
オブジェクトデータをテキストとして表示する。
<div x-data="{ hoge:'はろー、わーるど！' }">
<p x-text="hoge"></p>
</div>
See the Pen Alpine.js 例2 by yumaRenacido (@yumaRenacido) on CodePen.
複数のプロパティも定義できる。
<div x-data="{ hoge:'はろー、わーるど！', fuga:'hello world!' }">
<p x-text="hoge"></p>
<p x-text="fuga"></p>
</div>
See the Pen Untitled by yumaRenacido (@yumaRenacido) on CodePen.
x-on
x-on:【イベント】="【処理/関数】" で定義した処理(関数)を実行できる。
例1 x-on:click (要素をクリックした時)
<div x-data="{ btn:'テストボタン' }">
<button
x-text="btn"
x-on:click="alert('ボタンが押されました！')"
>
</button>
</div>
See the Pen Alpine.js 例３ by yumaRenacido (@yumaRenacido) on CodePen.
例2 x-on:mouseenter (要素にマウスが入った時)
<div x-data="{ btn:'テストボタン' }">
<button
x-text="btn"
x-on:click="alert('ボタンが押されました！')"
x-on:mouseenter="btn = 'マウスが要素内に入りました'"
>
</button>
</div>
See the Pen Alpine.js 例4 by yumaRenacido (@yumaRenacido) on CodePen.
※補足 オブジェクトに関数を登録して呼び出す形でも実行可能。
例1 x-data内に記述する方法
<div x-data="
{
btn:'テストボタン',
test_alert(){alert('ボタンが押されました！')},
text_change(){this.btn = 'マウスが要素内に入りました'}
}">
<button
x-text="btn"
x-on:click="test_alert()"
x-on:mouseenter="text_change()"
>
</button>
</div>
See the Pen Alpine.js 例6 by yumaRenacido (@yumaRenacido) on CodePen.
例2 scriptタグ内に記述する方法
<div x-data="hogehoge()">
<button
x-text="btn"
x-on:click="test_alert()"
x-on:mouseenter="text_change()"
>
</button>
</div>
<script>
hogehoge = () => {
return {
btn:'テストボタン',
test_alert(){alert('ボタンが押されました！')},
text_change(){this.btn = 'マウスが要素内に入りました'}
}
}
</script>
See the Pen Alpine.js 例6 by yumaRenacido (@yumaRenacido) on CodePen.
主なイベントは以下の通り。
・click: クリックイベント
・dblclick: ダブルクリックイベント
・input: 入力イベント
・keydown: キーを押した時のイベント
・keyup: キーを離した時のイベント
・mousedown: マウスを押した時のイベント
・mouseup: マウスを離した時のイベント
・mouseenter: マウスが要素に入った時のイベント
・mouseleave: マウスが要素から出た時のイベント
・mousemove: マウスを動かした時のイベント
・submit: フォームの送信イベント
・resize: ウインドウのリサイズイベント
・scroll: スクロールイベント
・touchstart: タッチイベント
・touchend: タッチ終了イベント
・touchmove: タッチ移動イベント
x-show
値にture/falseを渡すことでその要素の表示/非表示を切り替える。
<div x-data="{
open1 : true,
open2 : false
}">
<div x-show="open1">
これは本文1です...
</div>
<div x-show="open2">
これは本文2です...
</div>
</div>
See the Pen Alpine.js 例7 by yumaRenacido (@yumaRenacido) on CodePen.
ボタンを設置してtrue/falseを切り替える処理を行うことが可能。
<div x-data="{
open1 : true,
open2 : false
}">
<div x-show="open1">
これは本文1です...
</div>
<div x-show="open2">
これは本文2です...
</div>
<button x-on:click="open2 = !open2">
表示切替ボタン
</button>
</div>
See the Pen Alpine.js 例8 by yumaRenacido (@yumaRenacido) on CodePen.
x-if
x-showと似ているが、こちらはdisplay:none;による非表示ではなく存在自体を操作する。templateタグに記述して、その子要素が存在有無の切り替え対象となる。
<div x-data="{
open1 : true,
open2 : false
}">
<template x-if="open1">
<div>これは本文1です...</div>
</template>
<template x-if="open2">
<div>これは本文2です...</div>
</template>
<button x-on:click="open2 = !open2">
表示切替ボタン
</button>
</div>
See the Pen Alpine.js 例9 by yumaRenacido (@yumaRenacido) on CodePen.
x-bind
要素の属性を動的に書き換えることができる。
例1 inputタグのvalue,disabled属性の値を変更する。
<div x-data="{
message : 'やあ！',
open : true
}">
<input
type="text"
x-bind:value="message"
x-bind:disabled="open"
>
</div>
See the Pen Alpine.js 例11 by yumaRenacido (@yumaRenacido) on CodePen.
例2 inputタグのclass属性の値を変更する。
<div x-data="{
add_class : 'fuga'
}">
<input
type="text"
value="テスト"
class="hoge"
x-bind:class="add_class"
>
</div>
<!-- inputのクラスは class="hoge fuga" になる。 -->
See the Pen Alpine.js 例11 by yumaRenacido (@yumaRenacido) on CodePen.
x-transition
x-showと併用することでアニメーションを簡単に実装できる。
opacity(透明度)とscale(大きさ)のアニメーションがデフォルトで設定されている。
<div x-data="{ open : false }">
<button x-on:click="open = !open">
テストボタン
</button>
<p x-show="open" x-transition>
これは本文です...
</p>
</div>
See the Pen Alpine.js 例12 by yumaRenacido (@yumaRenacido) on CodePen.
また.opacity/.scale等をメソッドチェーン式に設定することでそれらの設定変更が可能。
わかりづらいためアニメーションの速度を.durationを追加することで２秒に調整して比較してみる。
<div x-data="{ open : false }">
<button x-on:click="open = !open">
テストボタン
</button>
<p x-show="open" x-transition.opacity.duration.2000ms>
これは透明度変更のみです...
</p>
<p x-show="open" x-transition.scale.duration.2000ms>
これはサイズ変更のみです...
</p>
<p x-show="open" x-transition.scale.opacity.duration.2000ms>
これは両方変更(初期設定)です...
</p>
</div>
See the Pen Alpine.js 例14 by yumaRenacido (@yumaRenacido) on CodePen.
x-model
HTML要素とjavascript変数を動的に結びつける。
<div x-data="{ message : '' }">
<input type="text" x-model="message">
<p x-text="message"></p>
</div>
See the Pen Alpine.js 例14 by yumaRenacido (@yumaRenacido) on CodePen.
以下の入力要素で動作する。
・<input type="text">
・<textarea>
・<input type="checkbox">
・<input type="radio">
・<select>
x-init
対象要素が生成/初期化された時に実行させる処理を定義できる。
<div x-data="{open : false}">
<button x-on:click="open=!open">
テストボタン
</button>
<template x-if="open">
<p x-init="alert('初期化!')">
要素が生成されました！
</p>
</template>
</div>
See the Pen Alpine.js 例19 by yumaRenacido (@yumaRenacido) on CodePen.
$el
記述した自身のDOM要素を参照する。
<div x-data>
<button
x-on:click="$el.textContent=$el.outerHTML">
テストボタン
</button>
</div>
See the Pen Alpine.js 例17 by yumaRenacido (@yumaRenacido) on CodePen.
$refs
x-refで名前をつけたDOM要素を参照する。
<div x-data>
<button
x-on:click="$refs.hoge.textContent='ほげ'">
テストボタン
</button>
<p x-ref="hoge">...</p>
</div>
See the Pen Alpine.js 例17 by yumaRenacido (@yumaRenacido) on CodePen.
$root
記述した要素から参照して、一番近いx-data属性を持つ親のDOM要素を取得する。
<div x-data data-message="表示される！">
<div data-message="無視される...">
<button x-on:click="alert($root.dataset.message)">
テストボタン
</button>
</div>
</div>
See the Pen Alpine.js 例18 by yumaRenacido (@yumaRenacido) on CodePen.
$watch
指定した変数に変更があった際に行う処理を登録できる。
<div
x-data="{ count : 0}"
x-init="$watch('count',(newValue,oldValue) => alert(`countが${oldValue}から${newValue}に変更されました`))"
>
<button x-on:click="count++">テストボタン</button>
<p x-text="count"></p>
</div>
See the Pen Alpine.js 例21 by yumaRenacido (@yumaRenacido) on CodePen.
$dispatch
<div
x-data="{}"
x-on:testevent="alert($event.detail.value)"
>
<button
x-on:click="$dispatch('testevent', { value : 'ほげ' })"
>
テストボタン
</button>
</div>
登録した関数を呼び出して実行する。
See the Pen Alpine.js 例22 by yumaRenacido (@yumaRenacido) on CodePen.