Wie vue.js Datenabruf und -aktualisierung durch benutzerdefinierte Anweisungen implementiert

Vorwort

Die Codeausschnitte dieses Artikels befinden sich in der einzelnen Dateikomponente von vue, also in der Datei mit der Endung .vue. Dieser Artikel erklärt nur eine Implementierungsmethode, weder die einzige Methode noch Die effektivste Methode. Wenn Sie eine bessere Methode haben, hinterlassen Sie bitte eine Nachricht und wir können sie besprechen.

Schritt 1

Definieren Sie zunächst unbedingt die Variablen:

// app.vue <script>
 
data () { 
  return {
   // 定义 getData
   getData:{},
   // 定义自定义指令的绑定值
   ifUpdate:true
  }
}

Schritt 2

Wenn Sie Ajax verwenden möchten, müssen Sie jquery in index.html einführen, damit es global verwendet werden kann:

// index.html
 
<script type="text/javascript" src="./lib/js/jquery-2.1.1.min.js"></script>

Schritt 3

Nachdem die Komponente instanziiert wurde, wird die Methode in der benutzerdefinierten Anweisung automatisch ausgeführt:

Nachdem die Komponente instanziiert wurde, ist der Anfangswert ifUpdate Der erste Parameter wird einmal aufgerufen, und dann wird die Funktion von initData jedes Mal erneut aufgerufen, wenn sich der Parameterwert ifUpdate ändert. Die Parameter sind der neue Wert und der alte Wert von ifUpdate.

// app.vue <template>
 
// 在页面节点（自由选择）中绑定自定义指令
<div v-initData="ifUpdate" ></div>

// app.vue <script>
 
// 定义自定义指令
directives:{
  initData:function(val, oldVal){
   if(!val){
    return;
   }
   var self = this;
   $.getJSON( "ajax/test.json", function( data ) {
     self.vm.getData = data;
   });
   // 下次 ifUpdate 值更新为 true 时就会再次使用上面的 ajax 去获取数据
   self.vm.ifUpdate = false;
  }
}

Beschreibung des Nutzungsszenarios

Aktualisieren Sie nach den Benutzerkommentaren die Kommentarliste:

Nach Erhalt des Kommentars Daten zum ersten Mal ändern, ifUpdate in false ändern

Nachdem der Benutzer einen Kommentar hinzugefügt hat, werden die Daten in den Hintergrund übertragen und ifUpdate wird in true geändert

Der Befehl wird basierend auf der ifUpdate-Änderung ausgelöst und erneut über Ajax ausgelöst. Daten im Hintergrund abrufen

Nach dem Abrufen ifUpdate auf „false“ zurücksetzen

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist, die vue.js erlernen oder verwenden möchten kommunizieren.

Weitere relevante Artikel darüber, wie vue.js das Abrufen und Aktualisieren von Daten mithilfe benutzerdefinierter Anweisungen implementiert, finden Sie auf der chinesischen PHP-Website!