Cheatsheet : Vue.js
CheatSheet Vue.js : Guide complet, résumé, aide-mémoire, tutoriel et conseils clés pour apprendre et maîtriser Vue.js efficacement et rapidement.
MAJ en 12 chapitres
Lien CDN
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>- Pour amener de la réactivité partielle (projet basé sur une autre techno)
- Pas de phase de build => pas de transpilation
.vue,.scss,.ts…
Installation avec Vite
npm init vue@latest- Pour projet Vue complet
- Serveur local avec
npm run dev - Phase de build => transpilation
.vue,.scss,.ts…
Data (state)
Données réactives propres au composant.
export default {
data() {
return {
maVariable: "Valeur"
}
},
// ...
}MAJ state (script) => MAJ données affichées (template) #onewaydatabinding
Méthodes
Logique propre au composant.
export default {
methods: {
maMethode() {
// ...
}
},
// ...
}this pour faire référence à une donnée réactive depuis l’objet courant
Computed
Méthode optimisée retournant une valeur basée sur la logique définie.
export default {
computed: {
maProprieteCalculee() {
// Retourne un résultat basé sur une donnée réactive (this)
}
},
// ...
}- Si pas de données réactives : retourne un résultat mis en cache
- Si données réactives inchangées : retourne un résultat mis en cache
- Si données réactives modifiées : recalcul du résultat, aussitôt mis en cache
- Pas de parenthèses lors de l’appel
Watcher
Action délenchée suite à la modification d’une donnée réactive.
export default {
data() {
return {
maVariable: 0
}
},
watch: {
maVariable(newValue, oldValue) {
// ...
}
}
}newValuerécupère la valeur après modificationoldValuerécupère la valeur avant modification
Affichage dynamique (dans un template)
{{ maVariable }}
{{ maMethode() }}
{{ maProprieteCalculee }}Squelette composant .vue (SFC)
Composant .vue contenant structure + mise en forme + logique.
<!-- MyComponent.vue -->
<script></script>
<template></template>
<style scoped></style>- Nommer avec au moins 2 mots et en
PascalCase scoped=> restreint le CSS à ce composant- Attribut
lang=> utiliser préprocesseur, moteur de template ou superset - Un seul enfant dans les balises
<template></template>
Enregistrer un composant
// Enregistrement local : ParentComponent.vue
import MyComponent from './components/MyComponent.vue'
export default {
components: {
'MyComponent': MyComponent
}
}
// Enregistrement global : main.js
import MyComponent from './components/MyComponent.vue'
createApp(App)
.component('MyComponent', MyComponent)
.mount('#app')- Enregistrement global si réutilisé de nombreuses fois
- Enregistrement local si utilisation occasionnelle
- Utiliser avec
<MyComponent></MyComponent>ou<MyComponent/>
Props
Transmission de données à un composant enfant.
<!-- ParentComponent.vue -->
<MyGallery theme="future" :pictures="myPictures"/>
<!-- MyGallery.vue -->
<script>
export default {
props: {
theme: String,
pictures: Array
},
// ...
}
</script>thispour faire référence à une prop depuis l’objet courant{{ maProp }}pour l’afficher dans un template
Emits
Transmission de données à un composant parent.
<!-- ParentComponent.vue -->
<template>
<MyComponent @custom-event="handleCustomEvent"/>
</template>
<script>
export default {
methods: {
handleCustomEvent(payload) {
// Ma logique...
}
},
// ...
};
</script>
<!-- MyComponent.vue -->
<template>
<button @click="sendCustomEvent">
Cliquez pour émettre l'événement
</button>
</template>
<script>
export default {
methods: {
sendCustomEvent() {
this.$emit('custom-event', { data1: "foo", data2: "bar" });
}
},
// ...
}
</script>this.$emitdéclenche l’évènement personnalisé du parentpayload(optionnel) contient les données transmises lors du$emit
Hooks (cycle de vie des composants)
Exécuter un script à un moment précis du cycle de vie d’un composant.
export default {
beforeCreate() {
// Avant la création du composant
},
created() {
// Après la création du composant
},
beforeMount() {
// Avant le montage sur le DOM
},
mounted() {
// Après le montage sur le DOM
},
beforeUpdate() {
// Avant la mise à jour du composant
},
updated() {
// Après la mise à jour du composant
},
beforeUnmount() {
// Avant le démontage du composant du DOM
},
unmounted() {
// Après le démontage du composant du DOM
}
}Évènements (v-on)
Réagir à des évènements.
<script>
export default {
data() {
return {
counter: 0
}
}
}
</script>
<template>
<button v-on:click="increment($event)">Cliquez-moi</button>
<p>Le bouton a été cliqué {{ counter }} fois.</p>
</template>v-on:peut être abrégé en@$event(optionnel) => contient des infos sur l’évènement
Binding (v-bind)
Lier à un attribut HTML des données/une expression JS.
<script>
export default {
data() {
return {
image: {
src: 'happy-tired-dev.jpg',
alt: 'Un dev fatigué mais heureux'
}
}
}
}
</script>
<template>
<img v-bind:src="image.src" v-bind:alt="image.alt">
</template>v-bind: peut être abrégé en :
Rendu itératif (v-for)
Boucler sur des nombres, tableaux ou objets.
<script>
export default {
data() {
return {
products: [
{
name: "Produit n°1",
price: 39.99,
stock: 4
},
// ...
]
}
}
}
</script>
<template>
<article v-for="(product, i) in products" :key="product.name">
<h2>{{ product.name }}</h2>
...
</article>
</template>i(optionnel) contient l’indice de boucle (0,1,2…)- Penser à binder une clé (unique) avec
:key - Boucler sur des groupes de balises voisines =>
v-forsur<template>
Rendu conditionnel (v-if)
Conditionner l’affichage de balises.
<script>
export default {
data() {
return {
premium: true
}
}
}
</script>
<template>
<div class="content-premium" v-if="premium">
...
</div>
<div class="content-premium" v-else>
...
</div>
</template>- Si
false=> balises retirées du DOM v-else-ifpour des scénarios alternatifs supplémentaires- Conditionner l’affichage de groupes de balises voisines =>
v-ifsur<template>
Rendu conditionnel (v-show)
Conditionner l’affichage de balises.
<script>
export default {
data() {
return {
menuOpened: false
}
}
}
</script>
<template>
<nav class="menu-burger" v-show="menuOpened">
...
</nav>
</template>- Si
false=> balises masquées (display: none) du DOM - Privilégier pour des mécaniques de « toggle »
v-showne peut pas s’utiliser sur une balise<template>v-showne peut pas s’utilsier conjointement avecv-else
Liaison avec les formulaires (v-model)
Synchroniser les champs de formulaire au state.
export default {
data() {
return {
username: ''
}
},
// ...
}
<template>
<input type="text" name="username" v-model="username">
</template>MAJ données de formulaires (template) => MAJ state (script) #twowaydatabinding
Slot (v-slot)
Permet d’insérer du contenu dans un composant.
<!-- - - - - - SLOT SIMPLE - - - - - -->
<!-- MyComponent.vue -->
<template>
<div class="my-component">
<slot>Contenu par défaut</slot>
</div>
</template>
<!-- ParentComponent.vue -->
<template>
<MyComponent>
Contenu pour le slot
</MyComponent>
</template>
<!-- - - - - - SLOTS NOMMÉS - - - - - -->
<!-- MyComponent.vue -->
<template>
<div class="my-component">
<slot name="slot-1"></slot>
<slot name="slot-2"></slot>
</div>
</template>
<!-- ParentComponent.vue -->
<template>
<MyComponent>
<template v-slot:slot-1>
Contenu pour le slot 1
</template>
<template v-slot:slot-2>
Contenu pour le slot 2
</template>
</MyComponent>
</template>v-slot:peut être abrégé en#- Contenu envoyé peut contenir des balises HTML
Installation (Vue Router)
npm install vue-router@4Installation simplifiée à l’initialisation avec npm init vue@latest
Définition des routes (Vue Router)
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/a-propos',
name: 'about',
component: AboutView
},
// ...
]
})
export default routerComposants (Vue Router)
<RouterLink to="/">Accueil</RouterLink>
<RouterLink to="/a-propos">A propos</RouterLink>
<RouterLink :to="'/profil/' + user.id">Profil</RouterLink>
<RouterView/><RouterLink to="...">remplace<a href="..."><RouterView/>=> conteneur pour le composant associé à la route
Appel de route dans les scripts (Vue Router)
// Par son chemin
this.$router.push('a-propos')
this.$router.push({ path: 'a-propos' })
// Par son nom
this.$router.push({ name: 'about' })
// Transmission de paramètres de routes
this.$router.push({ ..., params: { id: '10' } })
// Transmission de paramètres HTTP GET
this.$router.push({
...,
query: {
param1: 'foo',
param2: 'bar'
}
})