Prefácio
No capítulo anterior, renderizamos com sucesso a página da lista através da construção básica. No entanto, existem muitos problemas. Neste capítulo, resolveremos esses problemas.
Use V-Bind para vincular dados.
No capítulo anterior, renderizamos a página. No entanto, se o console for aberto, você encontrará um erro. Como mostrado na figura abaixo:
Isso ocorre porque quando a página entra, nosso código HTML será executado primeiro e, neste momento, nosso Vue não começou a funcionar. Nosso código é o seguinte:
<li v-for = "info em dados"> <i> <img src = "{{info.author.avatar_url}}"> <pan> {{{info.author.loginname}}} </span> </i> <tle> {info.create_at} </time> }} "> {{info.title}} </a> </li>Como mencionado acima, quando a página analisa src = "{{info.author.avatar_url}}", é claro, esse caminho de imagem não pode ser encontrado. Portanto, ocorrerá um erro naturalmente. Portanto, precisamos processar esse código. Nós modificamos para
<img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname">
Ok, vamos atualizar a página, desta vez, não há erro.
Vue Conhecimento pontos
atributo de ligação v-bind http://vuejs.org.cn/api/#v-bind
Reabastecer:
De fato, quando abrimos a página, ainda podemos ver esses conteúdos {{... ...}} em um instante. Embora isso não relate um erro, ele ainda afeta um pouco de experiência do usuário. Neste momento, podemos usar o V-Text para produzir esses conteúdos. Como acima, modificamos o código para o seguinte:
<li v-for = "Info em dados"> <i> <img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname"> <span v-text = "info.author.loginname"> </span> </i> <iMEXT = v-text = ". href = "content.html? {{info.id}}" v-text = "info.title"> </a> </li>Quando modificamos o código para isso, todos os problemas são resolvidos.
Vue Conhecimento pontos
V-Text Output Text http://vuejs.org.cn/api/#v-text
Embelezar o tempo
O formato de horário que obtemos da interface é como esta 2016-06-12T06: 17: 35.453Z. Obviamente, esse não é o efeito que queremos. O efeito que queremos deve ser assim como publicado há 2 horas. Como fazer isso?
Precisamos de uma função, usada para fornecer uma string primitiva e depois retornar uma string que queremos.
O princípio desta função não é o nosso foco. Não vou explicar aqui. Eu apenas olho para o código da seguinte maneira:
function goodTime(str){ var now = new Date().getTime(), oldTime = new Date(str).getTime(), difference = now - oldTime, result='', minute = 1000 * 60, hour = minute * 60, day = hour * 24, halfmonth = day * 15, month = day * 30, year = month * 12, _year = difference/year, _month = difference/month, _week = difference/(7*day), _day = diferença/dia, _hour = diferença/hora, _min = diferença/minuto; if (_year> = 1) {resultado = "Publicado em" + ~~ (_year) + "ano atrás"} else if (_month> = 1) {resultado = "Publicado em" + ~~ (_month) + "mês atrás"} se (_week> = 1) {resultado = "postado em" + ~ ~ (~ ~ _www) "Postado em" + ~~ (_day) + "dia atrás"} else if (_hour> = 1) {resultado = "publicado em" + ~~ (_hour) + "hora atrás"} else if (_min> = 1) {resultado = "publicado em" + ~~ (_min) + "minuto"}} "}"; apenas "; resultado de retorno;}O código faz parte do empréstimo do código de outras pessoas.
OK, agora, podemos usar uma função do método GoodTime (STR) para modificar o formato de tempo dado a nós pela interface ao que queremos. A questão agora é: como podemos usar essa função?
Método estúpido, modifique diretamente os dados originais
Primeiro, obtemos os dados através do Ajax e depois entregamos os dados para o Vue para renderizar. Em seguida, podemos executar uma operação no meio, processar todos os dados e, em seguida, entregar os dados processados para vue para renderizar. Este problema pode ser resolvido.
Apenas faça isso, vamos olhar para o código:
função pushdom (dados) {// primeiro travessia e modifique o tempo todo nos dados para (var i = 0; i <data.data.length; i ++) {data.data [i] .create_at = goodtime (data.data [i] .create_at); }; // Deixe -o para a renderização var vm = new vue ({el: '.list', dados: dados});}OK, através do processamento acima, vamos dar uma olhada no efeito da página final. Do seguinte modo:
Sucesso.
Método de filtro personalizado vue
Embora tenhamos conseguido acima, não é realmente elegante criar um loop para o Vue. Além disso, queremos aprender vue, onde é essa a única maneira de aprender ...
Ok, vamos usar a função de filtro personalizada da Vue para processá -la.
Tutorial oficial, filtro personalizado http://vuejs.org.cn/guide/custom-filter.html
função pushdom (dados) {// use o filtro personalizado de vue para esculpir o tempo passado na interface vue.filter ('time', function (value) {return GoodTime (value);}) var VM = new Vue ({el: '.list', dados: dados});}}E precisamos modificar nossa parte HTML da seguinte maneira:
<Time v-text = "info.create_at | time"> </time>
OK, o efeito de implementação é exatamente o mesmo. Mas o código parece muito mais elegante. A chave é que, nesse processo, aprendemos e dominamos o uso de filtros personalizados. De fato, em muitos casos, os dados fornecidos a nós pela interface geralmente não são adequados para renderizar diretamente na página; portanto, essa função é muito importante e muito comumente usada.
resumo
Método de atributo de elemento de ligação 1.V
2.V-texto de texto Método de texto
3. Uso de filtros personalizados de Vue
apêndice
Site oficial da VUE
Detalhes da API do CNODEJS
Baixe o código -fonte desta série de tutoriais
Capítulo 1 do tutorial prático de Vuejs, construindo o básico e renderizando a lista
Tutorial prático Vuejs Capítulo 2, corrija erros e embeleza o tempo
Tutorial prático Vuejs Capítulo 3, usando o plug-in de layout para realizar a paginação
Este artigo foi originalmente escrito por Fungleo
Endereço de lançamento: http://blog.csdn.net/fungleo/article/details/51649074
Este artigo foi compilado no "Tutorial de aprendizado de componentes de front-end Vue.js", e todos são convidados a aprender e ler.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.