Aplicación web VueJS para consulta a API externa

Resumen

VueJS permite extender las funcionalidades y atributos basados en HTML por medio de directivas con funcionalidades integradas. A continuación se brindarán algunos conceptos básicos de Vue y de algunas herramientas de desarrollo web con el fin de crear una pequeña aplicación funcional con VueJS, Bootstrap, Jquery y axios.

Detalles

Componentes de la aplicación

A. En el archivo html llamado index que servirá para maquetar la estructura única de la aplicación con ayuda de la librería Bootstrap y además servirá para declarar las librerías que se utilizaran.

En la sección <head> del documento declarare los estilos y paquetes de iconos a utilizar.

2. El siguiente componente del objeto Vue por definir es la función created la cuál se ejecutara en el momento en que se crea el objeto el cual para este caso será al momento de cargar la página por lo que se hace uso de axios que es un cliente HTTP basado en promesas que servirá para consumir los recursos del API. De está  forma se obtienen los datos del primer país a cargar (CR) y el listado de países.

3. El último elemento del objeto Vue corresponde a la función methods que almacenara las funciones que se llegaran a ejecutar al realizar un evento en la aplicación. En este caso la función se llama paisseleccionado y se encargara de consultar las estadísticas del Covid-19 conforme al país que se seleccione.

C. Finalmente se debe hacer uso de las directivas de Vue en el html para vincular los elementos del html con los datos de la aplicación.

1. Se declara el id llamado serv como elemento padre del resto de elementos html, es el limitador sobre en que elementos la instancia Vue creada podrá ser utilizada ya que puede haber más de un objeto Vue en una misma página.
2. Se hace uso de la directiva v-model que vincula el valor del html a los datos de la aplicación cómo  en el caso de paisCode que se usa para cargar el código de país seleccionado.
3. Los eventos como el definido en la función methods de Vue  llamada paisseleccionado pueden ser declarados por @change.
4. La directiva v-for vincula una matriz de objetos Vue con una matriz de elementos html.
5. Vue utiliza las llaves dobles {{}} como marcadores de posición para los datos. Por lo que los objetos definidos en el se  renderizaran en el navegador.
6. Dentro de los marcadores {{}} se pueden utilizar otro par de {{}} después de declara una , para utilizar helpers o código Javascript para realizar operaciones lógicas o matemáticas o para dar formato a cadenas de texto o convertir a tipos de datos.