1️⃣ C’est quoi Vue.js ?

👉 Vue.js est un framework JavaScript (open-source) pour construire des interfaces utilisateur (UI), surtout des Single Page Applications (SPA).

📌 Créé par Evan You
📌 Concurrent direct de Angular et React

Définition simple

Vue.js permet de créer des pages web dynamiques à partir de composants réutilisables.

2️⃣ À quoi sert Vue.js ?

Sans Vue.js :

HTML statique
JS compliqué (jQuery, DOM manuel)

Avec Vue.js :

Données ↔ Interface synchronisées automatiquement
Code structuré
Composants réutilisables

3️⃣ Pourquoi utiliser Vue.js ?

✅ Facile à apprendre
✅ Très léger
✅ Réactif (data binding)
✅ Composants clairs
✅ Idéal pour petits et gros projets

4️⃣ Vue.js fonctionne comment ?

Vue repose sur 3 concepts clés :

🔹 1. Réactivité

Quand les données changent, l’UI se met à jour automatiquement.

🔹 2. Composants

Chaque partie de l’écran est un composant.

🔹 3. Template HTML

HTML + directives (v-if, v-for, v-model…)

5️⃣ Exemple le plus simple (sans build, CDN)

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

<div id="app">
  <h2>{{ message }}</h2>
  <input v-model="message">
</div>

<script>
const { createApp } = Vue;

createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}).mount('#app');
</script>

</body>
</html>

Ce qui se passe

Tu tapes dans l’input
Le texte s’actualise automatiquement
➡️ Data Binding

6️⃣ Directives Vue essentielles

Directive	Rôle
`v-model`	Liaison bidirectionnelle
`v-if`	Condition
`v-for`	Boucle
`v-on` ou `@`	Événements
`v-bind` ou `:`	Attributs

Exemple `v-if`

<p v-if="isLogged">Bienvenue</p>

Exemple `v-for`

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

7️⃣ Exemple composant simple

const Hello = {
  template: `<h3>Hello {{ name }}</h3>`,
  props: ['name']
}

<hello name="Vue"></hello>

👉 Réutilisable partout

8️⃣ Vue.js vs Angular vs React (simple)

Vue	Angular	React
Facile	Complet	Flexible
Léger	Lourd	Moyen
Courbe douce	Raide	Moyenne
HTML proche	TS strict	JSX

9️⃣ Vue.js dans une vraie application

Exemple classique :

Frontend Vue.js
   ↓ API REST
Backend (.NET / Java / Node)
   ↓
Base de données

🔟 Exemple simple : Liste de clients

HTML

<div id="app">
  <ul>
    <li v-for="c in clients" :key="c.id">
      {{ c.name }}
    </li>
  </ul>
</div>

JS

createApp({
  data() {
    return {
      clients: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ]
    }
  }
}).mount('#app');

1️⃣1️⃣ Quand utiliser Vue.js ?

✅ SPA
✅ Dashboard
✅ Application métier
✅ Frontend d’API REST
✅ Remplacer jQuery

1️⃣2️⃣ Résumé à retenir

✔ Framework JS
✔ Basé sur composants
✔ Réactivité automatique
✔ Simple et puissant
✔ Alternative à Angular / React

1️⃣ Exemple simple Vue + API .NET
2️⃣ Différences Vue 2 vs Vue 3
3️⃣ Questions d’entretien Vue.js (avec réponses)

1️⃣ Exemple simple : Vue.js + API .NET

🎯 Objectif

Frontend Vue 3
Backend ASP.NET Core Web API
Afficher une liste de clients

🔹 Backend : ASP.NET Core API

Controller `ClientsController.cs`

[ApiController]
[Route("api/[controller]")]
public class ClientsController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        var clients = new[]
        {
            new { Id = 1, Name = "Alice" },
            new { Id = 2, Name = "Bob" }
        };

        return Ok(clients);
    }
}

CORS (Program.cs)

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowVue",
        p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
});

app.UseCors("AllowVue");

🔹 Frontend : Vue 3 (Composition API)

`App.vue`

<template>
  <h2>Clients</h2>
  <ul>
    <li v-for="c in clients" :key="c.id">
      {{ c.name }}
    </li>
  </ul>
</template>

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

const clients = ref([])

onMounted(async () => {
  const response = await fetch('https://localhost:5001/api/clients')
  clients.value = await response.json()
})
</script>

👉 Résultat :

Vue appelle l’API
Les données s’affichent automatiquement

🔹 Architecture classique

Vue.js (UI)
   ↓ HTTP
ASP.NET Core API
   ↓
Database

2️⃣ Différences Vue 2 vs Vue 3

🔹 Vue 2 (ancien modèle)

Options API (data, methods, computed)
Performance plus faible
Support limité à long terme

Exemple Vue 2

export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

🔹 Vue 3 (moderne – recommandé)

Nouveautés majeures

Vue 3	Détail
Composition API	Meilleure organisation
Performance	Plus rapide
TypeScript	Support natif
Tree-shaking	Bundle plus petit
Teleport	DOM flexible

Exemple Vue 3

import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++

🔹 Comparatif résumé

Critère	Vue 2	Vue 3
Performance	Moyenne	Excellente
TypeScript	Limité	Natif
Maintenance	Fin de vie	Long terme
API	Options	Composition

📌 Vue 3 est fortement recommandé

3️⃣ Questions d’entretien Vue.js (avec réponses)

❓ 1. Qu’est-ce que Vue.js ?

👉 Framework JS progressif pour créer des interfaces utilisateur basées sur des composants réactifs.

❓ 2. Différence entre `v-if` et `v-show` ?

v-if : ajoute/supprime du DOM
v-show : cache via CSS (display:none)

❓ 3. Qu’est-ce que le data binding ?

👉 Synchronisation automatique entre données JS et HTML.

❓ 4. `ref` vs `reactive` ?

ref → valeurs simples
reactive → objets

❓ 5. Lifecycle hooks importants ?

onMounted
onUpdated
onUnmounted

❓ 6. Comment communiquer entre composants ?

Parent → Enfant : props
Enfant → Parent : emit
Global : Pinia / Vuex

❓ 7. Vuex vs Pinia ?

Vuex : ancien, verbeux
Pinia : moderne, simple (recommandé)

❓ 8. Comment optimiser les performances ?

v-once
computed
Lazy loading
Key dans v-for

❓ 9. SPA vs MPA ?

SPA : une seule page (Vue)
MPA : plusieurs pages HTML

❓ 10. Vue vs Angular vs React ?

Vue : simple, intuitif
Angular : très structuré
React : flexible

🎯 Résumé rapide

✔ Vue 3 + API .NET = architecture moderne
✔ Vue 3 > Vue 2 (performance, TS, maintenabilité)
✔ Questions d’entretien centrées sur réactivité, composants, perf

jeudi 15 janvier 2026

Vue.js

1️⃣ C’est quoi Vue.js ?

Définition simple

2️⃣ À quoi sert Vue.js ?

3️⃣ Pourquoi utiliser Vue.js ?

4️⃣ Vue.js fonctionne comment ?

🔹 1. Réactivité

🔹 2. Composants

🔹 3. Template HTML

5️⃣ Exemple le plus simple (sans build, CDN)

HTML

Ce qui se passe

6️⃣ Directives Vue essentielles

Exemple v-if

Exemple v-for

7️⃣ Exemple composant simple

8️⃣ Vue.js vs Angular vs React (simple)

9️⃣ Vue.js dans une vraie application

🔟 Exemple simple : Liste de clients

HTML

JS

1️⃣1️⃣ Quand utiliser Vue.js ?

1️⃣2️⃣ Résumé à retenir

1️⃣ Exemple simple : Vue.js + API .NET

🎯 Objectif

🔹 Backend : ASP.NET Core API

Controller ClientsController.cs

CORS (Program.cs)

🔹 Frontend : Vue 3 (Composition API)

App.vue

🔹 Architecture classique

2️⃣ Différences Vue 2 vs Vue 3

🔹 Vue 2 (ancien modèle)

Exemple Vue 2

🔹 Vue 3 (moderne – recommandé)

Nouveautés majeures

Exemple Vue 3

🔹 Comparatif résumé

3️⃣ Questions d’entretien Vue.js (avec réponses)

❓ 1. Qu’est-ce que Vue.js ?

❓ 2. Différence entre v-if et v-show ?

❓ 3. Qu’est-ce que le data binding ?

❓ 4. ref vs reactive ?

❓ 5. Lifecycle hooks importants ?

❓ 6. Comment communiquer entre composants ?

❓ 7. Vuex vs Pinia ?

❓ 8. Comment optimiser les performances ?

❓ 9. SPA vs MPA ?

❓ 10. Vue vs Angular vs React ?

🎯 Résumé rapide

Aucun commentaire:

Enregistrer un commentaire

Exemple `v-if`

Exemple `v-for`

Controller `ClientsController.cs`

`App.vue`

❓ 2. Différence entre `v-if` et `v-show` ?

❓ 4. `ref` vs `reactive` ?