Vuejs est un framework JavaScript progressif, intuitif et performant pour le développement d’interfaces web interactives. Il s’intègre aisément dans des projets web avec d’autres librairies comme JQuery. Dans cette série d’articles, vous allez apprendre à mettre en œuvre la librairie vuejs et à la fin de cette formation, vous devriez être capable de développer des applications complexes. Les chapitres vont graduellement des thèmes simples vers des thèmes plus compliqués. Au début, nous utiliserons un lien pour inclure le script dans notre application. A la fin, nous utiliserons nodejs pour développer une application web mono page avec des outils avancés.
Ces articles sont destinés aux développeurs d’applications web qui cherchent une alternative à AngularJS ou à React. Vous apprendrez toutes les bases pour être autonomes.
Avant de commencer, il est important d’avoir des connaissances en HTML, CSS, et bien évidemment en JavaScript.
Avant de commencer, découvrons un peu les concepts de ce framework intuitif.
Exemple simple de Vuejs
Ces deux bouts de code devraient afficher le message “bonjour vuejs” dans votre navigateur.
code javascript
1 2 3 4 5 6 7 |
new Vue({ el: '#app', data: { msg: 'Bonjour Vuejs !' } }) |
Puis dans la partie html :
1 2 3 4 5 |
<div class="app"> <span class="mydiv"> {{ msg }} </span> </div> |
Comment ça marche?
Vue.js a une syntaxe de template assez trivial qui rappelle le mustache.js avec un système de double crochet. Dans le code javascript, l’élément el : #app indique à Vue.js de produire les interfaces dans l’élément DOM dont l’id est app. C’est pratiquement le seul élément dont l’identifiant est indispensable.
L’objet data est la variable dans laquelle les paramètres sont stockés en tableau. Dans notre exemple, la clé message est disponible dans le template HTML sous la forme de {{ message}}. A partir de là, Vue sait automatiquement faire le lien, de sorte que tout changement de la valeur du paramètre est automatiquement cascadé partout où ce paramètre est utilisé. Après les templates, découvrons les directives.
Les directives Vue.js
Les directives sont les attributs HTML5 des éléments du DOM préfixés par « v- ». Par exemple la directive v-model permet de faire la liaison bidirectionnelle entre les champs d’un formulaire et l’état d’un paramètre dans data. La directive v-if permet de faire un test conditionnel et cache l’élément si la condition est fausse. Voyons comment utiliser les directives pour traiter les événements.
Les évènements Vue.js
La directive v-on permet d’ écouter les événements du DOM afin d’exécuter des actions en javascript associées
1 2 3 |
<div id="app"> <button v-on:click="monActionClick">Click me!</button> </div> |
Voici un exemple d’action.
1 2 3 4 5 6 7 8 |
var app = new Vue({ el: '#app', methods: { monActionClick: function () { alert('Clic sur bouton!'); } } }) |
Comment ça marche? Dans le code du template div, la directive v-on:click permet d’exécuter monActionClick. Vous retrouvez cette action dans la liste des méthodes du code Javascript de la définition de l’instance de Vue. Un clic sur le bouton affiche l’alerte définie.
Conclusion
Dans cette introduction, vous avez découvert le framework JavaScript Vue.js et ses principaux concepts qui sont le système de template comme mustache, les directives et la gestion des événements.