Préface
Dans le chapitre précédent, nous avons réussi à rendre la page de liste via la construction de base. Cependant, il y a beaucoup de problèmes. Dans ce chapitre, nous résoudrons ces problèmes.
Utilisez la ligne V pour lier les données.
Dans le chapitre précédent, nous avons rendu la page. Cependant, si la console est ouverte, vous trouverez une erreur. Comme indiqué dans la figure ci-dessous:
En effet, lorsque la page entrera, notre code HTML sera exécuté en premier, et pour le moment, notre VUE n'a pas commencé à fonctionner. Notre code est le suivant:
<li v-for = "info in data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.loginname}} </span> </i> <morde> {{info.create_at} </time> <a href = "contenu. }} "> {{info.title}} </a> </li>Comme mentionné ci-dessus, lorsque la page analyse src = "{{info.author.avatar_url}}", bien sûr, ce chemin d'image ne peut pas être trouvé. Par conséquent, une erreur se produira naturellement. Par conséquent, nous devons traiter ce code. Nous le modifions à
<img V-Bind: src = "info.author.avatar_url" V-Bind: alt = "info.author.loginname">
Ok, rafraîchissons la page, cette fois, il n'y a pas d'erreur.
Points de connaissances Vue
Attribut de liaison V-Bind http://vuejs.org.cn/api/#v-bind
Remplir:
En fait, lorsque nous ouvrons la page, nous pouvons toujours voir ces contenus {{...}} en un instant. Bien que cela ne signale pas d'erreur, cela affecte toujours un peu d'expérience utilisateur. À l'heure actuelle, nous pouvons utiliser le texte V pour produire ces contenus. Comme ci-dessus, nous modifions le code à ce qui suit:
<li v-for = "info in data"> <i> <img v-bider: src = "info.author.avatar_url" v-bider: alt = "info.author.loginname"> <span v-text = "info.Author.loginname"> </pan> </i> <time v-tex href = "content.html? {{info.id}}" v-text = "info.title"> </a> </li>Lorsque nous modifions le code à cela, tous les problèmes sont résolus.
Points de connaissances Vue
Texte de sortie V-Text http://vuejs.org.cn/api/#v-text
Embellir le temps
Le format temporel que nous obtenons de l'interface est comme ce 2016-06-12T06: 17: 35.453Z. De toute évidence, ce n'est pas l'effet que nous voulons. L'effet que nous voulons devrait être comme ceci comme publié il y a 2 heures. Comment faire?
Nous avons besoin d'une fonction, qui est utilisée pour lui donner une chaîne primitive, puis renvoyer une chaîne que nous voulons.
Le principe de cette fonction n'est pas notre objectif. Je ne l'expliquerai pas ici. Je regarde simplement le code comme suit:
fonction bon temps (str) {var now = new Date (). gettime (), oldtime = new Date (str) .gettime (), différence = now - oldtime, result = '', minute = 1000 * 60, hour = minute * 60, jour = heure * 24, demi-mois = jour * 15, mois = jour * 30, année = mois * 12, _year = différence / an, _month = différence / mois, _week = (7 * an) _day = différence / jour, _hour = différence / heure, _min = différence / minute; if (_year> = 1) {result = "Publié dans" + ~~ (_year) + "il y a il y a un an"} else if (_month> = 1) {result = "Publié dans" + ~~ (_month) + "il y a mois"} else if (_week> = 1) {result = "Publié dans" + ~~ (_week) + "il y a une semaine"}} "Publié dans" + ~~ (_day) + "il y a un jour"} else if (_hour> = 1) {result = "Publié dans" + ~~ (_hour) + "il y a hour"} else if (_min> = 1) {result = "publié dans" + ~~ (_min) + "il y a minute"} else result = "Just"; Retour Résultat;}Le code fait partie de l'emprunt au code des autres.
Ok, maintenant, nous pouvons utiliser une fonction de méthode de bon temps (STR) pour modifier le format de temps qui nous est donné par l'interface avec ce que nous voulons. La question est maintenant, comment pouvons-nous utiliser cette fonction?
Méthode stupide, modifiez directement les données d'origine
Tout d'abord, nous obtenons les données via AJAX, puis remettez les données à Vue pour le rendu. Ensuite, nous pouvons effectuer une opération au milieu, traiter toutes les données, puis remettre les données traitées à Vue pour le rendu. Ce problème peut être résolu.
Faites-le, regardons le code:
fonction pushdom (data) {// premier traversée et modifie tout le temps dans les données pour (var i = 0; i <data.data.length; i ++) {data.data [i] .create_at = bon moment (data.data [i] .create_at); }; // Laissez ensuite Vue pour rendre var vm = new Vue ({el: '.list', données: données});}OK, grâce au traitement ci-dessus, jetons un coup d'œil à l'effet de la page finale. Comme suit:
Succès.
Vue Méthode Filtre personnalisée
Bien que nous ayons réussi ci-dessus, il n'est vraiment pas élégant de créer une boucle pour une boucle directement avant Vue. De plus, nous voulons apprendre Vue, où est-ce la seule façon d'apprendre ...
Ok, utilisons la fonction de filtre personnalisée de Vue pour la traiter.
Tutoriel officiel, filtre personnalisé http://vuejs.org.cn/guide/custom-filter.html
fonction pushdom (data) {// Utilisez le filtre personnalisé Vue pour sculpter le temps passé dans l'interface Vue.Filter ('Time', fonction (valeur) {return bonm (value);}) var vm = new Vue ({el: '.List', data: data});}Et, nous devons modifier notre pièce HTML comme suit:
<time v-text = "info.create_at | time"> </ time>
Ok, l'effet de mise en œuvre est exactement le même. Mais le code semble beaucoup plus élégant. La clé est que dans ce processus, nous avons appris et maîtrisé l'utilisation de filtres personnalisés. En fait, dans de nombreux cas, les données qui nous sont données par l'interface ne conviennent souvent pas pour le rendu directement sur la page, donc cette fonction est très importante et très couramment utilisée.
résumé
Méthode d'attribut de l'élément de liaison 1.v-bible
2. V-Text Sortie Text Method
3. Utilisation de filtres personnalisés Vue
appendice
Site officiel de Vue
Détails de l'API CNODEJS
Téléchargez le code source de cette série de tutoriels
Chapitre 1 du tutoriel pratique Vuejs, construire les bases et rendre la liste
Vuejs Practical Tutorial Chapter 2, corriger les erreurs et embellir le temps
Vuejs Practical Tutorial Chapter 3, en utilisant le plug-in de mise en page pour réaliser la pagination
Cet article a été initialement écrit par Fungleo
Adresse de première version: http://blog.csdn.net/fungleo/article/details/51649074
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.