Découverte de Vue.js

4min
il y a 1 an
Télécharger la vidéo
Résumé Support

Vue.js est un framework JavaScript progressif, conçu pour construire des interfaces utilisateur. Vue.js est conçu comme une amélioration de l'HTML permettant de créer des interfaces réactives plus simplement à l'aide d'attributs spéciaux.

Pourquoi un framework ?

Quand on crée une interface complexe il est souvent difficile de maintenir l'interface (le DOM) synchronisé avec l'état du système.

class TodoList { todos = [] element = null constructor (element) { this.element = element } addItem (name) { this.todos.push(name) const li = document.createElement('li') const a = document.createElement('a') a.innerText = 'Supprimer' li.appendChild(a) a.addEventListener('click', () => this.remove(name)) this.element.appendChild(li) } removeItem (name) { this.todos = this.todos.filter(t => t !== name) // Il faut aussi mettre à jour le DOM } editItem (index, name) { this.todos[index] = name // Il faut aussi } }

On le voit ici, à chaque modification de la liste des tâches, il faut mettre à jour le DOM.

Vue.js utilise un système de template qui va permettre de décrire la structure HTML attendue. Cette structure se mettra à jour automatiquement lorsque l'état change.

<div> <h1>Ma liste de tâche à faire</h1> <ul> <li v-for="todo in todos" :key="todo"> {{ todo }} <button type="button" @click="removeItem(todo)"> Supprimer </button> </li> </ul> </div>

Pourquoi Vue.js

Il existe aujourd'hui plusieurs framework et on peut se demander pourquoi utiliser Vue.js plutôt qu'un autre framework.

  • Simple à prendre en main, son approche pensée comme de l'HTML améliorée permet une prise en main rapide.
  • Gestion des transitions, Vue.js intègre un système de transition qui permet de gérer facilement l'apparition et la disparition d'élément.
  • Un écosystème conséquent permet de trouver de nombreuses librairies pour accélérer le développement.
  • De bonnes performances obtenues gràce à l'utilisation d'un compiler.

Prérequis

Pour suivre cette formation dans de bonnes conditions il est impératif que vous soyez à l'aise avec le JavaScript. Plus spécifiquement avec les notions suivantes:

  • Manipulation des données (map, filter et reduce)
  • La portée des variables
  • Les fonctions fléchés