Vue.js a acquis sa réputation de framework JavaScript progressif. Vous pouvez utiliser Vue.js pour créer des applications monopage (SPA) ou développer des interfaces utilisateur spécifiques.

Ici, vous apprendrez les bases de Vue.js, y compris comment créer un composant Vue et travailler avec l'objet options pour afficher des données dynamiques.

Vue.js est l'un des frameworks JavaScript les plus populaires. Pour démarrer avec Vue, et pour l'ajouter à votre page HTML, copiez la balise de script ci-dessous et collez-la dans la section head :

<scénariosrc="">scénario>

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 davantage de ses fonctionnalités avancées, telles que la syntaxe du composant de fichier unique (SFC), qui sont utiles lors de la création d'applications Vue à part entière.

Création d'une application Vue

L'accès à la bibliothèque Vue via le lien CDN fournit un objet Vue, y compris le .createApp() méthode.

Comme son nom l'indique, vous pouvez créer une application Vue en utilisant cette méthode.

Par exemple:

html>
<htmllangue="fr">
<diriger>
<titre>Application Vuetitre>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<scénario>
 const app = Vue.createApp();
scénario>
corps>
html>

Ici, l'application créée est stockée dans le application variable. Après avoir créé l'instance d'application, vous devez la rendre à l'aide de la .monter() méthode. Cette méthode indique où monter l'application dans le Modèle d'objet de document (DOM).

Ainsi:

html>
<htmllangue="fr">
<diriger>
<titre>Application Vuetitre>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<dividentifiant="application">div>
<scénario>
 const app = Vue.createApp();
 app.mount("#app");
scénario>
corps>
html>

Pour utiliser Vue's .monter(), 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 #application IDENTIFIANT.

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 identifiant. De plus, l'application n'a aucun contrôle sur quoi que ce soit 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 le .monter() méthode après avoir terminé toutes les configurations de l'application.

L'objet Options dans Vue

Dans Vue.js, vous utilisez le Choix objet en tant qu'objet de configuration pour créer une instance ou un composant de Vue.

C'est une partie essentielle d'une application Vue car elle définit le comportement et les données de chaque instance ou composant. Le Choix L'objet se compose de plusieurs propriétés représentant divers aspects de l'instance ou du composant.

Certaines des propriétés couramment utilisées dans le Choix l'objet sont :

• données: Cette propriété définit l'objet de données pour les applications Vue. C'est une fonction qui retourne un objet qui contient les propriétés des données et leurs valeurs initiales.
• méthodes: Le méthodes La propriété de l'objet Options détient des fonctions vitales pour activer le 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 le données, méthodes, et modèle propriétés:

html>
<htmllangue="fr">
<diriger>
<titre>Application Vuetitre>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<dividentifiant="application">
<h1 @Cliquez sur="Message inversé" >{{ texte }}h1>
div>
<scénario>
constante app = Vue.createApp({
// modèle: '
Bienvenue dans votre application Vue
',
 données() {
retour {
 texte: "Ceci est votre application Vue"
 };
 },
 méthodes: {
 message inversé () {
ce.texte = ce.text.split('').inverse().join('')
 }
 }
 });
application.monter("#application");
scénario>
corps>
html>

Ce programme décrit une application Vue de base qui affiche le texte "Ceci est votre application Vue" en utilisant l'interpolation de texte et permet aux utilisateurs de cliquer dessus pour inverser le message.

Le données() La fonction renvoie un objet avec une seule propriété appelée texte. Le @Cliquez sur directive est utilisée pour attacher une reverseMessage() méthode à la élément, qui inverse la texte propriété.

Lors de l'exécution de ce programme, l'application Vue créée ressemblera à ceci :

Cliquer sur le texte l'inversera.

Notez que le programme a commenté la propriété du modèle afin de permettre le rendu du contenu de l'application Vue. Si elle est laissée sans commentaire, cette application Vue n'affichera qu'une propriété de modèle :

Il existe d'autres propriétés comme accessoires et calculé, que vous pouvez également utiliser pour créer des applications Vue puissantes et flexibles lors de la configuration de 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, cela vous permettra de sortir directement la valeur des propriétés de données d'une instance de Vue dans le HTML.

Pour obtenir une interpolation de texte dans Vue, vous devez envelopper le nom de la propriété data entre deux accolades. Vue interprète le contenu à l'intérieur des doubles accolades comme des expressions JavaScript et les remplace ensuite par leur valeur résultante.

Par exemple:

html>
<htmllangue="fr">
<diriger>
<titre>Application Vuetitre>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<dividentifiant="application">
<h1>{{ message }}h1>
<p>Bienvenue {{ nom }}p>
div>
<scénario>
 const app = Vue.createApp({
 données() {
 retour {
 message: "Ceci est votre application Vue.",
 nom: "Noble",
 };
 },
 });
 app.mount("#app");
scénario>
corps>
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 de Vue au et éléments. Une fois l'application Vue montée, elle affiche les valeurs des message et nom properties dans le 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 entre les doubles accolades :

html>
<htmllangue="fr">
<diriger>
<titre>Application Vuetitre>
<scénariosrc=" https://unpkg.com/vue@3/dist/vue.global.js">scénario>
diriger>
<corps>
<dividentifiant="application">
<h1>{{ message }}h1>
<h3>Bienvenue {{ name.toUpperCase() }}h3>
<p>Il y a {{ nameLength() }} lettres dans votre nom.p>
div>
<p>pas icip>
<scénario>
 const app = Vue.createApp({
 données() {
 retour {
 message: "Ceci est votre application Vue",
 nom: « Noble Okafor »,
 };
 },
 méthodes: {
 nomLongueur() {
 retourne this.name.length - 1 ;
 },
 },
 });
 app.mount("#app");
scénario>
corps>
html>

Dans cet exemple, l'application Vue a un données objet 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. Le h1 l'élément affiche la valeur de message propriété, tandis que la h3 l'élément affiche la valeur de nom propriété avec un toUpperCase() méthode qui lui est appliquée.

Le p l'élément affiche le résultat renvoyé de la nomLongueur() méthode définie dans le méthodes objet de l'application Vue. Le nomLongueur() La méthode renvoie la longueur de la nom propriété soustraite de un.

Pour accéder à une valeur de l'objet de données dans l'objet méthodes, vous devez utiliser ce mot-clé. ce Le mot-clé fait référence à l'instance Vue actuelle et vous permet d'accéder à ses propriétés et méthodes depuis l'instance Vue. En utilisant ce, vous pouvez récupérer la valeur de nom propriété et effectuer toutes les manipulations nécessaires à l'aide de la méthodes.

Cette application Vue montre comment lier des données à des éléments HTML à l'aide de l'interpolation de texte et comment définir et appeler des méthodes dans une instance Vue.

Construisez votre frontal avec Vue

Dans cet article, vous avez appris à commencer à travailler avec Vue et à interpoler du texte avec la syntaxe de modèle de Vue. Vous pouvez accéder à plusieurs autres fonctionnalités de Vue, telles que les directives et les crochets de cycle de vie, ce qui en fait un excellent choix pour créer des applications frontales dynamiques.