Vorwort
Im vorherigen Kapitel haben wir die List -Seite erfolgreich durch grundlegende Konstruktion gerendert. Es gibt jedoch viele Probleme. In diesem Kapitel werden wir diese Probleme lösen.
Verwenden Sie V-Bind, um Daten zu binden.
Im vorherigen Kapitel haben wir die Seite gemacht. Wenn die Konsole jedoch geöffnet ist, finden Sie einen Fehler. Wie in der Abbildung unten gezeigt:
Dies liegt daran, dass unser HTML -Code zuerst ausgeführt wird, wenn die Seite eingeht, und zu diesem Zeitpunkt hat unser Vue nicht mit dem Laufen begonnen. Unser Code ist wie folgt:
<li v-für = "Info in data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.logInname}} </span> </i> </i> </i> </i> {{{{hülreate_at}}}} </i/i> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time }} "> {{info.title}} </a> </li>Wie oben erwähnt, kann dieser Bildpfad natürlich nicht gefunden werden, wenn die Seite Src = "{{info.author.avatar_url}}" analysiert. Daher tritt natürlich ein Fehler auf. Daher müssen wir diesen Code verarbeiten. Wir ändern es an
<img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname">
OK, lasst uns die Seite aktualisieren, diesmal gibt es keinen Fehler.
Vue -Wissenspunkte
V-Bind-Bindungsattribut http://vuejs.org.cn/api/#v-bind
Wieder auffüllen:
Wenn wir die Seite öffnen, können wir diese {{...}} -Inhalte in einem Augenblick immer noch sehen. Obwohl dies keinen Fehler meldet, wirkt sich dies immer noch auf eine kleine Benutzererfahrung aus. Zu diesem Zeitpunkt können wir V-Text verwenden, um diese Inhalte auszugeben. Wie oben ändern wir den Code an Folgendes:
<li v-für = "Info in data"> <i> <img v-bind: src = "info.author.avatar_url" v-bind: Alt = "info.author.logInname"> <span v-Text = "info.author.loginname"> </i> <a <a times text href = "content.html? {{info.id}}" v-Text = "info.title"> </a> </li>Wenn wir den Code dazu ändern, werden alle Probleme gelöst.
Vue -Wissenspunkte
v-textausgabe text http://vuejs.org.cn/api/#v-text
Zeit verschönern
Das Zeitformat, das wir von der Schnittstelle erhalten, ist wie dieses 2016-06-12t06: 17: 35,453z. Offensichtlich ist dies nicht der Effekt, den wir wollen. Der Effekt, den wir wollen, sollte so sein, wie vor 2 Stunden veröffentlicht wurde. Wie macht ich das?
Wir brauchen eine Funktion, mit der sie eine primitive Zeichenfolge verleiht und dann eine gewünschte Zeichenfolge zurückgibt.
Das Prinzip dieser Funktion ist nicht unser Fokus. Ich werde es hier nicht erklären. Ich schaue nur den Code wie folgt an:
Funktion GoodTime (str) {var now = new Date (). _day = Differenz/Tag, _Hour = Differenz/Stunde, _min = Differenz/Minute; if(_year>=1) {result= "Posted in" + ~~(_year) + "year ago"} else if(_month>=1) {result= "Posted in" + ~~(_month) + "month ago"} else if(_week>=1) {result= "Posted in" + ~~(_week) + "week ago"} else if(_day>=1) {result= "Gepostet in" + ~~ (_day) + "Tag"} else if (_Hour> = 1) {result = "veröffentlicht in" + ~~ (_Hour) + "stündlich"} else if (_min> = 1) {result = "gepostet in" + ~~ (_min) + "minute"} result = "nur"; Rückgabeergebnis;}Der Code hat einen Teil der Ausleihe aus dem Code anderer Personen.
OK, jetzt können wir eine Goodime (STR) -Methodenfunktion verwenden, um das Zeitformat zu ändern, das uns durch die Schnittstelle zu dem, was wir wollen, uns gegeben haben. Die Frage ist nun, wie können wir diese Funktion verwenden?
Dumme Methode, ändern Sie die Originaldaten direkt
Zuerst erhalten wir die Daten über Ajax und übergeben dann die Daten, um sie zum Rendern zu verschaffen. Anschließend können wir einen Betrieb in der Mitte ausführen, alle Daten verarbeiten und dann die verarbeiteten Daten übergeben, um sie zum Rendern zu verschaffen. Dieses Problem kann gelöst werden.
Tu es einfach, schauen wir uns den Code an:
Funktion Pushdom (Daten) {// Erste TRAversal und ändern Sie die Zeit in den Daten für (var i = 0; i <data.data.length; i ++) {data.data [i] .create_at = goodtime (data.data [i] .create_at); }; // Dann lassenOK, werfen wir durch die obige Verarbeitung einen Blick auf den endgültigen Seiteneffekt. Wie folgt:
Erfolg.
VUE Custom Filter -Methode
Obwohl es uns oben gelungen ist, ist es wirklich nicht elegant, direkt vor Vue eine für Schleife zu erstellen. Darüber hinaus wollen wir Vue lernen, wo ist dies die einzige Möglichkeit, zu lernen ...
OK, verwenden wir die benutzerdefinierte Filterfunktion von Vue, um sie zu verarbeiten.
Offizielles Tutorial, benutzerdefinierter Filter http://vuejs.org.cn/guide/custom-filter.html
Funktion Pushdom (Daten) {// Verwenden Sie das vue -benutzerdefinierte Filter, um die in der Schnittstelle vue.filter ('time', Funktion (value) {return Goodime (value);}) var vm = new VUE ({El: '.List', Daten: Daten});};}Und wir müssen unseren HTML -Teil wie folgt ändern:
<Zeit v-text = "info.create_at | Zeit"> </time>
OK, der Implementierungseffekt ist genau der gleiche. Aber der Code sieht viel eleganter aus. Der Schlüssel ist, dass wir in diesem Prozess die Verwendung von benutzerdefinierten Filtern gelernt und beherrscht haben. Tatsächlich eignen sich in vielen Fällen die Daten, die uns durch die Schnittstelle gegeben wurden, häufig nicht für die direkte Aufgabe auf der Seite, daher ist diese Funktion sehr wichtig und sehr häufig verwendet.
Zusammenfassung
1. V-Bind-Bindungselement-Attributmethode
2. V-Text-Ausgangstextmethode
3. Verwendung von Vue -benutzerdefinierten Filtern
Anhang
Vue offizielle Website
CnodeJS -API -Details
Laden Sie den Quellcode dieser Reihe von Tutorials herunter
Kapitel 1 des VueJS Practical Tutorial, den Aufbau der Grundlagen und das Rendern der Liste
VueJS Practical Tutorial Kapitel 2, Fehler beheben und die Zeit verschönern
VueJS Practical Tutorial Kapitel 3 mit dem Layout-Plug-In, um die Pagination zu realisieren
Dieser Artikel wurde ursprünglich von Fungleo geschrieben
Erste Veröffentlichungsadresse: http://blog.csdn.net/fungleo/article/details/51649074
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.