x-data:
Alpine의 모든 시작점은 x-data
이다.
x-data
는 HTML의 반응형 데이터를 만든다.
x-bind:
x-bind
는 HTML의 속성들을 자바스크립트의 요소들로 바꾼다.
x-on:
x-on
을 사용하면 전달된 DOM 이벤트에소 코드를 쉽게 실행 가능하다.
x-text:
x-text
는 텍스트 컨텐츠를 주어진 결과에 따라 보여준다.
x-html:
x-html
은 innerHTML를 주어진 결과에 따라 보여준다.
x-model:
x-model
은 input에 대한 값을 x-data
에 저장을 한다.
x-show:
x-show
는 Alpine에서 가장 유용한것 중에 하나이다. 이것은 DOM요소를 숨기고 보여주는데 매우 효과적이다.
x-transition:
x-transition
을 이용하면 간단한 애니메이션을 만들수가 있다. TailwindCSS를 이용하여 조종할 수도 있다.
x-for:
x-for
은 DOM요소가 이터럴 할 수 있게 해준다. 그리고 x-for
은 무조건 template
태그 안에 하나의 요소만 선언 가능하다.
x-if:
x-if
는 x-show
와 비슷한 역활을 하지만 CSS를 바꾸는 것과는 다르게 요소를 제거 하거나 추가한다. 또한 template
태그 안에 하나의 요소만 선언 가능하고 x-transition
은 사용이 불가능하다.
x-init:
생성자이고 다양하게 활용가능
x-effect:
x-effect
는 의존성중 하나가 바뀔때 어떻게 바뀌는지 볼 수 있다.
x-ref:
x-ref
는 $ref
와 같이 쓰이며 getElementById
, querySelector
와 같은것을 대체한다.
x-cloak:
Alpine.js를 사용하다보면 페이지가 로드된 후 Alpine이 로드되기 전에 초기화되지 않은 템플릿을 볼 때 깜빡거리는 현상이 있을때 사용한다.
x-ignore:
x-init
, x-data
를 가지고 있는 요소중 Alpine을 사용하고 싶지 않다면 사용한다.
x-id:
x-teleport:
x-teleport
는 Alpine 템플릿을 DOM의 다른 부분으로 페이지 전체를 옮긴다.
x-modelable:
x-modelable
을 사용하면 Alpine 속성을 x-model
의 대상으로 노출시킬 수 있다.