¿Quieres aprender Vue.js desde cero? Obtenga una colección completa de libros de Vue que cubren aspectos fundamentales, proyectos, consejos y herramientas y más con SitePoint Premium. Únase ahora por solo $ 9 / mes o pruebe nuestra prueba gratuita de 7 días .
La mayoría de las veces, al crear su aplicación JavaScript, querrá obtener datos de un Fuente remota o consumir una API . Recientemente busqué en algunas API disponibles al público y descubrí que hay muchas cosas interesantes que se pueden hacer con los datos de estas fuentes.
Con Vue .js puede, literalmente, crear una aplicación en torno a uno de estos servicios y comenzar a ofrecer contenido a los usuarios en cuestión de minutos.
Mostraré cómo crear una aplicación de noticias simple que muestre los artículos de noticias más importantes del día. usuarios para filtrar por su categoría de interés, obteniendo datos de la API del New York Times . Puede encontrar el código completo para este tutorial aquí .
Aquí se verá la aplicación final:
Para seguir este tutorial , necesitarás un conocimiento muy básico de Vue.js. Puede encontrar una gran guía de inicio para aquí . También usaré la Sintaxis de ES6, y puedes actualizarlo aquí .
Estructura del proyecto
Mantendremos las cosas muy simples al limitarnos a solo 2 archivos: [19659011] ./ app.js
./index.html
app.js contendrá toda la lógica de nuestra aplicación, y el archivo index.html contendrá la vista principal de nuestra aplicación.
Comenzaremos con un marcado marcado básico en index.html :
La mejor aplicación de noticias de siempre
VueNews
A continuación, incluye Vue.js y app.js en la parte inferior del índice . html justo antes de la etiqueta de cierre :
https://unpkg.com/vue
http://app.js
Opcionalmente, se puede incluir Foundation para aprovechar algunos estilos prefabricados y hacer que nuestra vista se vea un poco mejor. Incluya esto dentro de la etiqueta :
Creando una aplicación Vue simple
Primero, crearemos una nueva instancia de Vue en el elemento div # app y simularemos la respuesta del API de noticias utilizando algunos datos de prueba:
// ./app.js
const vm = new Vue ({
el: '#app',
datos: {
resultados: [
{title: "the very first post", abstract: "lorem ipsum some test dimpsum"},
{title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},
{title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},
{title: "four the last time", abstract: "lorem ipsum some test dimsum"}
]
}
});
Le decimos a Vue en qué elemento se monta, a través de la opción el y especificamos qué datos usaría nuestra aplicación a través de la opción datos .
Para mostrar este simulacro datos en nuestra vista de aplicación, podemos escribir este marcado dentro del elemento #app :
.
La directiva v-for se utiliza para representar nuestra lista de resultados. También utilizamos llaves dobles para mostrar el contenido de cada una de ellas.
Nota: puede leer más sobre la sintaxis de la plantilla de Vue aquí .
Ahora tenemos la trabajo de diseño básico:
Obtención de datos de la API
Para utilizar la API de NYTimes, deberá obtener una clave API. Entonces, si aún no tiene uno, diríjase a su página de registro y regístrese para obtener una clave de API para el API .
.
Realización de solicitudes de Ajax y manejo de respuestas
Axios es un cliente HTTP basado en la promesa para realizar solicitudes de Ajax, y funcionará muy bien para nuestros propósitos. Proporciona una API simple y rica. Es bastante similar a la fetch API pero sin la necesidad de agregar un polyfill para navegadores antiguos, y algunas otras sutilezas .
Nota: anteriormente, vue-resource se usaba comúnmente en los proyectos de Vue, pero ahora se retiró .
Incluyendo axios:
https://unpkg.com/axios/dist/axios.min.js
Ahora podemos hacer una solicitud para obtener una lista de las mejores historias de la sección home una vez que nuestra aplicación Vue esté montada :
// ./app.js
const vm = new Vue ({
el: '#app',
datos: {
resultados: []
}
montado () {
axios.get ("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
.then (response => {this.results = response.data.results})
}
});
Recuerda: reemplaza your_api_key con tu clave API real obtenida de NYT Dev Network area .
Ahora podemos ver las noticias en nuestra Página de inicio de la aplicación. No te preocupes por la visión distorsionada; llegaremos a eso en un momento:
La respuesta de la API de NYT se ve así, a través de devtools de Vue:
Sugerencia: Obtenga Vue Devtools para facilitar la depuración de las aplicaciones de Vue.
Para hacer nuestro trabajo un poco más limpio y reutilizable, haremos algunos pequeños refactorizando e introduciendo una función de ayuda para construir nuestras URL. También registraremos getPosts como un método para nuestra aplicación agregándolo a los métodos objeto :
const NYTBaseUrl = "https: //api.nytimes. com / svc / topstories / v2 / ";
const ApiKey = "your_api_key";
función buildUrl (url) {
devolver NYTBaseUrl + url + ".json? api-key =" + ApiKey
}
const vm = new Vue ({
el: '#app',
datos: {
resultados: []
}
montado () {
this.getPosts ('home');
}
métodos: {
getPosts (sección) {
let url = buildUrl (section);
axios.get (url) .then ((response) => {
this.results = response.data.results;
}). catch (error => {console.log (error);});
}
}
});
Podemos realizar algunos cambios más en el aspecto de nuestra vista al introducir una propiedad computada con algunas modificaciones a los resultados originales devueltos por la API:
// ./app.js
const vm = new Vue ({
el: '#app',
datos: {
resultados: []
}
montado () {
this.getPosts ('home');
}
métodos: {
getPosts (sección) {
let url = buildUrl (section);
axios.get (url) .then ((response) => {
this.results = response.data.results;
}). catch (error => {console.log (error);});
}
}
calculado: {
procesadoPublicaciones () {
deja posts = this.results;
// Añadir atributo image_url
posts.map (post => {
vamos imgObj = post.multimedia.find (media => media.format === "superJumbo");
post.image_url = imgObj? imgObj.url: "http://placehold.it/300x200?text=N/A";
});
// Poner Array en Chunks
sea i, j, chunkedArray = [] chunk = 4;
para (i = 0, j = 0; i <posts.length; i + = chunk, j ++) {
chunkedArray [j] = posts.slice (i, i + chunk);
}
volver chunkedArray;
}
}
});
En el código anterior, en la propiedad computada processingPosts adjuntamos un atributo image_url a cada objeto de artículo de noticias. Hacemos esto en bucle a través de los resultados de la API, y buscando a través de la matriz multimedia de cada resultado para encontrar un tipo de medio con el formato que necesitamos. Luego, asignamos la URL de ese medio al atributo image_url . En los casos en que los medios no están disponibles, hacemos que la URL predeterminada sea una imagen de Placehold.it .
También escribimos un bucle para agrupar nuestra matriz de resultados en trozos de cuatro Esto se encargará de la visión distorsionada que vimos anteriormente.
Nota: También puedes hacer esta fragmentación fácilmente con una biblioteca como Lodash .
Las propiedades computadas son excelentes para manipulando los datos. En lugar de crear un método y llamarlo cada vez que necesitamos dividir nuestro conjunto de publicaciones, simplemente podemos definirlo como una propiedad computada y usarla como deseemos, ya que Vue actualizará automáticamente las procesadoPosts computado propiedades en cualquier momento resultados cambios.
Las propiedades computadas también se almacenan en la memoria caché según sus dependencias, por lo que mientras resultados no cambie, la propiedad processingPosts devuelve Una versión en caché de sí mismo. Esto ayudará con el rendimiento, especialmente cuando se realiza una manipulación de datos compleja.
A continuación, editamos nuestro marcado en index.html para mostrar nuestros resultados calculados:
![]()
Ahora la aplicación se ve un poco mejor:
Presentando un componente de la lista de noticias
Los componentes pueden usarse para mantener La aplicación es modular, y básicamente amplía HTML. La "lista de noticias" se puede refactorizar a un componente para que, por ejemplo, si la aplicación crece y se toma la decisión de usar la lista de noticias en cualquier otro lugar, será fácil:
// ./app.js
Vue.component ('lista de noticias', {
utilería: ['results'],
plantilla: `
![]()
`,
calculado: {
procesadoPublicaciones () {
deja posts = this.results;
// Añadir atributo image_url
posts.map (post => {
vamos imgObj = post.multimedia.find (media => media.format === "superJumbo");
post.image_url = imgObj? imgObj.url: "http://placehold.it/300x200?text=N/A";
});
// Poner Array en Chunks
sea i, j, chunkedArray = [] chunk = 4;
para (i = 0, j = 0; i {
this.results = response.data.results;
}). catch (error => {console.log (error);});
}
}
});
En el código anterior, registramos un componente global usando la sintaxis Vue.component (tagName, opciones) . Es recomendable utilizar un guión al definir los nombres de las etiquetas, para que no coincidan con ninguna de las etiquetas HTML actuales o futuras.
Las opciones adicionales que presentamos se explican a continuación.
- Props : esto es un matriz de datos que queremos pasar el componente desde el ámbito principal. Agregamos
resultadosporque cargamos eso desde la instancia principal de la aplicación. - Plantilla : aquí definimos el marcado para la lista de noticias. Observe que envolvimos nuestra lista en una etiqueta
div.rowiteración).
Ajuste de nuestro marcado para usar nuestras noticias -list componente, y pasándole los datos de resultados se ve así:
VueNews
Nota: los componentes también se pueden crear como componentes de un solo archivo ( .vue ), y luego se analizan mediante una herramienta de compilación como webpack . Aunque esto está fuera del alcance de este tutorial, se recomienda para aplicaciones más grandes o más complejas.
Para llevar las cosas más lejos, incluso puede decidir ir a hacer de cada artículo un componente y hacer las cosas aún más modulares. .
Implementación de filtros de categoría
Para enriquecer nuestra aplicación, ahora podemos introducir filtros de categoría para permitir a los usuarios mostrar solo ciertas categorías de noticias.
Primero, registraremos la lista de secciones y la sección que está visto en nuestra aplicación:
const SECTIONS = "hogar, artes, automóviles, libros, negocios, moda, comida, salud, información privilegiada, revista, películas, nacional, nyregion, obituarios, opinión, política, realestate, ciencia, deportes, sundayreview, tecnología, teatro, revista, viajes, resultados, mundo "; // Desde NYTimes
const vm = new Vue ({
el: '#app',
datos: {
resultados: [],
secciones: SECTIONS.split (','), // crear una matriz de las secciones
sección: 'home', // establece la sección predeterminada en 'home'
}
montado () {
this.getPosts (this.section);
}
// ....
});
A continuación, podemos agregar esto dentro de nuestro div # app contenedor:
Filtrar por categoría
Cuando se hace clic en el botón "Recuperar", activamos el método getPosts para la sección seleccionada escuchando el evento click con la sintaxis @click .
Toques finales y demostraciones
Decidí agregar algunos toques menores (opcionales) para mejorar la experiencia de la aplicación, como introducir una imagen de carga.
Puedes ver una demostración en el CodePen a continuación ( funcionalidad limitada):
Vea la aplicación VueJS and NYTimes News de SitePoint ( @SitePoint ) en CodePen . Alternativamente, usted puede ver una versión en vivo aquí .
Conclusión
En este tutorial, hemos aprendido cómo comenzar un proyecto Vue.js desde cero, cómo obtener datos de una API usando axios y cómo manejar las respuestas y manipular los datos utilizando componentes y propiedades computadas.
Ahora tenemos una aplicación funcional Vue.js 2.0 ap p, construido alrededor de un servicio API. Hay un montón de mejoras que podrían realizarse al conectar algunas otras API. Por ejemplo, podríamos:
- poner en cola automáticamente las publicaciones de los medios sociales de una categoría usando la API de búfer
- . Marcar las publicaciones para leerlas más tarde, usando la API de bolsillo
… y así
El código completo para este proyecto también está alojado en GitHub por lo que puede clonar, ejecutar y realizar las mejoras que desee.
READ MORE – CLICK HERE
www.Down.co.ve
from Down.co.ve http://bit.ly/2Un8h6e
via www.Down.co.ve
stips 