Prefacio
En el capítulo anterior, presentamos con éxito la página de la lista a través de la construcción básica. Sin embargo, hay muchos problemas. En este capítulo, resolveremos estos problemas.
Utilice V-Bind para vincular los datos.
En el capítulo anterior, representamos la página. Sin embargo, si se abre la consola, encontrará un error. Como se muestra en la figura a continuación:
Esto se debe a que cuando llegue la página, nuestro código HTML se ejecutará primero, y en este momento, nuestro Vue no ha comenzado a funcionar. Nuestro código es el siguiente:
<li v-For = "Info In Data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.loginname}} </span> </i> <time> {{info.create_at}}} </beo> <a href = " }} "> {{info.title}} </a> </li>Como se mencionó anteriormente, cuando la página analiza src = "{{info.author.avatar_url}}", por supuesto, esta ruta de imagen no se puede encontrar. Por lo tanto, un error ocurrirá naturalmente. Por lo tanto, necesitamos procesar este código. Lo modificamos a
<img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname">
Ok, actualizemos la página, esta vez, no hay error.
Puntos de conocimiento de Vue
V-Bind Atributo vinculante http://vuejs.org.cn/api/#v-bind
Reponer:
De hecho, cuando abrimos la página, todavía podemos ver estos contenidos {{...}} en un instante. Aunque esto no informará un error, aún afecta un poco de experiencia en el usuario. En este momento, podemos usar V-Text para generar estos contenidos. Como se indicó anteriormente, modificamos el código a lo siguiente:
<li v-For = "Info in Data"> <i> <img v- bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname"> <span v-text = "info.author.loginname href = "content.html? {{info.id}}" v-text = "info.title"> </a> </li>Cuando modificamos el código a esto, se resuelven todos los problemas.
Puntos de conocimiento de Vue
Texto de salida v-text http://vuejs.org.cn/api/#v-text
Embellecer el tiempo
El formato de tiempo que obtenemos de la interfaz es como este 2016-06-12T06: 17: 35.453z. Obviamente, este no es el efecto que queremos. El efecto que queremos debe ser así como se publica hace 2 horas. ¿Cómo hacerlo?
Necesitamos una función, que se usa para darle una cadena primitiva y luego devolver una cadena que queremos.
El principio de esta función no es nuestro enfoque. No lo explicaré aquí. Solo miro el código de la siguiente manera:
function GoodTime (str) {var Now = new Date (). GetTime (), OldTime = New Date (Str) .GetTime (), Difference = Now - OldTime, resultado = '', minuto = 1000 * 60, hora = minuto * 60, día = hora * 24, HalfMonth = Day * 15, mes = día * 30, año = mes * 12, _YiA = Difering/Year, _ Month, Difference, Difference, Month, ‘wwee _day = Difference/Day, _Hour = Difference/Hour, _min = Difference/Minute; if (_year> = 1) {resultado = "publicado en" + ~~ (_year) + "hace año"} else if (_month> = 1) {result = "publicado en" + ~~ (_month) + "hace un mes"} más if (_week> = 1) "Publicado en" + ~~ (_day) + "hace día"} else if (_hour> = 1) {result = "publicado en" + ~~ (_hour) + "hora hace"} else if (_min> = 1) {result = "publicado en" + ~~ (_min) + "minuto"} el más resultado = "solo"; solo "; Resultado de retorno;}El código tiene una parte de los préstamos del código de otras personas.
Ok, ahora, podemos usar una función de método Good Time (STR) para modificar el formato de tiempo que nos dio la interfaz a lo que queremos. La pregunta ahora es, ¿cómo podemos usar esta función?
Método estúpido, modifique directamente los datos originales
Primero, obtenemos los datos a través de AJAX y luego entregamos los datos para que Vue para representar. Luego podemos realizar una operación en el medio, procesar todos los datos y luego entregar los datos procesados para que vue para representar. Este problema se puede resolver.
Solo hazlo, veamos el código:
función pushdom (data) {// Primer traversal y modifica todo el tiempo en los datos para (var i = 0; i <data.data.length; i ++) {data.data [i] .create_at = goodtime (data.data [i] .create_at); }; // luego deje que vue para representar var vm = new Vue ({el: '.list', data: data});}Ok, a través del procesamiento anterior, echemos un vistazo al efecto de la página final. Como sigue:
Éxito.
Método de filtro personalizado VUE
Aunque tuvimos éxito anteriormente, realmente no es elegante crear un bucle for directamente antes de Vue. Además, queremos aprender Vue, ¿dónde es esta la única forma de aprender ...
Ok, usemos la función de filtro personalizado de Vue para procesarla.
Tutorial oficial, filtro personalizado http://vuejs.org.cn/guide/custom-filter.html
función pushdom (data) {// use el filtro personalizado Vue para esculpir el tiempo pasado en la interfaz vue.filter ('time', function (valor) {return GoodTime (valor);}) var vm = new Vue ({el: '.list', data: data});};};Y necesitamos modificar nuestra parte HTML de la siguiente manera:
<TIME V-TEXT = "Info.Create_at | Time"> </Time>
Ok, el efecto de implementación es exactamente el mismo. Pero el código se ve mucho más elegante. La clave es que en este proceso, hemos aprendido y dominado el uso de filtros personalizados. De hecho, en muchos casos, los datos que nos dieron la interfaz a menudo no son adecuados para representar directamente en la página, por lo que esta función es muy importante y es muy comúnmente utilizada.
resumen
1. Método de atributo de elemento de unión de unión a V
2. Método de texto de salida de texto V
3. Uso de filtros personalizados VUE
apéndice
Sitio web oficial de VUE
Detalles de la API de CNODEJS
Descargue el código fuente de esta serie de tutoriales
Capítulo 1 del tutorial práctico de Vuejs, construyendo los conceptos básicos y presentando la lista
Tutorial práctico de Vuejs Capítulo 2, corrige errores y embellece el tiempo
Tutorial práctico de Vuejs Capítulo 3, utilizando el complemento de diseño para realizar la paginación
Este artículo fue escrito originalmente por Fungleo
Primera dirección de lanzamiento: http://blog.csdn.net/fungleo/article/details/51649074
Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.