1. Syntaxe

<template>
    <div id="app">
       <form @submit.prevent="addNewTask()">
           <input type="text" v-model="task" />
           <button type="submit">Ajouter une Nouvelle tâche</button>
       </form>
       <ul>
           <li v-for="todo in todos" :key="todo.id" :class="{ 'is-complete': todo.isComplete === true }">
               <span v-text="todo.task"></span>
               <input type="checkbox" v-model="todo.isComplete" />
               <button @click="removeTask(todo.id)">Supprimer</button>
           </li>
       </ul>
    </div>
</template>

Save

VueJS

<div id="app" x-data="todos()">
    <form @submit.prevent="addNewTask()">
        <input type="text" x-model="task" />
        <button type="submit">Ajouter une Nouvelle tâche</button>
    </form>
    <ul>
        <template x-for="todo in todos" :key="todo.id">
            <li :class="{ 'is-complete': todo.isComplete === true }">
                <span x-text="todo.task"></span>
                <input type="checkbox" x-model="todo.isComplete" />
                <button @click="removeTask(todo.id)">Supprimer</button>
            </li>
        </template>
    </ul>
</div>

Save

AlpineJs

2. Taille du fichier

		JQuery	Vue.Js	React/Reat Dom
Filesize (GZipped, minified)	8.3kb	30kb	32kb	5kb + 36kb

Alpine

3. Tous sur HTML

<div x-data>
    <span @custom-event="console.log($event.detail.foo)"></span>
    <button @click="$dispatch('custom-event', { foo: 'bar' })">
<div>

Save

4. Quand utiliser Alpine.Js

Pour Afficher et masquer des nœuds DOM sous certaines conditions,

Pour l'entrée utilisateur contraignant,

Pour écouter les événements et modifier l'interface utilisateur en conséquence,

Pour ajout de classes.

1. Syntaxe

<template>
    <div id="app">
       <form @submit.prevent="addNewTask()">
           <input type="text" v-model="task" />
           <button type="submit">Ajouter une Nouvelle tâche</button>
       </form>
       <ul>
           <li v-for="todo in todos" :key="todo.id" :class="{ 'is-complete': todo.isComplete === true }">
               <span v-text="todo.task"></span>
               <input type="checkbox" v-model="todo.isComplete" />
               <button @click="removeTask(todo.id)">Supprimer</button>
           </li>
       </ul>
    </div>
</template>

Save

VueJS

<div id="app" x-data="todos()">
    <form @submit.prevent="addNewTask()">
        <input type="text" x-model="task" />
        <button type="submit">Ajouter une Nouvelle tâche</button>
    </form>
    <ul>
        <template x-for="todo in todos" :key="todo.id">
            <li :class="{ 'is-complete': todo.isComplete === true }">
                <span x-text="todo.task"></span>
                <input type="checkbox" x-model="todo.isComplete" />
                <button @click="removeTask(todo.id)">Supprimer</button>
            </li>
        </template>
    </ul>
</div>

Save

AlpineJs

Vos concurents

Quels sont vos principaux concurrents et quelle est leur identité visuelle?
Quels sont les principaux éléments qui vous différencient de vos concurrents?

Univers graphique

Souhaitez-vous des couleurs, formes ou polices de caractères particulières?
Pourriez-vous sélectionner quelques identités graphiques (de votre secteur et hors secteur) qui vous plaisent? Pourquoi?
Existe-t-il des clichés ou autres éléments que le graphiste doit absolument éviter dans ses créations?

Objet

1. Syntaxe

2. Taille du fichier

3. Tous sur HTML

4. Quand utiliser Alpine.Js

1. Syntaxe

Vos concurents

Univers graphique

Merci pour votre

attention!

😇