Quick review Vue.js

Vue.js Bindings (`v-`)

v-bind: or the shortcut :

Example: Bind the href attribute of a link to a URL variable.

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

v-model:

Example: Bidirectional binding for a text entry field.

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

v-on: or its shortcut @

Example: Listen for a button to be clicked to submit a form.

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

v-for

Example: Display a list of products.

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

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

Example: Show messages based on user login status.

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

v-show

Example: Show/hide a drop-down menu.

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

Example: Pass a title to a child component.

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

        props: ['title']

Example: Like button in a child component emitting an event to the parent.
- In child (LikeButton):

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

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