Syntaxe des templates

Texte et expressions

{{ message }}
{{ count + 1 }}
{{ ok ? 'Yes' : 'No' }}

Directives

{{ expr }}	Interpolation de texte
v-bind:attr / :attr	Lier un attribut à une expression
v-on:event / @event	Attacher un écouteur d'événement
v-model	Liaison bidirectionnelle (formulaires)
v-if / v-else-if / v-else	Rendu conditionnel
v-show	Basculer le CSS display (reste dans le DOM)
v-for	Rendu de liste
v-slot / #name	Contenu d'un slot nommé

Liaison d'attributs

Réactivité

ref (primitifs)

import { ref } from 'vue'

const count = ref(0)
console.log(count.value)  // 0
count.value++             // reactive update

reactive (objets)

import { reactive } from 'vue'

const state = reactive({ count: 0, name: 'Vue' })
state.count++  // no .value needed

ref vs reactive

ref()	N'importe quel type ; accès via `.value` dans le script
reactive()	Objets/tableaux uniquement ; accès direct aux propriétés
Template	Les deux se déballent automatiquement (`.value` inutile)
Destructure	`reactive` perd la réactivité ; utiliser `toRefs()`

Propriétés calculées et observateurs

Propriétés calculées

import { ref, computed } from 'vue'

const items = ref([1, 2, 3, 4, 5])
const evenItems = computed(() =>
  items.value.filter(n => n % 2 === 0)
)

Les valeurs calculées sont mises en cache et ne se réévaluent que si les dépendances changent

Observateurs

import { ref, watch, watchEffect } from 'vue'

const query = ref('')

// Watch specific source
watch(query, (newVal, oldVal) => {
  console.log(`Changed: ${oldVal} → ${newVal}`)
})

// Auto-track dependencies
watchEffect(() => {
  console.log(`Query is: ${query.value}`)
})

Options d'observateur

immediate: true	Exécuter le rappel immédiatement à la création
deep: true	Observer en profondeur les objets imbriqués
flush: 'post'	Exécuter après la mise à jour du DOM
once: true	Se déclencher une seule fois puis s'arrêter

Composants

Composant à fichier unique (SFC)

Enregistrer des composants

Blocs SFC

<script setup>	API de composition (recommandée)
<template>	Template HTML
<style scoped>	CSS limité au composant
<style module>	CSS Modules (objet $style)

Props et événements

Définir des props

Émettre des événements

Utilisation depuis le parent

v-model sur les composants

Slots

Slot par défaut

Custom content here

Slots nommés

Main content

Slots délimités

API de composition

Fonction composable

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}

Utiliser des composables

provide / inject

// Parent
import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme)

// Descendant (any depth)
import { inject } from 'vue'
const theme = inject('theme', 'light') // default

Routeur (Vue Router)

Définitions de routes

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User },
  ]
})

Navigation dans le template

Home

  User 1

Navigation programmatique

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

router.push('/about')
router.push({ name: 'user', params: { id: 1 } })
console.log(route.params.id)

Fonctionnalités de route

/user/:id	Segment dynamique (`route.params.id`)
name: 'user'	Route nommée pour la navigation programmatique
children: [...]	Routes imbriquées
beforeEnter	Garde de navigation par route
meta: { auth: true }	Métadonnées personnalisées pour les gardes
redirect: '/new-path'	Redirection de route

Hooks de cycle de vie

Ordre des hooks

onBeforeMount	Avant le rendu DOM initial
onMounted	DOM prêt (récupérer des données, ajouter des écouteurs)
onBeforeUpdate	Avant que l'état réactif ne re-rende le DOM
onUpdated	Après le re-rendu du DOM
onBeforeUnmount	Avant la destruction du composant
onUnmounted	Nettoyage (supprimer les écouteurs, minuteries)

Utilisation

Listes et conditions

v-for

  {{ item.name }}

  {{ index }}: {{ item.name }}

  {{ key }}: {{ val }}

Toujours utiliser :key avec v-for pour des mises à jour DOM efficaces

v-if vs v-show

v-if	Rendu conditionnel (ajouter/supprimer du DOM)
v-else-if	Chaîne else-if
v-else	Branche de repli
v-show	Basculer `display: none` (reste dans le DOM)

Utiliser v-show pour les bascules fréquentes, v-if pour les changements rares

Exemple de conditions

Loading...
Error!
{{ data }}

Gestion des formulaires

Bases de v-model

Modificateurs de v-model

v-model.lazy	Synchroniser sur `change` au lieu de `input`
v-model.number	Conversion automatique en nombre
v-model.trim	Supprimer automatiquement les espaces en début/fin

Modificateurs d'événements

@click.prevent	Appeler `preventDefault()`
@click.stop	Appeler `stopPropagation()`
@click.once	Se déclencher au plus une fois
@keyup.enter	Uniquement sur la touche Entrée
@submit.prevent	Empêcher la soumission par défaut du formulaire

RÉFÉRENCE RAPIDE VUE.JS

Title