Dans cet article, nous vous présenterons comment utiliser les méthodes et les attributs de données dans Vue JS.
Remarque, nous utilisons Vue cli pour générer le projet.
Créons notre projet
Créons rapidement notre projet vue en exécutant la commande suivante.
vue create vue-app
La commande ci-dessus téléchargera les fichiers requis dans le dossier vue-app.
Utilisez cd vue-app pour changer le répertoire de travail, puis ouvrez le dossier du projet à l'aide de votre éditeur de code préféré.
Accédez au fichier src dans le dossier App.vue et supprimez tout le contenu, puis remplacez-le par le code ci-dessous.
App.vue
<template>
<div>
<h1>Hello Vuejs</h1>
</div>
</template>
<script>
export default {};
</script><code><strong>data</strong>donnéespropriétés
Dans le code ci-dessus, nous allons exporter l'objet vide par défaut à l'intérieur de la balise <script>, ajoutons l'attribut data à cet objet vide. <pre class="brush:php;toolbar:false"><script>
export default {
data:function(){
return {
title: "Vuejs"
}
}
};
</script></pre><p><strong>data : La valeur de l'attribut data est une fonction anonyme qui renvoie un objet. Chaque propriété de cet objet est ajoutée au système réactif Vue de sorte que si nous modifions la valeur de la propriété, vuejs restituera le dom avec les données mises à jour. <p><code>{{}} Ajoutons l'attribut <code>title à la balise de modèle en utilisant doubles accolades. <p><em>App.vue<br/><pre class="brush:php;toolbar:false"><template>
<div>
<h1>Hello {{title}}</h1>
</div>
</template>
<script>
export default {
data: function() {
return {
title: "Vuejs"
};
}
};
</script></pre><p><code>{{js expression}}Dans Vuejs, nous devons utiliser des doubles accolades pour transmettre des expressions JavaScript. <p>Démarrons le serveur de développement en utilisant la commande suivante. <pre class="brush:php;toolbar:false">npm run serve</pre><p><img src="https://img.php.cn/upload/image/942/509/809/1555554495168130.png" title="1555554495168130.png" alt="Lutilisation de méthodes et dattributs de données dans Vuejs"/><p><code>{{title}}Avez-vous vu que notre a été remplacé par Vuejs ?<p><strong><code>methodspropriété<p>Créons la première méthode en utilisant l'attribut méthodes. La valeur de l'attribut méthodes est également un objet. <pre class="brush:php;toolbar:false"><script>
export default {
data: function() {
return {
title: "Vuejs"
};
},
methods:{
welcomeMsg:function(){
return `Welcome to ${this.title} world`
}
}
};
</script></pre><p><code>welcomeMsgDans le code ci-dessus, nous avons ajouté une méthode qui renvoie une chaîne. <p><code>methods À l'intérieur de <code>this.propertyname, nous pouvons accéder à l'objet de données en utilisant . <p><code>welcomeMsgAppelons la méthode dans la balise template. <pre class="brush:php;toolbar:false"><template>
<div>
<h1>Hello {{title}}</h1>
<h2>{{welcomeMsg()}}</h2>
</div>
</template></pre><p><img src="https://img.php.cn/upload/image/704/657/842/1555554791623899.png" title="1555554791623899.png" alt="Lutilisation de méthodes et dattributs de données dans Vuejs"/><p><br/><p><br/><p> <🎜></script>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
