目次

ディレクティブ一覧
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/オブジェクトデータが使用できるようになる。

sample.html

<div x-data="{ hoge:'はろー、わーるど！' }">
  <p></p>
</div>

See the Pen Alpine.js 例2 by yumaRenacido (@yumaRenacido) on CodePen.

x-text

オブジェクトデータをテキストとして表示する。

sample.html

<div x-data="{ hoge:'はろー、わーるど！' }">
  <p x-text="hoge"></p>
</div>

See the Pen Alpine.js 例2 by yumaRenacido (@yumaRenacido) on CodePen.

複数のプロパティも定義できる。

sample.html

<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 (要素をクリックした時)

sample1.html

<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 (要素にマウスが入った時)

sample2.html

<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内に記述する方法

sample1.html

<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タグ内に記述する方法

sample1.html

<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を渡すことでその要素の表示/非表示を切り替える。

sample.html

<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を切り替える処理を行うことが可能。

sample.html

<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タグに記述して、その子要素が存在有無の切り替え対象となる。

sample.html

<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属性の値を変更する。

sample1.html

<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属性の値を変更する。

sample2.html

<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(大きさ)のアニメーションがデフォルトで設定されている。

sample.html

<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を追加することで２秒に調整して比較してみる。

sample.html

<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変数を動的に結びつける。

sample.html

<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

対象要素が生成/初期化された時に実行させる処理を定義できる。

sample.html

<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要素を参照する。

sample.html

<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要素を参照する。

sample.html

<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要素を取得する。

sample.html

<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

指定した変数に変更があった際に行う処理を登録できる。

sample.html

<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

sample.html

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