Les directives sont des attributs que vous pouvez ajouter à vos éléments pour attacher un comportement spécifié à cet élément.
<div x-directive="[expression]"></div>
<div x-show="isOpen"></div>
Source : github.com/alpinejs/alpine/blob/master/README.fr.md#apprentissage
<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>
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>
AlpineJs
Objet