Aller au contenu

Intro à Vue.js

Vue (prononciation: View) est un framework JavaScript progressif utilisé pour construire des interfaces utilisateur. Il est conçu pour être adaptable et peut être intégré dans des projets existants ou utilisé pour créer des applications web complètes.

Vue: version 3

Attention, dans le cadre de ce cours vous allez apprendre la version 3 de Vue.js. Assurez vous toujours de vérifier la version lorsque vous cherchez de la documentation ou des réponses à vos questions.

Nous utiliserons Options API

Il existe 2 styles d'API pour coder en VUE.js: Options API et Composition API. Donc si vous parcourez la documentation de VUE.js il est possible que vous tombiez sur l'un et l'autre, ne soyez pas intimidé.

Les deux styles d'API sont tout à fait capables de couvrir les cas d'utilisation courants. Il s'agit d'interfaces différentes alimentées par le même système sous-jacent. En fait, l'Options API est mise en œuvre au-dessus de la Composition API ! Les concepts fondamentaux sont partagés entre les deux styles et ils sont équivalents.

Dans le cadre de ce cours, nous utiliserons le style Options API. Plus d'info ici.

Dans la documentation Vue, en haut à gauche sous Préférence d'API, assurez-vous de toujours activer Options.

Bouton à bascule pour activer Options API dans la documentation Vue.js

Installation

Comme pour toute librairie, afin d'avoir accès à ses fonctionnalités, il est nécessaire de l'inclure dans notre projet.

Pour ce faire, il est possible :

Quoi utiliser pour le moment?

En début de session, nous allons commencer avec l'utilisation du CDN (Content Delivery Network) plutôt que le NPM. Nous reviendrons sur la méthode NPM un peu plus tard.

Installer Vue avec CDN

Suivre ce lien pour récupérer la balise script à copier et à ajouter à votre page HTML. Collez-le en bas, juste avant la fermeture de la balise body mais AVANT le fichier script.js dans lequel vous allez créer votre instance Vue et coder par la suite.

Installer Vue avec la commande NPM

Pour utiliser la NPM pour ajouter le paquet Vue.js et l'installer dans votre projet, tapper la ligne de commande suivante: npm install vue

NPM et Node.js

Avant d'aller plus loin si vous décidez d'utiliser NPM, assurez-vous d'abord d'avoir préalablement installé NodeJS et NPM.

Voir les liens suivant pour vérifier si Node.js est installé et si NPM est installé.

  1. Ouvrez votre terminal (vous pouvez utiliser celui de Visual Studio Code)
  2. Exécutez la commande suivante : npm install vue

Concepts de base

Une fois installé, vous pouvez commencer à explorer les concepts de base de Vue.js :

  • Instance Vue : La base de toute application Vue.js est une instance Vue.
  • La syntaxe de templates : Utilisez des templates pour lier des données à l'interface utilisateur.
  • Directives : Les directives sont des attributs spéciaux dans Vue.js qui permettent de manipuler le DOM (bref le HTML et son contenu).
  • Composantes/Components : Les composants sont des blocs réutilisables de code qui peuvent être utilisés pour construire des interfaces complexes.

Ressources supplémentaires

Voici quelques ressources utiles :

Alternatives à Vue.js