Vue JS : Comprendre Le Framework Javascript Qui Vous Veut Du Bien

Home » Apprendre Vue.js » Vue JS : Comprendre Le Framework Javascript Qui Vous Veut Du Bien

Maybe your like

1Qu’est-ce que Vue.js ?

2Les concepts de base de Vue.js

2.1Rendu déclaratif et réactivité

2.2Interactions utilisateur

2.3Boucles et conditions

3Les composants en Vue.js

4VueJS et maintenabilité du code

5Conclusion : VueJS, une technologie en perpétuelle évolution !

Icone sommaireIcone fermer sommaireIcone podcastIcone fermer podcast

Accueil

SmallArrow

Blog

SmallArrow

Article

framework vuejs baseslogo Axopen

18+

annéesd'expérience

60+

expertstechniques

150K

écoutes de notre podcastVue JS : comprendre le framework Javascript qui vous veut du bien !

Présentation des concepts de base du framework Javascript Vue.jsFramework JavaScript populaire.

Hugo JAHNKEMis à jour le 24 Janv 2024

Qu’est-ce que Vue.js ?

Vue.js (aussi appelé plus simplement Vue), est un framework JavaScript open-source utilisé pour construire des interfaces utilisateur et des applications web monopages (SPA). Vue a été créé par Evan You et est maintenu par lui-même, et le reste des membres actifs de l’équipe principale travaillant sur le projet et son écosystème.

Dans cet article, nous allons parler des concepts de base et des avantages qu’offre Vue. C’est parti !

Les concepts de base de Vue.js

Afin de développer des applications avec Vue, nous pouvons nous appuyer sur les fonctionnalités principales du framework.

Rendu déclaratif et réactivité

Pouvant être également trouvé dans d’autres frameworks/librairies, le rendu déclaratif est un système permettant d’insérer de la donnée de façon déclarative au sein du DOM à l’aide d’une syntaxe de template.

<body> <div id="compteur"> Compteur : {{ compteur }} </div> <script> const Compteur = { data() { return { compteur: 0 } } } Vue.createApp(Compteur).mount(’#compteur’) </script> </body>

Dans cet exemple, on vient injecter la valeur de la propriété compteur au sein d’un élément HTMLHTML (HyperText Markup Language) est un langage permettant de décrire le découpage d'une page web.. Mais ce n’est pas tout, car en arrière-plan Vue a créé un lien entre la propriété compteur et le DOM. Ainsi, dès lors que la valeur de la propriété compteur sera modifiée, le DOM sera rafraîchi, c’est ce qu’on appelle la réactivité.

Le rendu déclaratif n’est cependant pas limité au contenu des éléments HTML, il est également possible de lier des propriétés JavaScriptLangage de scripting orienté objet avec les attributs des éléments HTML à l’aide de la directive v-bind :

<body> <div id="bind-attribut"> <a v-bind:href="lien">Axopen</a> </div> <script> const BindAttribut = { data() { return { lien: "https://www.axopen.com" } } } Vue.createApp(BindAttribut).mount(’#bind-attribut’) </script> </body>

VueJS propose de nombreuses directives qui permettent de contrôler le comportement du DOM, nous en verrons d’autres plus tard.

En plus d’illustrer le concept de rendu déclaratif et de réactivité, les exemples ci-dessus permettent de présenter la manière de créer une application avec Vue.

En effet, Vue.createApp(Compteur).mount(’#compteur’) et Vue.createApp(BindAttribut).mount(’#bind-attribut’) permettent de créer une instance de Vue à partir des objets Compteur et BindAttribut et de la lier à un élément HTML portant respectivement l’id compteur et bind-attribut.

Interactions utilisateur

Pour permettre aux utilisateurs d’interagir avec notre application, il est possible d’utiliser la directive v-on afin de réagir à différents évènements :

<body> <div id="reaction-evenement"> <p>{{ message }}</p> <button v-on:click="inverserMessage">Inverser le message</button> </div> <script> const ReactionEvenement = { data() { return { message: ’Hello Vue.js!’ } }, methods: { inverserMessage() { this.message = this.message .split(’’) .reverse() .join(’’) } } } Vue.createApp(ReactionEvenement).mount(’#reaction-evenement’) </script> </body>

Dans l’exemple ci-dessus, lorsque l’utilisateur clique sur le bouton, la méthode inverserMessage est appelée afin d’inverser la chaîne de caractères contenue dans la propriété message, et grâce au système de réactivité, le DOM est automatiquement mis à jour sans que nous ayons à faire quoi que ce soit d’autre.

Vue.Js fournit également la directive v-model qui permet de créer une liaison bidirectionnelle (two-way binding) entre une propriété JavaScript et un élément de type input :

<body> <div id="two-way-binding"> <p>{{ message }}</p> <input v-model="message" /> </div> <script> const TwoWayBinding = { data() { return { message: ’Hello Vue!’ } } } Vue.createApp(TwoWayBinding).mount(’#two-way-binding’) </script> </body>

Comprenez ici que lorsque l’utilisateur modifie la valeur de l’élément <input v-model="message" />, la valeur de la propriété message est automatiquement mise à jour.

Boucles et conditions

Afin de pouvoir contrôler au mieux la structure du DOM, les directives v-for et v-if permettent respectivement de répéter et d’afficher/masquer des éléments HTML :

<body> <div id="boucle"> <ol> <li v-for="todo in todos"> {{ todo.label }} </li> </ol> </div> <script> const Boucle = { data() { return { todos: [ { label: ’Apprendre JavaScript’ }, { label: ’Apprendre Vue’ }, { label: ’Développer une application géniale’ } ] } } } Vue.createApp(Boucle).mount(’#boucle’) </script> </body> <body> <div id="rendu-conditionnel"> <p v-if="visible">Vous me voyez</p> <button v-on:click="visible = !visible">{{ action }}</button> </div> <script> const RenduContionnel = { data() { return { visible: true } }, computed: { action() { return this.visible ? ’Masquer’ : ’Afficher’ } } } Vue.createApp(RenduContionnel).mount(’#rendu-conditionnel’) </script> </body>

Les composants en Vue.js

En plus des différentes fonctionnalités présentées précédemment, Vue propose un système de composants qui facilite le développement d’applications de grande envergure et qui permet également de structurer l’interface utilisateur en une arborescence de petits éléments indépendants et réutilisables. components.png

Un composant n’est ni plus ni moins qu’une instance de Vue avec des options prédéfinies.

Pour créer un composant, il suffit de créer une nouvelle application avec la méthode createApp() puis d’utiliser la méthode component() avant de monter l’application avec la méthode mount() :

<body> <div id="app"> <todo-item /> </div> <script> const app = Vue.createApp({}) app.component(’todo-item’, { template: `<li>Apprendre Vue</li>` }) app.mount(’#app’) </script> </body>

Ici, on utilise la méthode component() pour créer un nouveau composant que l’on pourra insérer à n’importe quel endroit de notre arborescence HTML grâce au sélecteur todo-item. Ce dernier sera alors remplacé par le template contenu dans la propriété template du composant.

Néanmoins, à chaque fois que l’on appellera ce composant, il affichera exactement la même chose, ce qui n’est pas très intéressant... Il est donc nécessaire d’apporter quelques modifications à notre composant afin de pouvoir lui transmettre des données :

app.component(’todo-item’, { props: [’todo’], template: `<li>{{ todo.label }}</li>` })

Il est désormais possible de passer une propriété todo à tous les composants todo-item à l’aide de la directive v-bind :

<body> <div id="app"> <todo-item v-for="todo in todos" v-bind:todo="todo" v-bind:key="todo.id" /> </div> <script> const app = Vue.createApp({ data() { return { todos: [ { id: 0, label: ’Apprendre JavaScript’ }, { id: 1, label: ’Apprendre Vue’ }, { id: 2, label: ’Développer une application géniale’ } ] } } }) app.component(’todo-item’, { props: [’todo’], template: `<li>{{ todo.label }}</li>` }) app.mount(’#app’) </script> </body>

En créant le composant todo-item, nous avons été en mesure d’éviter une potentielle redondance dans le code et nous possédons désormais un élément indépendant et réutilisable à n’importe quel endroit de notre application !

VueJS et maintenabilité du code

Les concepts de base présentés précédemment sont rapides à prendre en main et vous permettrons d’apprendre à manipuler le framework. Cependant, si vous souhaitez développer une application de grande envergure vous risquerez d’être confronté à un problème de maintenabilité du code, notamment dans la cadre d’un projet avec plusieurs autres développeurs.

Prenons l’exemple d’une application permettant de lister les répertoires d’un utilisateur, en ajoutant la possibilité de filtrer les résultats et d’en rechercher à l’aide d’un champ de texte. Notre composant pourrait alors ressembler à ceci :

export default { props: { utilisateur: { type: String, required: true } }, data () { return { repertoires: [], // 1 filtre: { ... }, // 3 recherche: ’’ // 2 } }, computed: { repertoiresCorresponsantFiltre() { ... }, // 3 repertoiresCorrespondantRecherche () { ... }, // 2 }, watch: { utilisateur: ’getRepertoiresUtilisateur’ // 1 }, methods: { getRepertoiresUtilisateur () { ... }, // 1 updateFilters () { ... }, // 3 }, mounted () { this.getRepertoiresUtilisateur() // 1 } }

Ce composant a alors plusieurs rôles :

  1. Récupérer les répertoires de l’utilisateur
  2. Effectuer une recherche plein texte pour filtrer la liste
  3. Filtrer la liste des répertoires de manière plus précise

En regardant la structure du composant, on peut remarquer que les différents morceaux de code liés à la logique de chacun des rôles du composant s’entremêlent. Cela peut donc rendre des composants difficiles à lire et à comprendre, en particulier pour les personnes qui ne les ont pas écrits.

Heureusement, la version 3 du framework VueJS sortie fin 2020 vient apporter une solution à ce problème : l’API de Composition.

Conclusion : VueJS, une technologie en perpétuelle évolution !

Comme nous avons pu le voir, Vue est simple à prendre en main et très agréable à utiliser. Ce n’est pas l'un des principaux framework JavaScript pour rien et est un choix complètement viable pour le démarrage d’un nouveau projet ou la migration progressive d’une application existante.

VueJS est une technologie qui ne cesse de s’améliorer en cherchant à combler toutes ses lacunes sans empiéter sur les performances ou l’expérience de développement.

javascriptwebvuejsdéveloppementframework

Nos podcasts en lien

AXOPEN_Podcast30_Carre_SecuriteAppliWeb.jpgSécurité des applications web : enjeux et bonnes pratiques back & frontlisten buttonÉcouter le podcastAXOPEN_Podcast28_Carre_BaseDeDonnees.jpgBases de données : Choix, Modélisation et Evolution !listen buttonÉcouter le podcast

Pour aller plus loin

EJB Singleton et javax. ejb. Concurrent Access Timeout Exception: JBAS014373

Il existe un mécanisme de lock sur les EJB permettant de verrouiller celui-ci. Cela permet de définir, quand le Bean est accessible pour traiter une requête.

Small right arrow

HaProxy: JBoss EAP 6.1 et MySql Réplication

Problème de perte de connexion avec Mysql avec l’utilisation de HAPROXY

Small right arrow

Optimisez vos jobs Talend pour la copie de table à table

L’ETL Talend permet de param&eacute;trer facilement la copie d’une table vers une autre ayant la m&ecirc;me structure.

Small right arrow

Envie de devenir un(e) membre de la AXOTeam ?

Découvrez notre univers tech et nos offres d'emplois !

Je postule

radioemptyXwhiteXupRightArrow

Nous suivre, nous écouter

LinkedinLogoYoutubeLogoApplePodcastLogoSpotifyLogoDeezerLogo

Notre équipe de techs à Lyon vous aide à faire évoluer votre SI, en développant des applications utiles et durables !

18+

ans d'experience

60+

experts techniques

150K

écoutes de notre podcast

[email protected]

04 82 53 26 44

La société

Qui sommes-nous?

Nos convictions techniques

Notre histoire

Vivre Axopen

Nos jobs

Nos engagements RSE

Digital factory

Nos ressources

Expertises

Web

Mobile

DevOps

Cloud

Architecture

Intégration IA & LLM

Secteurs d'activités

Assurances

Industrie

Santé

Energie

Métiers

Audit et Expertise

Centre de services informatique

Développement sur mesure

Pilotage & Gestion de projets

Maintenance & Evolutions

Réalisations

Jobs

Nos ressources

La News AXO

1 sujet IT décrypté tous les mois et sans langue de bois dans votre boite mail !

Je m'abonne

Le Podcast AXOPEN

Ecoutez nos experts techniques sur vos plateformes préférées !

Podcast expertise informatiqueLinkedinLogoYoutubeLogoApplePodcastLogoSpotifyLogoDeezerLogo

©2025 AXOPEN

235 Cours Lafayette - 69006 Lyon, France

Mentions légales

Tag » Apprendre Vue.js