Vue implementiert die Produktregisterkarte der Produktdetailseitenfunktion

In diesem Artikelbeispiel wird der spezifische Code der Produktregisterkarte von Vue zur Realisierung der Funktion der Produktdetailseite zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Wenn ein Benutzer auf ein Produkt klickt, um die Produktdetailseite aufzurufen, wird standardmäßig das große Bild angezeigt, das dem ersten kleinen Bild entspricht. Wenn die Maus dann über das kleine Bild bewegt wird, ändert sich auch das große Bild. Der Effekt ist wie folgt:

Implementierungscode:

Das Template (HTML) von shopitem.vue hat oben ein großes Bild und unten ein kleines Bild. Wenn die Maus über das kleine Bild fährt, wird das Event getUrl ausgelöst (Parameter ist das Show-Attribut und der Index des kleinen Bildes):

Datei item.json (in meiner Datendatei ist standardmäßig die Anzeige des ersten kleinen Bilds aktiviert und das große Bild zeigt standardmäßig das erste. Die Pfade der großen und kleinen Bilder sind gleich, aber die durch CSS gesteuerten Bildgrößen sind unterschiedlich):

Die <script>-Methode von shopitem.vue (fechData() verwendet vue-resources, um Hintergrunddaten anzufordern, d. h. lokale JSON-Dateien. Lokale JSON-Dateien werden im statischen Ordner gespeichert.)

Der store.js-Dateicode von vuex (Statusverwaltung) realisiert die Datenpersistenz:

//store entspricht einem Lager. Eine Komponente verwendet und ändert Daten, und eine andere Komponente verwendet die von der vorherigen Komponente geänderten Daten. //So realisiert vuex den Datenaustausch zwischen verschiedenen Komponenten (verschiedenen Seiten). //vuex einführen
importiere Vue von „vue“;
importiere Vuex von „vuex“;
 
Vue.use(Vuex);
 
//Verwenden Sie Vuex, um die Datenpersistenz zu implementieren/* 1.state wird hauptsächlich zum Speichern von Daten in Vuex verwendet*/
var Zustand = {
 Zahl: 1,
 Info:[]
}
 
// 2. Mutation enthält Methoden, die hauptsächlich dazu verwendet werden, die Daten im Status var mutations={ zu ändern.
 Zählen(){
  ++Zustand.Nummer;
 },
 // Der Wert muss in den Status geschrieben werden
 storeItemInfo(Status,Daten){
  Zustand.info=Daten;
// Status.Liste.Push(Daten);
 }
}
 
 // 3. Ähnlich wie bei berechneten Eigenschaften wird, wenn die Zähldaten im Status geändert werden, die Methode in Gettern gesendet, um den neuen Wert zu erhalten var getters={
  computedCount: (Status) => {
    gibt Status.Anzahl*2 zurück;
  }
}
 
// 3.vuex instanziiert Vuex.Store
const store = neuer Vuex.Store({
  Staat, /* Abkürzung */
  Mutationen,
  Getter
})
 
//4. Laden offenlegen
Standardspeicher exportieren;

Dies ist der gesamte Code, um diesen Effekt zu erzielen. Dabei werden ES6-Funktionen, Vuex und Anforderungsdaten verwendet. Wie dem auch sei, mir sind endlich die Vorteile der es6-Funktionen klar geworden und ich hoffe, dass es Ihnen helfen kann.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.