x-data:
Alpine의 모든 시작점은
x-data이다.x-data는 HTML의 반응형 데이터를 만든다.
<div x-data="{foo: 'bar'}">
<span x-text="foo"><!-- "bar" --></span>
<div x-data="{foo: 'bob'}">
<span x-text="foo"><!-- "bob" --></span>
</div>
</div>x-bind:
x-bind는 HTML의 속성들을 자바스크립트의 요소들로 바꾼다.
<div x-data="{ placeholder: 'Type here...' }">
<input type="text" x-bind:placeholder="placeholder">
</div><div x-data="{ placeholder: 'Type here...' }">
<input type="text" :placeholder="placeholder">
</div>x-on:
x-on을 사용하면 전달된 DOM 이벤트에소 코드를 쉽게 실행 가능하다.
<button x-on:click="alert('Hello World!')">Say Hi</button><button @click="alert('Hello World!')">Say Hi</button>x-text:
x-text는 텍스트 컨텐츠를 주어진 결과에 따라 보여준다.
<div x-data="{ username: 'calebporzio' }">
Username: <strong x-text="username"></strong>
</div>x-html:
x-html은 innerHTML를 주어진 결과에 따라 보여준다.
<div x-data="{ username: '<strong>calebporzio</strong>' }">
Username: <span x-html="username"></span>
</div>x-model:
x-model은 input에 대한 값을x-data에 저장을 한다.
<div x-data="{ message: '' }">
<input type="text" x-model="message">
<span x-text="message">
</div>x-show:
x-show는 Alpine에서 가장 유용한것 중에 하나이다. 이것은 DOM요소를 숨기고 보여주는데 매우 효과적이다.
<div x-data="{ open: false }">
<button x-on:click="open = ! open">Toggle Dropdown</button>
<div x-show="open">
Dropdown Contents...
</div>
</div>x-transition:
x-transition을 이용하면 간단한 애니메이션을 만들수가 있다. TailwindCSS를 이용하여 조종할 수도 있다.
<div x-data="{ open: false }">
<button @click="open = ! open">Toggle</button>
<span x-show="open" x-transition>
Hello 👋
</span>
</div><div x-data="{ open: false }">
<button @click="open = ! open">Toggle</button>
<div
x-show="open"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90"
>
Hello 👋
</div>
</div>x-for:
x-for은 DOM요소가 이터럴 할 수 있게 해준다. 그리고x-for은 무조건template태그 안에 하나의 요소만 선언 가능하다.
<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
<template x-for="color in colors">
<li x-text="color"></li>
</template>
</ul>x-if:
x-if는x-show와 비슷한 역활을 하지만 CSS를 바꾸는 것과는 다르게 요소를 제거 하거나 추가한다. 또한template태그 안에 하나의 요소만 선언 가능하고x-transition은 사용이 불가능하다.
<template x-if="open">
<div>Contents...</div>
</template>x-init:
생성자이고 다양하게 활용가능
<div x-init="console.log('I\'m being initialized!')"></div>x-effect:
x-effect는 의존성중 하나가 바뀔때 어떻게 바뀌는지 볼 수 있다.
<div x-data="{ label: 'Hello' }" x-effect="console.log(label)">
<button @click="label += ' World!'">Change Message</button>
</div>x-ref:
x-ref는$ref와 같이 쓰이며getElementById,querySelector와 같은것을 대체한다.
<button @click="$refs.text.remove()">Remove Text</button>
<span x-ref="text">Hello 👋</span>x-cloak:
Alpine.js를 사용하다보면 페이지가 로드된 후 Alpine이 로드되기 전에 초기화되지 않은 템플릿을 볼 때 깜빡거리는 현상이 있을때 사용한다.
<style>
[x-cloak] {
display: none !important;
}
</style>
<span x-cloak x-show="false">
This will not 'blip' onto screen ay any point
</span>x-ignore:
x-init,x-data를 가지고 있는 요소중 Alpine을 사용하고 싶지 않다면 사용한다.
<div x-data="{label: 'From Alpine'}">
<div x-ignore>
<span x-text="label"></span>
</div>
</div>x-id:
<div x-id="['text-input']">
<label :for="$id('text-input')">Username</label>
<!-- for="text-input-1" -->
<input type="text" :id="$id('text-input')">
<!-- id="text-input-1" -->
</div>
<div x-id="['text-input']">
<label :for="$id('text-input')">Username</label>
<!-- for="text-input-2" -->
<input type="text" :id="$id('text-input')">
<!-- id="text-input-2" -->
</div>x-teleport:
x-teleport는 Alpine 템플릿을 DOM의 다른 부분으로 페이지 전체를 옮긴다.
<body>
<div x-data="{ open: false }">
<button @click="open = ! open">Toggle Modal</button>
<template x-teleport="body">
<div x-show="open">
Modal contents...
</div>
</template>
</div>
<div>Some other content placed AFTER the modal markup.</div>
...
</body>x-modelable:
x-modelable을 사용하면 Alpine 속성을x-model의 대상으로 노출시킬 수 있다.
<div x-data="{ number: 5 }">
<div x-data="{ count: 0 }" x-modelable="count" x-model="number">
<button @click="count++">Increment</button>
</div>
Number: <span x-text="number"></span>
</div>