sábado, 17 de marzo de 2018

Aprendamos Vue desde cero hasta un SPA | Instalación y nuestro primer hola mundo



Hola amigos en esta ocasión vamos a realizar la instalación de vue y luego nuestro clásico Hola mundo.

1. INSTALACIÓN

Vue es un framework que tiene varias maneras de ser instalado:

  • CDN
  • NPM
  • CLI

A TRAVÉS DE CDN

Basta con linkear la libreria de vue en su plantilla HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS Example</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>

A TRAVÉS DE NPM


Recuerdan que en el capitulo anterior instalamos nodejs con la finalidad de usar npm, bueno aquí lo usaremos por primera vez:
mkdir vue &&
cd vue &&
npm init &&
npm install vue

VUE CLI

Vue.js proporciona un CLI oficial para gestionar la creacion de SPA el cual nos provee muchas herramientas pero en esta ocasión evitare hablar de este debido a que más adelante le dedicare una publicación entera, cuando realice esa publicación actualizare esta sección.

2.NUESTRO PRIMER HOLA MUNDO



Bueno para la realización de nuestro primer hola mundo usaremos nuestra plantilla html con vuejs incrustado en este y usaremos las etiquetas <script> </script> para crear nuestra primera instancia de un objeto de vue:

Como podemos observar hemos creado un objeto vue el cual esta formado por un json (key:value) este objeto entre sus elementos podemos listar:

  • el:  Nombre del elemento principal
  • data:  Define las propiedades de la clase
  • mounted: Grupo de instrucciones que se ejecutan automáticamente cuando se renderiza la vista
  • methods: Grupo de funciones disponibles para ejecutarse dentro de la vista.
  • computed: Funciones que alteran las propiedades de una clase.
No se preocupen si no entienden mucho esta parte más adelante lo harán ya que tocaremos a cada uno de ellos a través de ejemplos. Lo más importante aqui es entender que representa elemento "el" y el elemento "data" dentro del objeto vue.
Podemos observar en nuestro código anterior la existencia de un <div> </div> con el id "main" y si nos ponemos a analizar nuestro objeto vue, podemos observar que el elemento "el" tiene como valor a "main", esto quiere decir que todas las propiedades y metodos definidos en nuestro objeto vue solo funcionaran dentro de el div que tiene como id a main.
Analizando tambien podemos notar que tenemos una propiedad "saludo" el cual tiene por defecto el valor de "Hola mundo" y con la cual podremos trabajar en las vistas mediante la interpolación {{ }}

El resultado






Bueno amigos esto es todo por el momento y conmigo sera hasta la próxima oportunidad.
banner
Previous Post
Next Post

Hola, me llamo Andrés.Soy egresado de la carrera de Ingeniería Informática en la Universidad Nacional de Trujillo (Perú).Me considero autodidacta de corazón ,amante del mundo de la programación, software libre y hacking ético

0 comentarios: