Revision rapide Vue.js

Vue.js Bindings (`v-`)

v-bind: ou le raccourci :

Exemple : Lier l'attribut href d'un lien à une variable URL.

<a :href="url">Visitez notre site</a>

v-model:

Exemple : Liaison bidirectionnelle pour un champ de saisie texte.

<input v-model="email" placeholder="Entrez votre email">
        

v-on: ou son raccourci @

Exemple : Écouter le clic sur un bouton pour soumettre un formulaire.

<button @click="submitForm">Envoyer</button>

v-for

Exemple : Afficher une liste de produits.

        <div v-for="product in products" :key="product.id">{{ product.name }}</div>

v-if, v-else-if, v-else

Exemple : Afficher des messages en fonction de l'état de connexion de l'utilisateur.

<div v-if="loggedIn">Bienvenue, utilisateur!</div>
<div v-else>Vous n'êtes pas connecté.</div>

v-show

Exemple : Afficher/masquer un menu déroulant.

<div v-show="isDropdownVisible">Contenu du menu</div>

Exemple : Passer un titre à un composant enfant.

<blog-post :title="postTitle"></blog-post>

        props: ['title']

Exemple : Bouton de like dans un composant enfant émettant un événement vers le parent.
- Dans l'enfant (LikeButton):

<button @click="$emit('like')">Like</button>

<like-button @like="handleLike"></like-button>