Introduction à Vue.js

Vue.js (ou "Vue" tout simplement) est un framework JavaScript "front-end" qui permet la manipulation automatique du DOM en liant des éléments HTML de la page à des données JS. Toute modification de ces données est automatiquement répercutée dans la page et vice-versa.
En JS natif (et aussi en jQuery) nous devons écrire comment connecter HTML et le script. Avec Vue.js, nous devons simplement nous assurer qu'il y une connexion et le framework s'occupe du reste ...
Vue a été créé par Evan You qui fait évoluer l'outil grâce à une commmunauté active.
Vue permet de créer des applications SPA (Single Page Application) comme Angular.js & React.js qui sont des frameworks concurrents mais aussi très proches dans leur fonctionnement.

Installation de Vue.js

version de développement (plus de 400 KO)
version de production (100 KO environ)

Pour récupérer ces deux versions de vue.js il suffit de se rendre sur le site officiel de vue.js

En supposant que vous ayez nommé la version de production "vue.min.js" et la version de développement "vue.js" et que ces deux fichiers sont présents physiquement dans le même repertoire que la page web, il suffit donc d'écrire dans la partie HEAD l'instruction : <script src = "vue.min.js" </script> OU <script src = "vue.js" </script>

Si vous êtes assuré de disposer d'une connextion internet, vous pouvez charger l'une ou l'autre des versions à partir d'un CDN (Content Delivry NetWork)qui délivrera les versions les plus récentes du framework. Version de développement qui offre des fonctionnalités de débogage : <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> Version production. celle-ci est optimisée pour la taille et la vitesse <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Donc le chemin vers la version de production est plus court.
Dès que votre code est correct, la page web doit télécharger la version de production (plus lègère donc plus rapide à charger).

Premiers pas avec Vue.js

Les prérequis

HTML
CSS
JS natif

Si vous aviez l'habitude de développer avec jQuery, vous risquez d'être un peu dérouté au départ. Avec ces nouveaux frameworks la démarche est totalement différente.
Le script se résume en général à peu de choses. Par contre dans le HTML vous faites référence à des variables, créer des tests et des boucles, etc ; vous manipulez un HTML enrichi qui devient un véritable langage de programmation.
Le HTML devient réactif !

Exemple 1

Le code de la page (extrait)

...
<script src="vue.min.js"></script>
<style>
	div {height : 200px ; width: 60%; margin : 20px auto; background : yellow; overflow : auto; }
</style>
</head>
<body>
<div id ="info" >
	<h4> {{titre}}</h4>
</div>
<script>
const app = new Vue({
	el: "#info",
	data: {titre : "Première page gérée par Vue"}
}); 
</script>
...

Analyse du code

HTML :

< script src="vue.min.js"></script> : chargement de la version minimaliste du framework (fichier .js dans le même dossier que la page web.

La boite DIV est identifiée "info". Elle contient une balise titre H4 avec la syntaxe "moustache" : {{titre}} qui signifie afficher le contenu de la variable "titre" dans cette balise.

JS :

On crée une instance de Vue avec le constructeur Vue() ; Cette instance de Vue est nommée "app" (vous l'appelez comme vous voulez).

el: "#info" : l'instance de Vue est montée pour le bloc identifié "info".
data qui contient la liste des variables à utiliser dans le DOM. Ici il n'y en a qu'une : "titre".

On a créé une connexion entre HTML et le script via titre. Toute modificaton de la donnée "titre" sera répercutuée automatiquement dans l'affichage de la page ; le HTML devient réactif.

Le rendu

Affichez la console du navigateur.
puis produisez la commande app.titre ="Vive Vue.js" et observez ...
Le contenu de la balise H4 a changé.

Exemple 2 : affichage d'une horloge

L'heure s'affiche puis elle est actualisée toutes les 5 secondes gràce à la méthode setInterval() qui permet d'appeler une fonction à intervalle régulier.

Le code de la page (extrait)

...
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
	div {height : 300px ; width: 60%; margin : 20px auto; background : yellow; overflow : auto; }
</style>
</head>
<body>
<div id="info">
  <h2>Il est exactement :  {{ horloge }}</h2>
</div>

<script>
var app = new Vue({
    el: "#info",
    data: {horloge: 0}  
  });

setInterval(function() {
    heure = new Date();  
    app.horloge = heure.toLocaleTimeString(); 
  },1000); 
</script>
...

HTML :
Chargement du framework Vue.js à partit d'un CDN.
La balise H2 de la boite DIV#info fait référence à la variable horloge

JS :

Attention il y a dans le script une instance de Vue puis une instruction en JS natif.
Dans l'instance de Vue nommée "app" j'indique horloge : 0
La méthode setInterval() appelle toutes les 5 secondes une fonction qui actualise "app.horloge" avec l'heure dans un format francophone (HH:MM:SS).

Le rendu

Observez quelques secondes la page : actualisation de l'heure à chaque seconde.

Affichez la console du navigateur..
Vous pouvez lire le message suivant :
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
...
Traduction : vous utilisez la version de développement du framework et lorsque ce code sera mis en ligne, il sera préférable d'utiliser la version de production.

Exemple 3 - à vous de bosser !

Le rendu de la page

Chaque seconde le compteur est incrémenté de 1.

Extrait du code HTML

...
<body>
<div id="info">
  <h2>Le compteur vaut :  {{ compteur }}</h2>
</div>
<script>
...

compteur référence donc une donnée de la vue ; donnée initialisée à zéro.

Consignes

Je vous ai communiqué le HTML.

une instance de Vue nommée "app".
une instruction basée sur la méthode setInterval() pour actualiser l'affichage chaque seconde.

Je rappelle que pour incrémenter de 1, la syntaxe simplifiée est : compteur++
Donc la fonction de callback dans setInterval() est très simple et tiens en une seule instruction !

Si vous n'avez pas trouvé allez à la fin du chapitre.

Exemple 4

Une donnée de l'instance peut contenir du code HTML !

Le code de la page (extrait)

...
<script src ="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
	div {height : 300px ; width: 60%; margin : 20px auto; background : yellow; overflow : auto; }
	.important {background : black ; color : white; }
</style>
</head>
<body>
<div id ="info" >
	<h2> {{titre}}</h2>
	<h2 v-html ="titre"></h2>
</div>
<script>
// utilisation de la directive v-html qui permet d'interpréter  du code HTML inséré dans une variable 
var  app = new Vue({
	el: "#info",
	data: {titre : "<span class ='important'> Titre mis en forme</span>"}
}); 
</script>
...

CSS & HTML :
Dans la feuille de style interne : une classe nommée "important".
Je charge à partir d'un CDN la version de production (ou version minimaliste).

titre

Première syntaxe : <h2> {{titre}}</h2>
Deuxième syntaxe : <h2 v-html ="titre"></h2>

JS :
La variable titre contient du texte et code HTML.

Le rendu

L'affichage de la donnée 'titre' avec la syntaxe 'moustache' n'est pas ici satisfaisante à cause du balisage HTML qu'elle contient.
Dans ce cas il faut afficher via la directive v-html qui interprète le balisage HTML.

Affichez la console du navigateur : plus aucun message d'avertissement car j'ai utilisé la version de production.

Remarques

Il existe de nombreuses autres directives que je vais traiter dans le chapitre suivant.

Correction de l'exemple 3

Le script : var app = new Vue({ el: "#info", data: {compteur: 0} }); setInterval(function() {app.compteur++; },1000);

La dernière instruction est exécuté chaque seconde.

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Introduction à Vue.js

Installation de Vue.js

Premiers pas avec Vue.js

Les prérequis

Exemple 1

Le code de la page (extrait)

Analyse du code

Le rendu

Exemple 2 : affichage d'une horloge

Le code de la page (extrait)

Le rendu

Exemple 3 - à vous de bosser !

Le rendu de la page

Extrait du code HTML

Consignes

Exemple 4

Le code de la page (extrait)

Le rendu

Remarques

Correction de l'exemple 3