Was ist der Unterschied zwischen vue.js und dem WeChat-Applet?

Der Unterschied zwischen vue.js und dem WeChat-Miniprogramm: 1. Nach der Instanziierung von Vue werden die Daten initialisiert und die Daten in den Daten können über [dies] abgerufen werden. 2. Im Miniprogramm nach den Seitendaten Nach der Initialisierung werden die Daten der Seite über [diese Daten] abgerufen, um das Seitenobjekt abzurufen.

【Empfohlene verwandte Artikel: vue.js】

vue.js Der Unterschied zwischen vue.js und dem WeChat-Miniprogramm:

1. Das WeChat-Miniprogramm verfügt über einen eigenen Komponentensatz Ansichtscontainer, die Wir haben einige Seitenansichtseffekte unterteilt, die wir normalerweise verwenden können

z. B.: Swiper, Scroll-Ansicht, Formularkomponente

Im Vue-Projekt müssen wir möglicherweise den Swiper der Drittanbieter-Komponentenbibliothek einführen. Formularkomponente Es geht eher darum, element-ui oder ant-ui oder iview zu kombinieren, um die Formularseite zu realisieren.

2. Bedingtes Rendern und Listen-Rendering

In js wissen wir alle, dass if(){}else{} die am häufigsten verwendete Methode ist, und in Vue- und WeChat-Applet-Frameworks ist es diese Klassenmethode wird durch Befehlsaufruf gekapselt und implementiert.

In Vue:

v-if="Math.random() > 0.5"或者v-if=”true”  //当指令的表达式返回 truthy 值的时候内容会被渲染

Leute, die an das Vue-Framework gewöhnt sind, die Konsequenzen, wenn sie dem WeChat-Applet längere Zeit nicht ausgesetzt sind:

wx-if=”Math.random() > 0.5”   //报错倒是不会，但是并没有按条件执行

Dann führen Sie es aus, es ist überhaupt nichts falsch, aber die Daten sind einfach falsch Ich habe es wiederholt überprüft. Nachdem ich den Code mehrmals gelesen hatte, war ich zuversichtlich, dass es kein Problem geben würde. Dann wurde mir klar, dass die Hintergrunddaten getröstet werden konnten Die bedingte Darstellung des WeChat-Applets ist möglicherweise falsch. Dann habe ich das WeChat-Applet-Dokument überprüft und festgestellt, dass in WeChat alle eine Variable über die Syntax von

{{ }} an die Schnittstelle binden. Verwenden Sie im WeChat-Applet das Steuerattribut wx:for für die Komponente, um ein Array zu binden. Sie können die Daten jedes Elements im Array verwenden, um die Komponente wiederholt zu rendern.

Der tiefgestellte Variablenname des aktuellen Elements des Arrays ist standardmäßig index, und der Variablenname des aktuellen Elements des Arrays ist standardmäßig item;

wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}”

Verwenden Sie wx:for-item, um den Variablennamen des aktuellen Elements anzugeben

use wx:for -index kann den Variablennamen des aktuellen Indexes des Arrays angeben:

<p v-for=”(index,item) in array” :key=”item.id”></p>；

3. Datenerfassung

Nachdem Vue instanziiert wurde, initialisieren Sie die Daten und die Daten im Daten können dadurch abgerufen werden. Normaler Vorgang:

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Nach der Initialisierung der Seitendaten werden die Seitendaten über this.data abgerufen, um das Seitenobjekt zu erhalten.

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

Ganz zu schweigen davon .message, aber später wurde mir plötzlich klar, dass es sich um ein kleines Programm handelte. Dann ist das Problem wieder da, der Wert auf der Ansichtsoberfläche hat sich nicht geändert.

Überprüfen Sie das Dokument erneut (aus der offiziellen Dokumentation des WeChat-Applets):

1. Das direkte Ändern dieser Daten ist ungültig und kann den Status der Seite nicht ändern. Dies führt auch zu Dateninkonsistenzen. 2. Der Datensatz darf nicht größer als 1024 KB sein. Bitte vermeiden Sie, zu viele Daten auf einmal festzulegen.

3. Die Beziehung zwischen this.data und this.setData besteht darin, dass das, was in this.setData gespeichert ist, eine Kopie von this.data ist und die Schnittstelle die Daten aus der in this.setData gehosteten Kopie von this.data erhält. Wenn wir also this.data ändern, wird die Schnittstelle nicht direkt aktualisiert, da die Kopie in this.setData zu diesem Zeitpunkt noch nicht aktualisiert ist.

Kurz gesagt, die Funktion setData aktualisiert die Daten und zeigt sie auf der Seite an. this.data ändert die Daten, ändert jedoch nicht den Inhalt der Ansichtsseite.

Also, mach es richtig

data(){
  return {
    message:””
  }
},
methods:{
  change:function(){
    this.message = “呵呵哒”
  }
}

Verwandte kostenlose Lernempfehlungen:

JavaScript

(Video)

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen vue.js und dem WeChat-Applet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!