In diesem Artikel stellen wir Ihnen vor, wie Sie Methoden und Datenattribute in Vue JS verwenden.
Hinweis: Wir verwenden Vue CLI, um das Projekt zu generieren.
Erstellen Sie unser Projekt
Lassen Sie uns schnell unser Vue-Projekt erstellen, indem Sie den folgenden Befehl ausführen.
vue create vue-app
Der obige Befehl lädt die erforderlichen Dateien im vue-app-Ordner herunter.
Verwenden Sie cd vue-app, um das Arbeitsverzeichnis zu ändern, und öffnen Sie dann den Projektordner mit Ihrem bevorzugten Code-Editor.
Navigieren Sie zur Datei src im Ordner App.vue, löschen Sie den gesamten Inhalt und ersetzen Sie ihn anschließend durch den folgenden Code.
App.vue
<template>
<div>
<h1>Hello Vuejs</h1>
</div>
</template>
<script>
export default {};
</script><code><strong>data</strong>DatenEigenschaften
Im obigen Code exportieren wir das standardmäßig leere Objekt innerhalb des <script>-Tags und fügen diesem leeren Objekt das Datenattribut hinzu. <p><pre class="brush:php;toolbar:false"><script>
export default {
data:function(){
return {
title: "Vuejs"
}
}
};
</script></pre><strong>data: Der Datenattributwert ist eine anonyme Funktion, die ein Objekt zurückgibt. Jede Eigenschaft in diesem Objekt wird dem reaktiven Vue-System hinzugefügt, sodass vuejs den Dom mit den aktualisierten Daten neu rendert, wenn wir den Eigenschaftswert ändern. <p><code>{{}} Fügen wir das <code>title-Attribut zum Vorlagen-Tag hinzu, indem wir doppelte geschweifte Klammern verwenden. <p><em>App.vue<br/><p><pre class="brush:php;toolbar:false"><template>
<div>
<h1>Hello {{title}}</h1>
</div>
</template>
<script>
export default {
data: function() {
return {
title: "Vuejs"
};
}
};
</script></pre><code>{{js expression}}In Vuejs müssen wir doppelte geschweifte Klammern verwenden, um JavaScript-Ausdrücke zu übergeben. <p>Lassen Sie uns den Entwicklungsserver mit dem folgenden Befehl starten. <p><pre class="brush:php;toolbar:false">npm run serve</pre><img src="https://img.php.cn/upload/image/942/509/809/1555554495168130.png" title="1555554495168130.png" alt="Die Verwendung von Methoden und Datenattributen in Vuejs"/><p><code>{{title}}Haben Sie gesehen, dass unser durch Vuejs ersetzt wurde?<p><strong><code>methodsEigentum<p> Erstellen wir die erste Methode mithilfe des Methodenattributs. Der Wert des Methodenattributs ist ebenfalls ein Objekt. <p><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><code>welcomeMsgIm obigen Code haben wir eine -Methode hinzugefügt, die eine Zeichenfolge zurückgibt. <p><code>methodsIn <code>this.propertyname können wir mit auf das Datenobjekt zugreifen. <p><code>welcomeMsgLassen Sie uns die Methode im Template-Tag aufrufen. <p><pre class="brush:php;toolbar:false"><template>
<div>
<h1>Hello {{title}}</h1>
<h2>{{welcomeMsg()}}</h2>
</div>
</template></pre><img src="https://img.php.cn/upload/image/704/657/842/1555554791623899.png" title="1555554791623899.png" alt="Die Verwendung von Methoden und Datenattributen in Vuejs"/><p><br/><p><br/><p> <🎜></script>
Das obige ist der detaillierte Inhalt vonDie Verwendung von Methoden und Datenattributen in Vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
