Lassen Sie uns über die allgemeinen Eigenschaften und Methoden von Vue-Instanzobjekten sprechen

Vue.js ist ein Front-End-Framework, das datengesteuerte und komponentenbasierte Ansichtsfunktionen implementieren kann. In einer Vue.js-Anwendung verfügt jedes Vue-Instanzobjekt über eigene Eigenschaften und Methoden, die bei der Vue-Entwicklung sehr wichtig sind. In diesem Artikel werden die allgemeinen Eigenschaften und Methoden von Vue-Instanzobjekten vorgestellt. Eigenschaften des Vue-Instanzobjekts Dies ist einer der Kernaspekte der datengesteuerten Implementierung von Vue. Beispielsweise definieren wir eine Vue-Instanz wie folgt:

var vm = new Vue({
  data: {
    message: 'Hello World!'
  }
})

In der obigen Vue-Instanz wird ein Datenobjekt definiert und eine Zeichenfolge „Hello World!“ initialisiert. Dieses Nachrichtenattribut kann in Vue-Vorlagen verwendet werden.

props

propsEigenschaften sind eine Möglichkeit, Daten von der übergeordneten Komponente zu empfangen. Es handelt sich um eine Eigenschaft im Instanzobjekt der Vue-Komponente und wird zum Übergeben von Parametern beim Anpassen der Komponente in der übergeordneten Komponente verwendet. Wenn eine Komponente innerhalb einer anderen Komponente definiert wird, können Sie mithilfe von Requisiten Daten von der übergeordneten Komponente an die untergeordnete Komponente übergeben. Zum Beispiel:

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{message}}</div>'
})

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

<div id="app">
  <child-component :message="parentMessage"></child-component>
</div>

Im obigen Beispiel haben wir eine Komponente namens

child-component

erstellt, die ein props-Attribut hat und eine Eigenschaft namens

message

definiert. Durch die Bindung des Nachrichtenattributs in der übergeordneten Komponente kann die übergeordnete Komponente Daten an die angepasste untergeordnete Komponente übergeben und so die Daten zum Anpassen der Vorlage in der untergeordneten Komponente verwenden. Die Eigenschaft computed

computed ist eine berechnete Eigenschaft im Vue-Instanzobjekt. Wenn sich die in einer Vorlage verwendeten Daten aufgrund von Änderungen in anderen Daten ändern müssen, können berechnete Eigenschaften über die berechnete Eigenschaft erstellt werden. Zum Beispiel:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

Im obigen Beispiel haben wir eine berechnete Eigenschaft

reversedMessage

definiert, die durch Umkehren des Werts des Nachrichtenattributs erhalten wird. Wenn sich die Nachricht ändert, ändern sich auch die berechneten Eigenschaften. Das Attribut

methods

im methods

Vue-Instanzobjekt enthält wiederverwendbare Methoden, die als Funktionen im Vue-Instanzobjekt definiert sind. Wenn ein Vue-Instanzobjekt dynamische Ereignisse verarbeiten muss, kann das Methodenattribut verwendet werden. Zum Beispiel:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Im obigen Beispiel haben wir eine reverseMessage-Methode definiert, die den Wert des Nachrichtenattributs umkehrt. Diese Methode kann über die v-on-Direktive in der Vue-Vorlage aufgerufen werden. Das Attribut

watch

watch wird verwendet, um Änderungen in Daten im Vue-Instanzobjekt zu überwachen. Wenn sich die überwachten Daten im Vue-Instanzobjekt ändern, führt das Watch-Attribut automatisch eine Funktion aus. Zum Beispiel:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message: function(val) {
      console.log('message changed to', val)
    }
  }
})

Im obigen Beispiel haben wir ein Überwachungsattribut definiert, das überwacht wird, wenn sich das Nachrichtenattribut ändert, und die Methode im Überwachungsattribut wird ausgeführt, um den geänderten Wert auf der Konsole auszugeben.

Vue-Instanzobjektmethode

$watchInstanzmethode

$watch** wird verwendet, um Änderungen in Daten im Vue-Instanzobjekt zu überwachen. Wenn sich die überwachten Daten im Vue-Instanzobjekt ändern, führt die Methode **$watch

automatisch eine Funktion aus. Zum Beispiel:

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

vm.$watch('message', function(val) {
  console.log('message changed to', val)
})

Im obigen Beispiel verwenden wir die Methode $watch, um Änderungen im Nachrichtenattribut zu überwachen und Informationen auszudrucken, wenn es sich ändert. Die Methode

$on

$on wird verwendet, um Ereignis-Listener im Vue-Instanzobjekt zu registrieren. Zum Beispiel:

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

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

Im obigen Beispiel verwenden wir die $on-Methode, um ein Ereignis mit dem Namen

message-changed

im Vue-Instanzobjekt zu registrieren. Wenn sich die Nachrichteneigenschaft ändert, geben wir ein Ereignis aus. Die Methode

$emit

$emit

wird verwendet, um ein Ereignis im Vue-Instanzobjekt auszulösen. Zum Beispiel:

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

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

vm.$emit('message-changed', 'Hello World!')

Im obigen Beispiel verwenden wir die Methode $emit, um ein Ereignis namens

message-changed

auszulösen und setzen den Parameter des Ereignisses auf

Hello World!

. Die Methode $nextTick

$nextTick wird verwendet, um einen Rückruf auszuführen, nachdem das DOM des Vue-Instanzobjekts aktualisiert wurde. Zum Beispiel:

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

vm.$nextTick(function() {
  console.log('DOM updated')
})

Im obigen Beispiel verwenden wir die Methode $nextTick, um einen Rückruf auszuführen, nachdem das DOM des Vue-Instanzobjekts aktualisiert wurde.

Zusammenfassung

Vue-Instanzobjekt ist ein sehr wichtiges Konzept in der Vue-Entwicklung. Wenn Sie ein Vue-Instanzobjekt erstellen, müssen Sie dessen Eigenschaften und Methoden verstehen. In diesem Artikel werden die allgemeinen Eigenschaften und Methoden von Vue-Instanzobjekten kurz vorgestellt, darunter: Daten, Requisiten, berechnet, Methoden, Überwachung, $watch, $on, $emit und $nextTick usw. Diese Eigenschaften und Methoden machen die Vue-Entwicklung flexibler und komfortabler.

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die allgemeinen Eigenschaften und Methoden von Vue-Instanzobjekten sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!