🧠 Aide-mémoire Vue.js (Vue 3+)

Telechargement de base vide

⚙️ Installation

npm install vue
npm create vite@latest mon-projet -- --template vue
cd mon-projet
npm install
npm run dev
npm run build 

📆 Structure de base

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Bonjour Vue!')
</script>

<style scoped>
div { color: blue; }
</style>

🧹 Réactivité

import { ref, reactive } from 'vue'
const compteur = ref(0)
compteur.value++
const utilisateur = reactive({ nom: 'Marie', age: 30 })
utilisateur.age++

🎯 Directives

• Liaison d'attribut:v-bind :
• Liaison bi-directionnelle:v-model
• Affichage conditionnel: v-if v-else
• Boucle:v-for
• Événements:@ ou v-on
• Masque sans détruire:v-show
• Liaison CSS::class :style

🔹 Cycle de vie

onMounted(() => console.log('Monté'))
onUnmounted(() => console.log('Détruit'))

🛠️ Composants

// Parent.vue
<Enfant :msg="message" @envoyer="recoitMsg" />

// Enfant.vue
<template>
  <button @click="$emit('envoyer', 'Salut!')">Envoyer</button>
</template>

<script setup>
defineProps(['msg'])
</script>

🔁 Événements

<button @click="incrementer">Cliquez-moi</button>

<script setup>
const compteur = ref(0)
function incrementer() {
  compteur.value++
}
</script>

🧲 Computed & Watch

const nom = ref('Alice')
const nomMaj = computed(() => nom.value.toUpperCase())
watch(nom, (nouv, anc) => {
  console.log('Changement :', anc, '->', nouv)
})

🔧 Fonctions utiles

🛠️ Outils utiles

• Vue Devtools : debug navigateur
• Vite : serveur de dev rapide
• Pinia : store réactif moderne
• Vue Router : navigation SPA

🚀 Utilisation dans App.vue

          npm run serve npm
         install vue-router
        

<!-- App.vue -->
      <template>
        <Navigation :links="navLinks" />
      </template>
      
      <script>
      import Navigation from './Navigation.vue';
      
      export default {
        name: 'App',
        components: {
          Navigation
        },
        data() {
          return {
            navLinks: [
              { label: 'Accueil', href: '#home' },
              { label: 'Contact', href: '#contact' },
              { label: 'À propos', href: '#about' }
            ]
          }
        }
      }
      </script>

🌟 Exemple de navigation complète

<!-- MainLayout.vue -->
      <template>
        <div>
          <Navigation :links="navLinks" />
          <router-view />
        </div>
      </template>
      
      <script>
      import Navigation from './Navigation.vue';
      
      export default {
        name: 'MainLayout',
        components: {
          Navigation
        },
        data() {
          return {
            navLinks: [
              { label: 'Home', href: '/' },
              { label: 'About', href: '/about' },
              { label: 'Contact', href: '/contact' }
            ]
          }
        }
      }
      </script>