Vue.js

Un framework JavaScript progressif pour créer des interfaces utilisateur modernes, interactives et facilement maintenables.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce que Vue.js ?

Vue.js est un framework JavaScript flexible qui permet de construire des interfaces utilisateur interactives et dynamiques pour les sites et applications web modernes.

Imaginez Vue.js comme un jeu de construction pour sites web: il vous fournit toutes les pièces nécessaires pour assembler rapidement des interfaces sophistiquées, sans avoir à repartir de zéro à chaque fois.

Pourquoi Vue.js est-il si apprécié ?

Simplicité d'apprentissage

Avec Vue.js, même les développeurs débutants peuvent créer rapidement des interfaces interactives grâce à sa syntaxe intuitive et sa documentation claire.

Progressivité

Vue peut s'intégrer progressivement à un projet existant ou être utilisé pour créer des applications complètes selon vos besoins.

Pour les propriétaires d'entreprises et chefs de produit, Vue.js signifie des interfaces utilisateur de meilleure qualité, développées plus rapidement et facilement maintenables sur le long terme, ce qui se traduit par une meilleure expérience pour vos clients et des coûts de développement réduits.

En résumé, Vue.js trouve le parfait équilibre entre simplicité et puissance, permettant de créer des sites web modernes et interactifs sans sacrifier la performance ou l'expérience développeur.

Pour les développeurs

Architecture technique

Vue.js est un framework JavaScript MVVM (Model-View-ViewModel) avec une architecture basée sur des composants réactifs, et un système de réactivité efficace qui détecte automatiquement les changements d'état pour mettre à jour le DOM.

Les concepts fondamentaux

Single File Components (SFC)

Les composants Vue.js peuvent être définis dans des fichiers .vue uniques qui encapsulent le template HTML, la logique JavaScript et les styles CSS dans un seul fichier, ce qui favorise la modularité et la maintenabilité.

Système de directives

Vue.js utilise des directives spéciales préfixées par "v-" pour ajouter des comportements dynamiques aux éléments HTML. Les directives principales incluent v-if, v-for, v-bind, v-on et v-model.

Exemples de directives Vue

<!-- v-if pour affichage conditionnel -->
<div v-if="isLoggedIn">
  Bienvenue, {{ username }} !
</div>
<div v-else>
  Veuillez vous connecter
</div>

<!-- v-for pour lister des éléments -->
<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index + 1 }}. {{ item.name }}
  </li>
</ul>

<!-- v-on pour écouter des événements -->
<button v-on:click="handleClick">Cliquez ici</button>
<!-- ou forme abrégée -->
<button @click="handleClick">Cliquez ici</button>

<!-- v-bind pour lier des attributs -->
<img v-bind:src="imageUrl" :alt="imageAlt">
<!-- ou forme abrégée -->
<img :src="imageUrl" :alt="imageAlt">

<!-- v-model pour la liaison de données bidirectionnelle -->
<input v-model="message" placeholder="Modifiez-moi">
<p>Le message est: {{ message }}</p>

Options API vs Composition API

Vue 3 propose deux styles d'API pour définir des composants: l'Options API traditionnelle et la Composition API qui offre plus de flexibilité pour la réutilisation de la logique et une meilleure organisation du code dans les composants complexes.

Écosystème

Vue est accompagné d'une suite d'outils officiels qui facilitent le développement d'applications complètes:

Vue Router: routage client-side pour applications monopages
Vuex / Pinia: gestion d'état centralisée
Vue CLI: outil de scaffolding pour démarrer rapidement des projets
Vue DevTools: extension pour navigateur pour le débogage
Vite: outil de build ultra-rapide qui remplace webpack

Exemples de code

Composant Todo List avec Options API

TodoList.vue (Options API)

<template>
  <div class="todo-list">
    <h1>{{ title }}</h1>
    
    <div class="create-todo">
      <input 
        v-model="newTodo" 
        type="text" 
        placeholder="Ajouter une tâche" 
        @keyup.enter="addTodo"
      />
      <button @click="addTodo" :disabled="!newTodo.trim()">
        Ajouter
      </button>
    </div>
    
    <ul class="todos">
      <li 
        v-for="(todo, index) in todos" 
        :key="todo.id"
        :class="{ completed: todo.completed }"
      >
        <input 
          type="checkbox" 
          v-model="todo.completed"
        />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(index)" class="remove">×</button>
      </li>
    </ul>
    
    <div class="footer" v-if="todos.length > 0">
      <span>{{ remainingTodos }} tâches restantes</span>
      <button @click="clearCompleted" v-if="completedTodos > 0">
        Supprimer les tâches terminées
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TodoList',
  
  data() {
    return {
      title: 'Ma liste de tâches',
      newTodo: '',
      todos: []
    }
  },
  
  computed: {
    remainingTodos() {
      return this.todos.filter(todo => !todo.completed).length
    },
    
    completedTodos() {
      return this.todos.filter(todo => todo.completed).length
    }
  },
  
  methods: {
    addTodo() {
      if (!this.newTodo.trim()) return
      
      this.todos.push({
        id: Date.now(),
        text: this.newTodo,
        completed: false
      })
      
      this.newTodo = ''
    },
    
    removeTodo(index) {
      this.todos.splice(index, 1)
    },
    
    clearCompleted() {
      this.todos = this.todos.filter(todo => !todo.completed)
    }
  }
}
</script>

<style scoped>
.todo-list {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.create-todo {
  display: flex;
  margin-bottom: 20px;
}

input[type="text"] {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}

button {
  background: #42b883;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

button:disabled {
  background: #ccc;
}

.todos {
  list-style: none;
  padding: 0;
}

.todos li {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.todos li.completed span {
  text-decoration: line-through;
  color: #888;
}

.todos li span {
  flex-grow: 1;
  margin: 0 10px;
}

button.remove {
  background: none;
  color: #ff6b6b;
  font-size: 18px;
  border-radius: 4px;
  padding: 2px 8px;
}

.footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
}
</style>

Le même composant avec Composition API

TodoList.vue (Composition API)

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

// État réactif
const title = ref('Ma liste de tâches')
const newTodo = ref('')
const todos = ref([])

// Propriétés calculées
const remainingTodos = computed(() => {
  return todos.value.filter(todo => !todo.completed).length
})

const completedTodos = computed(() => {
  return todos.value.filter(todo => todo.completed).length
})

// Méthodes
function addTodo() {
  if (!newTodo.value.trim()) return
  
  todos.value.push({
    id: Date.now(),
    text: newTodo.value,
    completed: false
  })
  
  newTodo.value = ''
}

function removeTodo(index) {
  todos.value.splice(index, 1)
}

function clearCompleted() {
  todos.value = todos.value.filter(todo => !todo.completed)
}
</script>

<template>
  <div class="todo-list">
    <h1>{{ title }}</h1>
    
    <div class="create-todo">
      <input 
        v-model="newTodo" 
        type="text" 
        placeholder="Ajouter une tâche" 
        @keyup.enter="addTodo"
      />
      <button @click="addTodo" :disabled="!newTodo.trim()">
        Ajouter
      </button>
    </div>
    
    <ul class="todos">
      <li 
        v-for="(todo, index) in todos" 
        :key="todo.id"
        :class="{ completed: todo.completed }"
      >
        <input 
          type="checkbox" 
          v-model="todo.completed"
        />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(index)" class="remove">×</button>
      </li>
    </ul>
    
    <div class="footer" v-if="todos.length > 0">
      <span>{{ remainingTodos }} tâches restantes</span>
      <button @click="clearCompleted" v-if="completedTodos > 0">
        Supprimer les tâches terminées
      </button>
    </div>
  </div>
</template>

Avantages techniques

Système de réactivité performant avec détection fine des changements
Virtual DOM optimisé qui réduit les manipulations DOM coûteuses
Rendu déclaratif pour une logique plus prévisible et facile à déboguer
Courbe d'apprentissage douce permettant une adoption progressive
Support natif de TypeScript pour un typage statique robuste
Architecture adaptable pour les petits composants comme les applications complètes

Applications concrètes

Cas d'usage

Applications monopages (SPA)

Applications web interactives avec navigation fluide et expérience utilisateur continue, idéales pour les tableaux de bord et outils internes. Souvent utilisées avec REST API pour récupérer les données.

Amélioration progressive

Intégration de fonctionnalités interactives dans des sites existants en utilisant Vue pour des composants spécifiques sans réécrire l'ensemble du site.

Applications administratives

Interfaces administratives complexes avec formulaires dynamiques, tableaux de données interactifs et visualisations en temps réel.

Prototypage rapide

Développement accéléré de MVP (Minimum Viable Products) grâce à la simplicité et l'efficacité de Vue, permettant des itérations rapides basées sur les retours utilisateurs.