Tabla de contenidos

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.

<!– Bootstrap CSS –>
<link rel=”icon” href=”img/logo.svg”>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css” integrity=”sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk” crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css”>
En la sección final del elemento <body> se cargan los recursos de Javascript como son Jquery, fontawsome, axios, vue y el archivo estadisticas-vue.js.
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js” integrity=”sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js”></script>
<script type=”text/javascript” src=”js/estadisticas-vue.js”></script>
B. En el archivo estadisticas-vue.js se declaran las funcionalidades de Vue y se realizaran las peticiones a la API externa corona-api para consultar las últimas actualizaciones referentes a los casos de Covid-19.
1. Se declara la función ready de Jquery en el documento para cargar los funciones al momento de cargar el documento en el navegador. En esta función se crea una instancia del nuevo objeto Vue que inicializa las propiedades.
La propiedad el: vincula el objeto Vue al elemento html con id=”#serv” que envuelve todos los elementos html.
La propiedad data define los elementos que almacenaran la información de la aplicación que se les asignara al momento de consumir los servicios del API. La propiedad data.paisesList corresponderá a un arreglo con el listado de países a consultar, paisCode representa el código de país a consultar, por defecto consultara los datos de Costa Rica por lo que el código es “CR”. La propiedad paisDatos almacenara las estadísticas referentes a los casos de Covid-19 según el país escogido.

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.
  

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Current day month ye@r *

ecofirma

Visita Nuestro Gestor Documental Ecofirma.

Visita ecofirma

Pasantía en Desarrollo de Software. 

Envia tu curriculum a la dirección:  talento@rolosa.com

Descripción de la pasantía

Esta pasantía se caracteriza por incrementar las capacidades de programación de la persona, y perfeccionamiento de lenguajes con el tinte de incursión en desarrollo de software, páginas web y mantenimiento de las mismas. 

Conocimientos y requisitos

Beneficios y Compensación
Una pasantía en ROLOSA le permite al/la pasante no solo ganar experiencia sino desarrollar habilidades para mejorar confianza, seguridad y comunicación necesarias en los primeros años de actividad profesional, además de desarrollar las destrezas técnicas.

La pasantía en ROLOSA es de 6 meses, horario de 8 am a 5pm, NO renovable y tiene una asistencia económica de 100.000 colones mensuales. Al finalizar la pasantía, cabe la posibilidad de obtener una plaza fija, sujeta a disponibilidad.

ROLOSA se dedica al desarrollo y distribución de diferentes tecnologías.