初めてみようAlpine.js(*^▽^*)

|ω・｀)ﾉ ﾔｧ

jsのフレームワークを触った事のないそこの君！とっつきやすいAlpine.jsを触ってみない？ σ(・ω・,,｀)？

使う準備(*‘ω‘ *)

CDNで読み込むだけ！

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

終了 (^_-)-☆

基本的な使い方( *´艸｀)

サンプル1

テキストボックスに入力した文字をpタグに同期して表示してみよう！( ^^) _U~~

ディレクティブ	説明
x-data	変数、メソッド、ゲッターなどを定義します
x-model	inputタグなどに使用。指定した変数を同期して書き変えます
x-text	タグの直下に指定した変数の中身を同期して表示します

1. x-dataで変数を宣言しよう! 宣言したタグの外からは使えないよ(^^♪

<div x-data="{ name: '' }">
</div>

2. x-modelでテキストボックスに入力した内容と同期させよう(^_-)-☆

<div x-data="{ name: '' }">
    <input type="text" x-model="name"/>
</div>

3. x-textで変数の中身を表示しよう(^^)/

<div x-data="{ name: '' }">
    <input type="text" x-model="name"/>
    <p x-text="name"></p>
</div>

わぁ(n'∀')ηﾟ*｡:*!jsフレームワークデビュー、しちゃったね！

サンプル2

特定のラジオボタンを選択した時にのみテキストボックスを表示しよう(^^)

Directives	説明
x-on:click	クリックイベント、処理をそのまま記述も可能
x-show	式の結果がfalseの時にdisplay:noneが付与され、trueの時に解除される

<div x-data="{ isPet: false }">
    <p>ペットを飼っていますか？</p>
    <input type="radio" name="isPet" value="はい" x-on:click="isPet = true" id="yes"><label for="yes">はい</label>
    <input type="radio" name="isPet" value="いいえ" x-on:click="isPet = false" id="no"><label for="no">いいえ</label>
    <div x-show="isPet">
        <label>ペットの名前</label>
        <input type="text"/>
    </div>
</div>

おわりに (#^.^#)

軽い動的な機能ならjavascript書かずに作れちゃって快適ーなAlpine.js(^。^)。

興味を持ってくれたら嬉しいな( ｀ー´)ノ