Alpine.js Cheatsheet

Bases & syntaxe

Bindings

<div x-data="{ message: 'Hello, Alpine!' }">
  message
</div>

Utilisez les bindings pour lier des données entre votre template et le script

Event listeners

<button @click="increment">Click me!</button>
<div>count</div>
<script>
    export default {
        data() {
            return { count: 0 };
        },
        methods: {
            increment() {
                this.count++;
            }
        }
    };
</script>

Ajoutez des événements interactifs à vos composants

Directives

<div x-data="{ isOpen: false }">
  <button @click="isOpen = !isOpen">Toggle</button>
  <div x-show="isOpen">Content here...</div>
</div>

Utilisez les directives pour contrôler le comportement du DOM

Structures de données

Arrays

<div x-data="{ items: ['Item 1', 'Item 2', 'Item 3'] }">
  <ul>
    <li x-for="item in items" :key="item">item</li>
  </ul>
</div>

Manipulez des listes de données en utilisant les boucles

Objects

<div x-data="{ user: { name: 'John', age: 30 } }">
  <p>Name: user.name</p>
  <p>Age: user.age</p>
</div>

Gérez des objets pour stocker des données complexes

Fonctions & methodes essentielles

Méthodes de données

<div x-data="{ count: 0 }">
  <button @click="increment">Increment</button>
  <div>count</div>
</div>
<script>
    export default {
        data() {
            return { count: 0 };
        },
        methods: {
            increment() {
                this.count++;
            }
        }
    };
</script>

Utilisez des méthodes pour gérer les interactions utilisateur

Méthodes de calcul

<div x-data="{ numbers: [1, 2, 3, 4] }">
  <p>Sum: sumNumbers()</p>
</div>
<script>
    export default {
        data() {
            return { numbers: [1, 2, 3, 4] };
        },
        methods: {
            sumNumbers() {
                return this.numbers.reduce((a, b) => a + b, 0);
            }
        }
    };
</script>

Calculez des valeurs en utilisant des méthodes

Patterns courants

Formulaires

<div x-data="{ name: '', email: '' }">
  <form @submit.prevent="submitForm">
    <input type="text" x-model="name" placeholder="Name" />
    <input type="email" x-model="email" placeholder="Email" />
    <button type="submit">Submit</button>
  </form>
</div>
<script>
    export default {
        data() {
            return { name: '', email: '' };
        },
        methods: {
            submitForm() {
                alert(`Name: ${this.name}, Email: ${this.email}`);
            }
        }
    };
</script>

Traitez les formulaires en utilisant Alpine.js

Navigation

<div x-data="{ currentPage: 'home' }">
  <nav>
    <a href="#" :class="currentPage === 'home' ? 'active' : ''" @click="currentPage = 'home'">Home</a>
    <a href="#" :class="currentPage === 'about' ? 'active' : ''" @click="currentPage = 'about'">About</a>
  </nav>
  <div x-show="currentPage === 'home'">Home Content</div>
  <div x-show="currentPage === 'about'">About Content</div>
</div>

Gérez la navigation entre différentes vues

Operations avancées

Conditions ternaires

<div x-data="{ isLoggedIn: true }">
  isLoggedIn ? 'Logged In' : 'Not Logged In'
</div>

Utilisez des opérations conditionnelles pour afficher du contenu dynamique

Opérateurs de chaînage

<div x-data="{ user: { name: 'John', age: 30 } }">
  (user && user.name) ? user.name : 'No Name'
</div>

Utilisez les opérateurs de chaînage pour accéder à des propriétés en toute sécurité

Debugging & outils

Débogage avec console.log

<div x-data="{ count: 0 }">
  <button @click="increment">Increment</button>
  <div>count</div>
</div>
<script>
    export default {
        data() {
            return { count: 0 };
        },
        methods: {
            increment() {
                console.log('Count before:', this.count);
                this.count++;
                console.log('Count after:', this.count);
            }
        }
    };
</script>

Utilisez console.log pour déboguer votre code

Outils de développement

<div x-data="{ message: 'Hello, Alpine!' }">
  <div>message</div>
</div>

Utilisez les outils de développement du navigateur pour inspecter et modifier le comportement d'Alpine.js