Curso de Vue.js - Clase #1 : Introducción [Framework Front End]
Introducción
Por cuestiones laborales, he aprendido Vue.js, un framework javascript de front end en el desarrollo web. Se utiliza para realizar desarrollos rápidos y permite escribir menos código pero sin perjudicar la vista.
Quiero enseñarles este framework javascript, garantizo que sera de mucha ayuda cuando estés en desarrollo de una pagina web. La curva de aprendizaje no es tan alta y podrás ponerlo en practica a pocos días de practicarlo.
¿Como lo utilizo?
Vamos a comenzar estableciendo todo lo necesario.
- Elige un Editor de Texto (Sublime text, visual studio code, Atom) ¿Como instalar Sublime text?
- Establece un documento basico de HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Curso de Vue.js - aprendedesdehoy.blogspot.com</title>
</head>
<body>
</body>
</html>
Copia y pega el código de arriba en un documento de texto.
- Guarda el documento de texto como index.html
- Visita la documentación oficial
Recomiendo ampliamente leer la guía de desarrollo.
- Copiamos la siguiente CDN. En nuestro index.html, lo pegamos justo antes de terminar la etiqueta </body>.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Estamos añadiendo la librería a nuestro documento y así poder trabajar con ella mas adelante.
- Añadimos el siguiente codigo dentro de la etiqueta <body>
<div id="app">
{{ msg }}
</div>
- Añadimos una etiqueta <script> a nuestro documento y añadimos las siguientes lineas.
el : "#app",
data : {
msg : "Hola mundo"
}})
En el body hemos añadido {{ msg }}, en esta parte mostraremos el contenido de la variable msg, la cual podemos ver que esta declarada en nuestro script.
Hemos utilizado el objeto Vue para poder utilizar sus funcionalidades, como parámetro ha recibido un objecto que tiene 2 propiedades el y data, "el" se encarga de señalarle a Vue en que parte de nuestro body va a ser utilizado. En este caso el div con id=app."Data" por su parte es un objeto y hemos declarado una propiedad msg que tiene valor "Hola mundo". Justo esta propiedad queremos mostrar en nuestra pagina web. Para hacerlo es suficiente abrir el documento con tu navegador web y ver el resultado.
Hemos finalizado con esto la introducción a Vue.js, has visto que es bastante sencillo comenzar a utilizarlo.
En proximas lecciones estaremos conociendo mas caracteristicas de este framework.
Comentarios
Publicar un comentario