Accueil

Traduction

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

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

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 :

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.

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

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)

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).

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)

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

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

Consignes

Je vous ai communiqué le HTML.

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)

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).

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 :

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