Alpine.js

/test/alpine/index
/index.php/test/alpine/index

기본코드 x-data, x-show, x-text

가장 기본이 되는 코드임.

변수선언 oepn:

1<div x-data="{ open: false }" class="mt-2">
2    <button @click="open =! open">Click Me</button>
3    <div x-show="open" class="my-2 text-sm">contents..</div>
4    <div x-text="open"></div>
5</div>

contents..

x-data 에서 함수사용

콤마로 구분함. return 요구는 get, @click="함수이름" () 를 사용하지 않는다. 단순링크

1<div x-data=" {
2         open: false,
3         get isOpen() { return this.open },
4         toggle() { this.open = !this.open },
5     }"
6class="mt-2">
7<button @click="toggle">Click Me</button>

초기화, x-init

1<div x-init="console.log('I\'m being initialized!')"></div>

속성처리, x-bind

단축어 :class :style

1<div x-data="{ text: 'Type here', color: 'color:red' }">
2    <div x-bind:style="color">test</div>
3    <div :style="color">test</div>
4    <input type="text" x-bind:placeholder="text">
5    <input type="text" :placeholder="text">
6</div>

test

이벤트, x-on

단축어는 @click

 1<div x-data class="grid grid-cols-1 gap-1">
 2    <button x-on:click="alert('Hello World!!')"
 3        class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-white hover:bg-indigo-500">Say Hi</button>
 4    <button @click="alert('Hello World!!')"
 5        class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-white hover:bg-indigo-500">Say Hi</button>
 6    <button @click="handleClick" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-white hover:bg-indigo-500">Say Hi</button>
 7</div>
 8 
 9<script>
10    function handleClick() {
11        alert('Say Hi');
12     }
13</script>
14 
15<div x-data>
16    <input type="text" @keyup.enter="alert('Submitted')">
17    <input type="text" @keyup.shift.enter="alert('shift.enter')">
18</div>
19 
20<div x-data @foo="alert('Button Was Clicked')">
21    <button @click="$dispatch('foo')">...</button>
22</div>
23 
24<div x-data>
25    <form action="/foo" @submit.prevent="console.log('submit')">
26        <button>Submit</button>
27    </form>
28</div>
29 
30<div x-data @click="console.log('I will not get logged')">
31    <button @click.stop>Click Me</button>
32</div>
33 
34<div x-data="{ open: false }">
35    <button @click="open = ! open">Toggle</button>
36    <div x-show="open" @click.outside="open=false">Contents...</div>
37</div>

데이타처리, x-model

input, checkbox, select 데이타 바인딩하기

 1<div x-data="{ message: '' }">
 2    <input type="text" x-model="message">
 3    <span x-text="message"></span>
 4</div>
 5 
 6 
 7<div x-data="{ show: false }">
 8    <input type="checkbox" x-model="show">
 9    <label for="checkbox" x-text="show"></label>
10</div>
11 
12<div x-data="{ colors: [] }">
13    <input type="checkbox" value="red" x-model="colors">
14    <input type="checkbox" value="orange" x-model="colors">
15    <input type="checkbox" value="yellow" x-model="colors">
16    <span x-text="colors"></span>
17</div>
18 
19 
20<div x-data="{ color: '' }">
21    <select x-model="color">
22        <template x-for="color in ['red', 'orange', 'yellow']">
23            <option x-text="color"></option>
24        </template>
25    </select>
26    <span x-text="color"></span>
27</div>

데이타중첩, x-modelable

중첩된 x-data 의 변수연결

1<div x-data="{ number: 5 }">
2    <div x-data="{ count: 0 }" x-model="number" x-modelable="count">
3        <button @click="count++"
4            class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-white hover:bg-indigo-500">Increment</button>
5    </div>
6    Number : <span x-text="number"></span>
7</div>

Number :

데이타 반복 x-for

template 를 이용함.

 1<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
 2    <template x-for="color in colors">
 3        <li x-text="color"></li>
 4    </template>
 5</ul>
 6 
 7<ul x-data="{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }">
 8    <template x-for="(value, index) in car">
 9        <li>
10            <span x-text="index"></span>: <span x-text="value"></span>
11        </li>
12    </template>
13</ul>
14 
15<ul x-data="{ colors: [
16    { id: 1, label: 'Red' },
17    { id: 2, label: 'Orange' },
18    { id: 3, label: 'Yellow' },
19]}">
20    <template x-for="color in colors" :key="color.id">
21        <li x-text="color.label"></li>
22    </template>
23</ul>
24 
25 
26<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
27    <template x-for="(color, index) in colors">
28        <li>
29            <span x-text="index + ': '"></span>
30            <span x-text="color"></span>
31        </li>
32    </template>
33</ul>
34 
35<template x-for="(color, index) in colors" :key="index">
36 
37<ul>
38    <template x-for="i in 10">
39        <li x-text="i"></li>
40    </template>
41</ul>

움직임 제어 x-transition

template 를 이용함.

감시 x-effect

x-data 의 변화를 감시한다.

무시하기 x-ignore

x-data 의 변화를 무시한다.

ID 참조하기 x-ref

element ID 를 참조하도록 값을 지정한다.

Hello

로딩 껌뻑임 방지 x-cloak

hidden 되어야 할 div 를 미리 안보이도록 한다. css 파일에 기본적으로 포함시킨다.

1[x-cloak] { display: none !important; }

다른 div 로 보냄 x-teleport

template 태그에 사용한다. modal 에서 유용한다. 부모의 div 태그에서 벗어난다.

벗어나도 모든 이벤트는 동일하게 동작한다.

1<div x-data="{ open: false }">
2    <button @click="open = ! open">Toggle Modal</button>
3    <div x-show="open" @click="open =! open">contentss..</div>
4    <template x-teleport="body">
5        <div x-show="open" @click="open =! open">
6            Modal contents...
7        </div>
8    </template>
9</div>