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>