VueJS

Qu'est-ce que "Vue JS" ?

VueJS est un Framework Javascript qui permet de développer des “Single Page Applications”, des applications faites avec du responsive Javascript permettant de fonctionner sans recharger la page à chaque interaction (principalement avec des appels AJAX). Cela permet aux utilisateurs d’être sur une application fluide, moderne et très agréable. Ce Framework permet de gérer une application sous forme d’objet avec des attributs, ce qui va grandement faciliter la vie pour réaliser des composants Javascript.

Evan You, ancien employé de Google travaillant sur AngularJS, s’est décidé en 2014 de créer son propre Framework javascript nommé VueJS. Celui-ci permettra de faire du ReactiveJS mais de façon beaucoup plus simple pour les développeurs. VueJS est le projet de GitHub qui a récemment été présenté comme le projet étant le projet open source le plus populaire surpassant au passage Angular2, BackboneJS ou encore jQuery.

Comment ça marche ?

Afin de visualiser son fonctionnement, je vais créer un fichier index.html et y intégrer VueJS :


Au sein de Vue.js, un système va permettre de faire le rendu des données dans le DOM en utilisant simplement la syntaxe ci-dessous :



L'attribut "message" créé dans la vue sera affiché grâce à la balise {{ message }}.
Sur la page index.html, nous pouvons donc apercevoir ceci :


En plus de l’interpolation de texte, VueJS va plus loin et permet également de lier les attributs d’un élément. Pour cela, créons une nouvelle div avec en id « app-2 ».

Lier cette div à une nouvelle Vue qui récupèrera l’id « app-2 » créée précédemment sur la div ci-dessus.

Tester le code :
Passez votre souris pour voir le contenu

Lors du passage de la souris sur le message de la div créée, le message de notre Vue s’affichera ainsi que la date et l’heure à laquelle nous avons ouvert cette page.
Désormais, afin de tester le dynamiste de VueJS, nous allons modifier un texte sans avoir à y recharger la page ! Pour cela, nous allons créer un paragraphe ainsi qu’un input. La valeur de l’input sera également le message affiché, dès lors d’une modification de l’input, le message changera automatiquement.

Voici le rendu :



Conclusion

En bref, VueJS nous permet de nous faciliter la tâche, rendre dynamique et agréable notre application. La syntaxe est claire et semblable à plusieurs langages. De nombreuses fonctionnalités non montrées dans cette veille sont bien évidemment disponibles comme les « If », les « For », les listes… Pour ma part, VueJS est aussi bien adapté pour les expérimentés que pour les débutants en codage. Les Frameworks comme VueJS sur une application sont de mon point de vue, le futur des applications.