Vue Cheatsheet

Voici la cheatsheet exhaustive en français pour Vue.js :

Bases & syntaxe

Installation

npm install -g @vue/cli

Installe Vue CLI globallement pour créer des projets rapidement.

Création d'un nouveau projet

vue create mon-projet

Crée un nouveau projet Vue.js interactivement ou avec des options spécifiques.

Structure de base d'un composant

<template>
  <div class="mon-composant">
    <!-- Template HTML -->
  </div>
</template>

<script>
export default {
  name: 'MonComposant',
  data() {
    return {
      message: 'Bonjour Vue!'
    }
  },
  methods: {
    handleClick() {
      alert(this.message);
    }
  }
}
</script>

<style scoped>
.mon-composant {
  /* Styles spécifiques au composant */
}
</style>

Structure complète d'un composant Vue.js.

Structures de données

Tableaux (Array)

const items = ['item1', 'item2', 'item3'];
items.push('item4');
console.log(items); // ['item1', 'item2', 'item3', 'item4']

Manipulation de tableaux en JavaScript.

Objets (Object)

const user = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York'
  }
};
user.address.country = 'USA';
console.log(user); // { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } }

Manipulation d'objets en JavaScript.

Destructuring

const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 25

Destructuration d'objets pour extraire des valeurs.

Fonctions & methodes essentielles

Méthodes de base (Computed properties)

<template>
  <div>fullName</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}
</script>

Utilisation de propriétés calculées.

Méthodes asynchrones (async/await)

methods: {
  async fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  }
}

Gestion d'appels API asynchrones avec async/await.

Patterns courants

Composition API

<template>
  <div>message</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('Hello Vue with Composition API');

onMounted(() => {
  console.log(message.value);
});
</script>

Utilisation du Composition API pour une meilleure structure de code.

Routers

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

const routes = [
  { path: '/', component: Home },
  // autres routes
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Configuration des routes avec Vue Router.

Opérations avancées

Directives personnalisées

Vue.directive('focus', {
  inserted(el) {
    el.focus();
  }
});

Création d'une directive personnalisée pour mettre le focus sur un élément.

Filters (non officiels)

<template>
  <div>message | capitalize</div>
</template>

<script>
filters: {
  capitalize(value) {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}
</script>

Utilisation de filtres pour transformer des données.

Debugging & outils

Vue Devtools

<div id="app">
  <!-- Mon application -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-devtools@3.10.0/dist/vue_devtools_bg.js"></script>

Installation et utilisation de Vue Devtools pour le débogage.

Logique conditionnelle

<template>
  <div v-if="isVisible">Mon contenu</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

Affichage conditionnel de contenu avec v-if.

Réactiveité

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Reactive!'
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`);
    }
  }
});

Utilisation de la réactivité dans Vue.

V-bind (binding)

<template>
  <img :src="imageSrc" alt="Description">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    }
  }
}
</script>

Utilisation de v-bind pour lier des propriétés.

V-for

<template>
  <ul>
    <li v-for="item in items" :key="item.id">item.name</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}
</script>

Utilisation de v-for pour itérer sur des tableaux.

Events

<template>
  <button @click="handleClick">Cliquez-moi</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Bouton cliqué!');
    }
  }
}
</script>

Gestion d'événements avec @click.

Slots

<template>
  <div class="card">
    <slot name="header">En-tête par défaut</slot>
    <slot></slot>
    <slot name="footer">Pied de page par défaut</slot>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

Utilisation de slots pour rendre les composants plus flexibles.

Provide & Inject

// Parent.vue
provide() {
  return {
    user: this.user
  }
}

// Child.vue
inject: ['user']

Communication entre composants non liés avec provide et inject.