Vue.js a gagné sa réputation de framework JavaScript progressif. Vous pouvez utiliser Vue.js pour créer des applications à page unique (SPA) ou développer des interfaces utilisateur spécifiques.
Vous apprendrez ici les bases de Vue.js, notamment comment créer un composant Vue et travailler avec l’objet options pour rendre des données dynamiques.
Inclure Vue via le lien CDN
Vue.js est l’un des frameworks JavaScript les plus populaires. Pour commencer à utiliser Vue et l’ajouter à votre page HTML, copiez la balise script ci-dessous et collez-la dans la section head :
<script src="<https://unpkg.com/vue@3/dist/vue.global.js>"></script>
L’utilisation du lien CDN est une excellente option pour améliorer le HTML statique ou ajouter des fonctionnalités à votre application.
Cependant, vous devez installer Vue.js via npm pour utiliser ses fonctionnalités avancées, telles que la syntaxe Single-File Component (SFC), qui sont utiles lors de la construction d’applications Vue complètes.
Créer une application Vue
L’accès à la bibliothèque Vue via le lien CDN permet d’obtenir un objet Vue, y compris l’élément .createApp() méthode.
Comme son nom l’indique, cette méthode permet de créer une application Vue.
Par exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<script>
const app = Vue.createApp();
</script>
</body>
</html>
Ici, l’application créée est stockée dans le répertoire app variable. Après avoir créé l’instance de l’application, vous devez la rendre à l’aide de la commande .mount() méthode. Cette méthode indique où monter l’application dans le Modèle Objet du Document (DOM).
Par exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp();
app.mount("#app");
</script>
</body>
</html>
Pour utiliser la fonction .mount() vous devez fournir un élément DOM ou un sélecteur comme argument. Dans cet exemple, nous avons monté l’application Vue en utilisant l’élément DOM avec le sélecteur #app ID.
Il est important de noter que l’application Vue ne contrôle que les éléments qui ont été spécifiés à l’aide d’un élément id. En outre, l’application ne contrôle rien en dehors de ces éléments, y compris les événements de clic ou toute autre interactivité.
La dernière étape de la création d’une application Vue consiste à appeler la fonction .mount() après avoir terminé toutes les configurations de l’application.
L’objet Options dans Vue
Dans Vue.js, vous utilisez l’objet Options L’objet Vue peut être utilisé comme objet de configuration pour créer une instance ou un composant Vue.
Il s’agit d’une partie essentielle d’une application Vue car il définit le comportement et les données de chaque instance ou composant. L’objet Options L’objet est constitué de plusieurs propriétés représentant divers aspects de l’instance ou du composant.
Certaines des propriétés les plus couramment utilisées dans le Options Les objets sont :
- données: Cette propriété définit l’objet de données pour les applications Vue. Il s’agit d’une fonction qui renvoie un objet contenant les propriétés de données et leurs valeurs initiales.
- méthodes: Les méthodes de l’objet « Options » remplit des fonctions essentielles pour permettre un rendu dynamique.
- modèle: Cette propriété définit le modèle HTML pour l’instance ou le composant Vue. Il s’agit d’une chaîne contenant le balisage HTML, que le compilateur de modèles de Vue peut analyser.
Notez que lors de l’utilisation d’une propriété de modèle, le compilateur Vue ne rendra que le contenu défini dans le modèle.
Voici un exemple d’application Vue avec la propriété données, méthodes, et modèle propriétés :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 @click="reverseMessage" >{{ text }}</h1>
</div>
<script>
const app = Vue.createApp({
// template: '<h1>Welcome to your Vue app</h1>',
data() {
return {
text: "This is your Vue App"
};
},
methods: {
reverseMessage () {
this.text = this.text.split('').reverse().join('')
}
}
});
app.mount("#app");
</script>
</body>
</html>
Ce programme décrit une application Vue de base qui affiche le texte « This is your Vue App » en utilisant l’interpolation de texte et permet aux utilisateurs de cliquer dessus pour inverser le message.
L’application données() renvoie un objet avec une seule propriété appelée texte. Les @click est utilisée pour attacher une directive reverseMessage() à la méthode <h1> ; qui inverse l’élément texte propriété.
En exécutant ce programme, l’application Vue créée ressemblera à ceci :
Cliquez sur le texte pour l’inverser.
Notez que le programme a commenté la propriété template afin de permettre au contenu de l’application Vue d’être rendu. Si elle n’est pas commentée, cette application Vue n’affichera qu’une propriété template :
Il existe d’autres propriétés comme accessoires et calculésque vous pouvez également utiliser pour créer des applications Vue puissantes et flexibles en configurant l’objet Options.
Interpolation de texte dans Vue
L’interpolation de texte dans Vue est une fonctionnalité qui vous permet de lier dynamiquement des données à des éléments HTML. En d’autres termes, elle vous permet d’afficher directement la valeur des propriétés de données d’une instance Vue dans le HTML.
Pour réaliser l’interpolation de texte dans Vue, vous devez envelopper le nom de la propriété de données dans des doubles accolades. Vue interprète le contenu des doubles accolades comme des expressions JavaScript et les remplace par leur valeur résultante.
Par exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Welcome {{ name }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue app.",
name: "Noble",
};
},
});
app.mount("#app");
</script>
</body>
</html>
Dans cet exemple, l’interpolation de texte lie le message et nom propriétés de l’objet de données renvoyé dans l’instance Vue à la propriété <h1> ; et <p> ; éléments. Une fois l’application Vue montée, elle affiche les valeurs des éléments message et nom dans le code HTML à leurs positions respectives.
Vous pouvez également afficher le résultat d’un appel de méthode ou effectuer des opérations JavaScript de base à l’intérieur des doubles crochets :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue app</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<h3>Welcome {{ name.toUpperCase() }}</h3>
<p>There are {{ nameLength() }} letters in your name.</p>
</div>
<p>not here</p>
<script>
const app = Vue.createApp({
data() {
return {
message: "This is your Vue App",
name: "Noble Okafor",
};
},
methods: {
nameLength() {
return this.name.length - 1;
},
},
});
app.mount("#app");
</script>
</body>
</html>
Dans cet exemple, l’application Vue dispose d’un données qui contient deux propriétés : message et nom.
Dans l’application Vue, les trois éléments HTML affichent des données à l’aide de l’instance Vue. Les éléments h1 affiche la valeur de l’élément message tandis que la propriété h3 affiche la valeur de l’élément nom avec un toUpperCase() qui lui est appliquée.
Le p affiche le résultat de l’analyse de l’élément nomLongueur() définie dans la méthode méthodes de l’application Vue. L’objet nameLength() renvoie la longueur du nom nom propriété soustraite de un.
Pour accéder à une valeur de l’objet de données dans l’objet de méthodes, vous devez utiliser ce mot-clé. ce fait référence à l’instance Vue actuelle et vous permet d’accéder à ses propriétés et méthodes à partir de l’instance Vue. En utilisant cevous pouvez récupérer la valeur de l’élément nom et effectuer toutes les manipulations nécessaires à l’aide de la propriété méthodes.
Cette application Vue montre comment lier des données à des éléments HTML en utilisant l’interpolation de texte et comment définir et appeler des méthodes dans une instance Vue.
Construire son front-end avec Vue
Dans cet article, vous avez appris à commencer à travailler avec Vue et à interpoler du texte avec la syntaxe de template de Vue. Vous pouvez accéder à plusieurs autres fonctionnalités de Vue, comme les directives et les crochets de cycle de vie, ce qui en fait un excellent choix pour construire des applications frontales dynamiques.
