So erzielen Sie Mehrwert aus Vue

Vorwort

Vue.js ist ein leichtes, flexibles und effizientes Front-End-Framework, das Entwicklern die Webentwicklung erleichtert. Vue.js ist datengesteuert, komponentenorientiert und einfach zu verwenden. Für Anfänger sind die Datenbindungs- und bidirektionalen Datenflussfunktionen der unmittelbarste Vorteil. Das Abrufen von Werten in Vue.js ist ein sehr wichtiger Teil der Entwicklung. In diesem Artikel wird die Methode zum Abrufen von Werten in Vue.js kurz vorgestellt.

1. Den Wert in der Vue-Instanz abrufen.

Das Abrufen des Werts in der Vue-Instanz wird hauptsächlich über das Datenattribut implementiert. Nachdem Sie das Datenattribut in der Vue-Instanz definiert und die Daten gebunden haben, können Sie {{ }}-Interpolationsausdrücke zur Anzeige verwenden. Der spezifische Code lautet wie folgt:

<div id="app">
    <p>{{ message }}</p>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue!'
    }
});

Im obigen Code wird durch Instanziieren von Vue eine Vue-Instanz-VM erstellt, die ein el-Attribut erhält, um den Selektor des gemounteten Elements anzugeben, #app stellt die Seite dar Das Element, dessen ID app ist. Gleichzeitig wird in vm ein Datenattribut definiert, und die Attribute des Objekts können zur Anzeige an die Vorlage der Seite gebunden werden.

2. Holen Sie sich den Wert in der Komponente

In Vue.js ist eine Komponente eine wiederverwendbare Vue-Instanz, bei der es sich um ein abstraktes Konzept handelt, das auch in Komponenten verwendet werden kann. Definieren Sie die Daten, die über das Datenattribut gebunden werden sollen. Der Code lautet wie folgt:

Vue.component('my-component', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<div>{{ count }}</div>'
})

Im obigen Code haben wir eine Vue-Komponente erstellt, den Zählwert über das Datenattribut definiert und ihn angezeigt die Vorlage. Wenn Sie diese Komponente in der übergeordneten Komponente verwenden, können Sie Daten über das Props-Attribut übergeben. Der Code lautet wie folgt:

<my-component :count="6"></my-component>

Wenn Sie den Zählwert aktualisieren müssen, können Sie das Änderungsereignis über das auslösen $emit-Methode, wie unten gezeigt: # 🎜🎜#

Vue.component('my-component', {
  props: ['count'],
  template: '<div>{{ count }}</div>',
  methods: {
    updateCount: function () {
      this.$emit('change', this.count + 1)
    }
  }
})

Im obigen Code ist eine updateCount-Methode definiert, die das Änderungsereignis über emit sendet, um den neuen Wert zu übergeben, wenn die untergeordnete Komponente das Ereignis vom übergeordneten Element empfängt Komponente kann den neuen Wert über Requisiten empfangen und anzeigen. Der Code lautet wie folgt:

<my-component :count="count" @change="count = $event"></my-component>

@change im obigen Code definiert die Methode zum Empfangen von Ereignissen und $event stellt die übergebenen Parameter dar aus der untergeordneten Komponente.

3. Fazit

Vue.js ist ein sehr leistungsfähiges und flexibles Front-End-Framework. Wie oben gezeigt, können sowohl Vue.js-Instanzen als auch Komponenten über die Daten definiert werden Attribut Die zu bindenden Daten können über das Props-Attribut neue Werte erhalten, um eine bidirektionale Datenbindung zu erreichen. Ich glaube, dass wir in der Praxis die Methode zum Abrufen von Werten in Vue.js besser beherrschen und dann besseren und effizienteren Code schreiben werden.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie Mehrwert aus Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!