Lección 1: Vincular Vue.js y Axios en una página web
En la primera lección solo debemos integrar las librerías de Vue.js y Axios.js en el head de nuestra página web o documento html. Trataremos de responder las siguiente preguntas que cualquiera que empieza, se haria:
- ¿Cómo integrar Vue.js en una página web?
- ¿Cómo integrar Axios.js en una página web?
- ¿Cómo se que se ha cargado correctamente la librería Vue.js o Axios.js?
Existen dos formar de integrar varias formas, maneras y matices de integrar librerías en una aplicación web. En esta ocasión usaremos la forma más sencilla, la cual consiste en tomar las url del repositorio de JS o el CDN. El código es el siguiente:
CÓDIGO PARA INTEGRAR VUE.JS Y AXIOS.JS
<!DOCTYPE html>
<html>
<head>
<title>Integrando VUE.JS Y AXIOS</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
</head>
<body>
</body>
</html>
VERIFICAR LA CARGA CORRECTA DE LAS LIBRERÍAS
Ahora vamos a verificar si al menos carga correctamente vue.js con el código de ejemplo que tiene en su plataforma oficial.
Agregamos una capa div con el id #app y dentro una etiqueta párrafo todo ello dentro del tag body quedando asi
<div id="app">
<p>Hola {{mensaje}}</p>
</div>
Creamos un script al final del párrafo agregado
<script>
var app=new vue({
el:"#app",
data:{
mensaje:" Arequipa, La blanca ciudad "
}
})
</script>
Si todo funciona correctamente nos debe mostrar el mensaje "Hola Arequipa, La blanca ciudad". Con esto estamos verificando que se ha cargado Vue.js correctamente y tenemos todas las funcionalidades para el desarrollo de nuestro aplicación web.
4523 visitas
