4e étageV VuePièce 7/7Mémo

Vue

Le mémo de Vue 3 : création de projet, template, réactivité, props, événements, slots, watch et composables.

Ce mémo résume l'essentiel de Vue 3 avec la Composition API et <script setup>. Chaque section renvoie au cours qui l'explique en détail.

Projet et commandes

Commande	Effet
`npm create vue@latest`	Crée un projet.
`npm install`	Installe les dépendances.
`npm run dev`	Lance le serveur de développement.
`npm run build`	Prépare la version finale dans `dist`.

Détails : Ton premier composant Vue.

Structure d'un fichier .vue

<script setup>
import { ref } from 'vue'
const nombre = ref(0)
</script>

<template>
  <button @click="nombre++">{{ nombre }}</button>
</template>

<style scoped>
button { font-weight: bold; }
</style>

Détails : Ton premier composant Vue.

Template

Syntaxe	Rôle
`{{ valeur }}`	Affiche une valeur.
`:src="image"`	Lie un attribut (`v-bind`).
`@click="fonction"`	Écoute un événement (`v-on`).
`v-if` / `v-else-if` / `v-else`	Crée ou détruit selon une condition.
`v-show`	Cache avec le CSS `display`.
`v-for="r in recettes" :key="r.id"`	Répète un élément, avec une clé unique.
`v-model`	Lie un champ de formulaire.

Détails : Le template et les directives.

Réactivité

const portions = ref(4)                    // portions.value dans le script
const recette = reactive({ nom: 'Crêpes' })
const total = computed(() => portions.value * 2)

Dans le template, le .value d'un ref est retiré automatiquement.
Un computed est mis en cache et en lecture seule.

Détails : La réactivité.

Props, événements et modèle

<script setup lang="ts">
const { titre, minutes = 30 } = defineProps<{ titre: string, minutes?: number }>()
const emit = defineEmits<{ (e: 'choisir', id: number): void }>()
const note = defineModel('note', { default: 0 })
</script>

Besoin	Parent	Enfant
Donnée	`:titre="x"`	`defineProps`
Événement	`@choisir="f"`	`emit('choisir', 42)`
Modèle	`v-model:note="n"`	`defineModel('note')`

Détails : Props, événements et v-model sur un composant.

Slots

<!-- enfant -->
<header><slot name="entete">Titre par défaut</slot></header>
<main><slot /></main>

<!-- parent -->
<template #entete><h3>Crêpes</h3></template>
<p>Contenu du slot par défaut</p>

Détails : Slots, watch et cycle de vie.

Watch et cycle de vie

watch(portions, (nouvelle, ancienne) => { /* ... */ })
watch(() => recette.nom, (nom) => { /* ... */ }, { immediate: true })
watchEffect(() => console.log(portions.value))

onMounted(() => { /* après le premier affichage */ })
onUnmounted(() => { /* nettoyage */ })

Détails : Slots, watch et cycle de vie.

Composables

src/composables/usePortions.js

export function usePortions(depart = 4) {
  const portions = ref(depart)
  return { portions }
}

Le nom commence par use.
On renvoie un objet ordinaire de refs.
Chaque appel crée un état indépendant.

Détails : Les composables.

Sources officielles

Documentation officielle de Vue (en français)

Ensuite

Ton premier composant Vue

Créer un projet Vue 3 avec l'outil officiel, découvrir le composant monofichier .vue et la syntaxe script setup.

Projet: Lignes de code
Niveau: 4e étage
Appartement: Vue
Pièce: 7/7
Plan n°: vue/index