React, Vue 보다는 훨씬 가벼운 프레임워크
https://alpinejs.dev/start-here
Start Here — Alpine.js
Start Here Create a blank HTML file somewhere on your computer with a name like: i-love-alpine.html Using a text editor, fill the file with these contents: Open your file in a web browser, if you see I ❤️ Alpine, you're ready to rumble! Now that you're
alpinejs.dev
기본형태
<html>
<head>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="{open: true}">
<div x-show="open">Content..</div>
<button @click="open=!open">클릭</button>
</div>
<div x-data="{ message: '' }">
<input type="text" x-model="message">
<span x-text="message"></span>
</div>
</body>
</html>
Alpine.js 는 <div x-data="{ }"></div> 로부터 모든게 시작된다고 생각하면 된다. (객체의 시작)
<div x-data="{}">
<h1 :class :style :id @click x-show x-bind ></h1>
<input>
</div>
x-data
변수선언
x-data="{ open: false }"
확장하기, 함수사용가능 (콤마로 구분함)
x-data="{ open: false, get isOpen() {return this.open}, toggle() { this.open =! this.open }, }"
x-show
보여주기, 숨기기
x-show="open"
x-text
값 표시하기
x-bind
(속성과 바인딩)
:class="{ 'hidden': ! open }"
:style="{ color:'red', display:'flex' }"
:id
x-model
(input 데이타와 바인딩)
x-on:click
단축어
@click="", @keyup, @submit
반복하기
<template x-for=""></template>
데이타 연결
x-modelable=""
객체 자신을 넘겨주기 $el
다른 객체 참조시 마크하기 $refs x-ref
글로벌 함수 작성 및 불러오기 (재사용하기)
Alpine.data(...)
x-data 의 글로벌 사용
Alpine.store()
글로벌 변수를 사용할 수 있도록..$store
Alpine.bind(...)
'Laravel > Alpine.js' 카테고리의 다른 글
| Alpine.js - modal, 모달창 만들기 (0) | 2024.07.04 |
|---|---|
| Alpine.js - Dropdown 메뉴 (0) | 2024.07.04 |
| [Alpine.js] - 화면넓이(or다크모드) 사용자 설정하기 with Global Data 활용 (0) | 2023.07.22 |
