La création d’applications web dynamiques peut être complexe et fastidieuse.
Sans les bons outils, le développement devient long et sujet aux erreurs, rendant difficile l’implémentation de fonctionnalités interactives.
Vue.js 3 offre une solution simple et efficace pour développer des interfaces utilisateur réactives avec des fonctionnalités puissantes et flexibles.
Acquérez les compétences fondamentales pour créer des applications avec Vue JS 3!
Avant d’aller plus loin, il est essentiel de bien comprendre les bases de Vue 3. Cette version du framework JavaScript apporte de nombreuses améliorations et fonctionnalités parrapport à ses prédécesseurs.
Créer sa première instance Vue
Dans cet article, nous apprendrons comment créer une instance VueJS.
De base, créons un dossier contenant les fichiers index.html, style.css, script.js dans votre éditeur de texte.
Le fichier index.html contient:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 Initiation</title>
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpah1/css/b"> -->
<link rel="stylesheet" href="style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-ec9fc5c0-11cf-4752-85b7-2d079ca56e94: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-ec9fc5c0-11cf-4752-85b7-2d079ca56e94: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"ec9fc5c0-11cf-4752-85b7-2d079ca56e94","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="container main" id="app">
<h1>Vue3 initiation</h1>//le contenu affiché sur la page
</div>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"a38001b5a8","url":"https:\/\/blog.alphorm.com\/decouvrir-vue-js-3-fonctionnalites-cles","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
<script src="https://unpkg.com/vue@3" data-rocket-defer defer></script>//inclut la bibliothèque VueJs 3 depuis un CDN
<script src="script.js" data-rocket-defer defer></script>//qui lie un fichier javascript local appel « script.js » pour ajouter des fonctionnalités à la page.
</html>
const application ={
}
Vue.createApp(application).mount('#app');// Vue.createApp(application):crée une nouvelle instance de l’application Vue en utilisant l’objet application
//mount(‘#app’) : méthode qui monte l’application Vue a un élément DOM existant avec l’identifiant app.
Le fichier style.css pour donner un style aux contenus
#app{
text-align: center;
margin: 75 auto;
}
Après tous ces étapes, l’instance sera créée.
Utiliser la propriété Data
En Vue.js, la propriété « data » est une fonction qui retourne un objet contenant les données de l’état de l’instance de l’application ; qui permet de définir les variables qui peuvent être utilisées dans l’application.
Voici comment définir la propriété « data » dans notre application dans le fichier script.js :
data(){
return{
title: "Hello World",
message: 'Voici ma première application vue.js',
}
}
Pour l’utiliser, on doit le récupérer dans le fichier html grâce aux rendu déclaratifs {{ }} qui contiennent les clés ‘title’ et ‘message’ ou bien les objets retournés dans le data.
<div class="container main" id="app">
<h1>{{ title }}</h1>
<p>{{message}}</p>
</div>
Cela affichera ‘Hello World ‘ et ‘’Voici ma première application vue.js’ sur la page
Utiliser les méthodes
On utilise les méthodes pour définir des fonctions qu’on pourraient utiliser à l’intérieur de notre application.
methods: {
bonjour: function(){
return 'Bonjour tout le monde';
},//retourne la chaine ‘Bonjour tout le monde’
calculSquareSurface: function(side){
return side * side;
},//calcule et retourne l’aire d’un carré en fonction de la longueur d’un côté donné
calculRectangleSurface : function(){
return this.width * this.height;
}//calcule et retourne l’aire d’un rectangle en utilisant les valeur de width et height des données.
}
On peut accéder au data contenant « width » et « height » pour les fonctions ou il y a les mots clés this
data(){
return{
title: "Hello World",
message: 'Voici ma première application vue.js',
width: 500,
height: 200,
}
},
On les récupère dans le fichier html grâce aux rendu déclaratifs {{ }} qui contiennent les clés ‘bonjour’ , ‘calculSquareSurface’ et ‘calculRectangleSurface’ sans oublier les paranthèses () ce qui le différencie de l’utilisation de data :
<div class="container main" id="app">
<p>{{bonjour()}}</p>//pour afficher le retour de la méthode bonjour
<p>L'aire d'un carré de 5m de coté est de {{calculSquareSurface(5) m2}}</p>//pour afficher l’aire d’un carré
<p>L'aire d'un Rectangle de {{width}}m de longueur et {{height}}m de largeur est de {{calculRectangleSurface()}}m2</p>//pour afficher l’aire d’un rectangle
</div>
Le rendu est :
Utiliser la boucle v-for
v-for : directive permet de rendre une liste d’éléments en utilisant une boucle.
On va créer d’abord un tableau à l’extérieur de notre application dans le fichier script.js
var fruits = [
'orange','pomme','citron','cerise','fraise'
];
Puis, dans le data, on va retourner l’objet « fruit »
data(){
return{
fruits : fruits,
}
}
Après, on peut l’utiliser dans le fichier index.html grâce à Vue
c’est pour cela qu’on utilise le boucle v-for pour que chaque fruit dans le tableau fruits, il va afficher fruit.
<div class="container main" id="app">
<ul>
<li v-for="fruit in fruits">
{{fruit}}
</li>
</ul>
</div>
Le rendu c’est :
Utiliser V-bind
v-bind : est une directive de Vue.js utilisée pour lier dynamiquement des attributs ou des props à des données dans votre composant Vue. Cela permet d’attacher des valeurs dynamiques aux attributs HTML, en utilisant les données de votre instance Vue.
Créons un nouveau dossier contenant les fichiers index.html, style.css, script.js tout comme au précédent.
Dans le script, définir des objets dans le data appelons ‘lien’ et ‘image’
data(){
return{
lien : "https://alphorm.com",
image : 'Burger-King-Big-King.jpg',
}
}
Puis pour l’utiliser, rendre dans le fichier html,
On ne peut pas mettre de rendu déclaratif dans un attribut html comme href :
<p><a href="{{lien}}" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Alphorm</a></p>
Au lieu d’utiliser cela, on le remplace par v-bind
<p><a v-bind:href="lien" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Alphorm</a></p>
Ou bien utiliser le raccourci
<p><a :href="lien" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Alphorm</a></p>
<div class="container main" id="app">
<!-- <p><a v-bind:href="lien" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Alphorm</a></p> -->
<p><a :href="lien" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Alphorm</a></p>
<div>
<img :src="image" alt="burger" width="500" height="500">
</div>
</div>
L’affichage c’est :
Utiliser v-on
v-on : est utilisée pour écouter et gérer les événements sur les éléments HTML. Elle permet de lier des événements JavaScript à des méthodes de votre composant Vue, ce qui permet de rendre vos applications interactives.
Essayons toujours par créer un nouveau dossier comme avant.
On va créer des objets boutons dans une méthode, on veut qu’à chaque fois on clique le bouton, il affiche un message d’alerte, c’est là qu’on utilise v-on, pour un évènement
methods: {
redButton: function(){
return alert('tu clique sur le bouton rouge');
},
blueButton: function(){
return alert('tu clique sur le bouton bleu');
},
blackButton: function(){
return alert('la souris est sortie du bouton noir');
}
}
On l’utilise dans le fichier html
<div class="container main" id="app">
<button class="btn btn-danger" v-on:click="redButton()">Bouton rouge</button>
<br><br>
<button class="btn btn-primary" @click="blueButton()">Bouton bleu</button>
<br><br>
<button class="btn btn-primary" @mouseleave="blackButton()">Bouton noir</button>
<br><br>
</div>
Le rendu sera comme ceci :
Utiliser v-if
v-if : permet à vue d’afficher un élément à condition que si la condition est rempli, l’élément sera affiché si la condition n’est pas rempli, l’élément ne sera pas rempli.
data(){
return{
message : 'coucou', //une chaîne de caractères représentant le message è afficher
animal: 'chien', //une chaîne de caractères représentant un animal
}
}
Pour notre code HTML
<div class="container main" id="app">
<div v-if="animal">
{{message}}
</div>//pour afficher son contenu uniquement si animal est défini et a une valeur (non nulle,non vide).
</div>
L’affichage sera comme ceci :
Utiliser v-model
v-model : est utilisée pour créer une liaison bidirectionnelle entre les données d’un composant Vue et les éléments de formulaire HTML. Ce qui signifie que toute modification des données du formulaire met à jour les données du composant, et vice versa.
Dans le scriptjs
data(){
return{
message: 'message par défaut',
}//une propriété de données, ici elle est initialisée avec la chaine de caractères ‘message par défaut’
}
div class="container main" id="app">
<input type="text" v-model="message">
<div>
{{message}}
</div>//pour lier sa valeur à la propriété message définie dans les données de l’instance Vue,qui signifie que toute modification dans cet input mettra à jour automatiquement la valeur de message dans l’instance Vue et inversement.
Voilà l’affichage :
Changer un état au click
Pour cette partie, nous allons voir comment changer l’état d’une propriété lorsque l’utilisateur clique sur un élément HTML, et comment utiliser cette propriété pour modifier dynamiquement les classes CSS d’un élément en fonction de cet état.
data(){
return{
done: false,
}//propriété de données initilialement définie sur false,ce qui signifie que l’état initial de done est non effectué
}
Dans le HTML
<div class="container main" id="app">
<!-- <div class="text-dark executed">Hello world</div> -->
<h3
class="text-dark"
@click="done : !done"//c’est une directive v-on avec le raccourci @ qui écoute l’événement click sur cet élément.Lorsque l’utilisateur clique sur <h3>,cela déclenche l’inversion de l’etat de done.Cela signifie que chaque fois que vous cliquez dessus, la valeur de done passe de false à true ou de true à false.
:class="{executed : done}">//c’est une liaison de classe dynamique v-bind :class abrégée 🙂 qui lie la classe executed à l’élément h3 en fonction de la valeur de done.Lorsque done est true la classe executed est ajoutée à h3, sinon elle est retirée.
Hello world
</h3>
</div>
Le rendu est:
Insérer un élément HTML dans une chaîne de caractère
En utilisant v-html, qui permet à vue d’écouter et interpréter les balises html s’il y on a.
data(){
return{
textHtml:'<p class="text-danger">Attention!</p>'
//contient une chaine de caractère qui représente du code HTML
}
}
Dans le HTML
<div class="container main" id="app">
<div>{{textHtml}}</div>//pour afficher dynamiquement le contenu de la propriété textHtml de l’instance Vue
<div v-html="textHtml"></div>//pour rendre dynamiquement le contenu HTML de la propriété textHtml
</div>
L’affichage est comme ci-dessous :
Comprendre les life cycle hooks
Les « lifecycle hooks » (crochets de cycle de vie) sont des méthodes spéciales fournies par Vue.js qui vous permettent d’exécuter du code à des moments précis du cycle de vie d’une instance de composant Vue. Chaque composant Vue passe par différents états ou phases, depuis sa création jusqu’à sa destruction, et les crochets de cycle de vie vous permettent de « crocheter » du code à ces différents moments clés.
data(){
return{
km: 0,
}
},
methods:{
drive: function(){
setInterval(() =>{
this.km++;
}, 1000);
}
},
beforeCreate(){
console.log(this.km);
},//un hook de cycle de vie de VueJs qui est exécuté avant la création de l’instance.A ce stade les données réactives ne sont pas encore initialisées donc this.km est undefined.
created(){
this.drive();
}//un hook de cycle de vie de VueJs qui est exécuté juste après la création de l’instance.Ici,il appelle la méthode drive pour commencer l’incrémentation de km.
Dans HTML :
<div>{{km}} km(s)</div>//utilise le rendu d2claratifs {{}} pour afficher dynamiquement la valeur de km suivie de « km(s) » dans le DOM.A mesure que km est incrémente dans la méthode drive(), cette valeur est mise à jour toutes les secondes dans le navigateur.
Il affiche :
Utiliser watch pour écouter les données
Watch : une fonction qui permet de réagir à des changements dans les données ; utilisée pour effectuer des actions en réponse à des modifications spécifiques des propriétés de données.
watch:{
km: function(){
if(this.km= this.finish){
this.km = 0;
alert('tu es arrivé');
}
}
},
On a mis dans le data
data(){
return{
km: 0,
finish: 5,
}
},
Dans notre cas ;
watch
surveille les changements de la valeur de km. Quand km atteint la valeur de finish qui est égal à 5, il est réinitialisé à 0 et une alerte est affichée.
Traiter et valider un formulaire
Créons encore un nouveau dossier, contenant les fichiers nécéssaires. Notre but c’est de créer un tableau contient quelques informations tels que : nom, prénom, âge. Et puis, on peut ajouter des nouveaux informations par des champs de formulaire ; si le champ est vide, ou l’âge n’est pas un entier ou l’âge est inférieur à 15 , il affiche un message d’erreurs.
Cela qu’on trouve dans le fichier script
var users=[{
firstName:'Jean',
lastName:'Dupont',
age: '22',
},
{
firstName:'Paul',
lastName:'Dubois',
age: '35',
}
]
const application ={
data(){//définit l’état de l’application users est inialisé avec le tableau users défini plutôt newUser est un nouveau utilisateur vide et errors un tableau vide pour stocker les messages d’erreurs
return{
users: window.users,
newUser:{
},
errors: [],
}
},
methods:{//contient les fonctions pour manipuler les données de l’application
addUser: function(){
console.log(this.newUser.age);
if(!this.newUser.firstName){
this.errors.push('FirstName requis.');
}
if(!this.newUser.lastName){
this.errors.push('LastName requis.');
}
if(!this.newUser.age || !Number.isInteger(this.newUser.age) || this.newUser.age <15){
this.errors.push('Vous devez avoir au moins 15 ans');
}
if(this.errors.length){
return false;
}
this.users.push(this.newUser);
this.newUser={};
this.errors=[];
}
}//cette fonction vérifie si newUser contient des valeurs valides pour firstName,lastName et age.Si des erreurs sont trouvées elles sont ajoutées au tableau errors.Si aucune erreur n’est trouvée le nouvel utilisateur est ajouté au tableau users et newUser est réinitialisé.
}
Et voilà celui du fichier HTML
<div class="container main" id="app">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users">
<th scope="row">{{index}}</th>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>//tableau pour afficher la liste des utilisateurs
<div class="alert alert-danger" v-if="errors.lenght">>//directive Vue pour afficher les erreurs si elles existent
<p v-for="error in errors">{{error}}</p>>//directive Vue pour itérer sur les utilisateurs et afficher chaque utilisateur dans une ligne de tableau
</div>
<form>>//permet d’ajouter un nouvel utilisateur avec des champs pour le prénom,le nom et l’age.
<div class="row">
<div class="col">
<input type="text"
name="firstname"
form="form-control"
placeholder="First Name"
v-model="newUser.firstName">>//directive Vue pour lier les champs de formulaire aux propriétés de newUser
</div>
<div class="col">
<input type="text"
name="lastname"
form="form-control"
placeholder="Last Name"
v-model="newUser.lastName">
</div>
<div class="col">
<input type="number"
name="firstname"
form="form-control"
placeholder="Age"
v-model="newUser.age">
</div>
<div class="col">
<input @click="addUser()" type="button" class="btn btn-primary" value="Ajouter">>//appelle la méthode addUser pour ajouter un nouvel utilisateur
</div>
</div>
</form>
</div>
Voilà le résultat affiché :
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer une instance Vue.js ?
Comment utiliser la directive v-bind dans Vue.js ?
Qu'est-ce que la propriété data dans Vue.js ?
Comment utiliser les méthodes dans une application Vue.js ?
Quels sont les lifecycle hooks dans Vue.js ?
Conclusion
En maîtrisant Vue.js 3, vous pouvez créer des applications dynamiques et interactives. Comment comptez-vous appliquer ces fonctionnalités dans votre prochain projet ?
