Lo que debes saber de VueJS

Vue.js es un marco de trabajo JavaScript de código abierto, desarrollado por Evan You, mantenido por él y la comunidad de desarrollo, así como diferentes compañías. Vue es usado para desarrollar aplicaciones de una sola página, es fácil de aprender, usar e integrar con proyectos ya existentes, tiene muchos plugins, por lo que es uno de los más completos.

¿Qué conocimientos previos debo tener antes de empezar con Vue?

Gracias a que Vue es muy sencillo, solo tienes que saber conceptos básicos de desarrollo Web, Vue nos permite solo ser agregado en ciertas partes de la página y continuar trabajando con otras tecnologías, sin entorpecer.

Instalación

Para empezar, es necesario agregar Vue a su proyecto:

Descargar los scripts:

Para esto podemos descargarlo en https://vuejs.org/v2/guide/installation.html, clic en el botón versión de desarrollo y versión de producción, la versión de desarrollo nos permitirá usar una extensión en el navegador https://github.com/vuejs/vue-devtools#vue-devtools, para inspeccionar y depurar código, cuando pasemos a producción abra que referenciar ahora el archivo .min que es el de producción, este bloquea el uso de la extensión Vue Devtools.

NPM

NPM es el método de instalación recomendado cuando se crean aplicaciones a gran escala con Vue. Se combina muy bien con los paquetes de módulos como Webpack o Browserify.


                    npm install vue

Empezando

Todo se entiende mejor con un ejemplo, para esto vamos a crear la siguiente estructura:

vue.js

index.html

Dentro de la carpeta src pegaremos el archivo js que descargamos de la página de Vue llamado vue.js. Iniciamos el html con el siguiente código:


                  <!DOCTYPE html>
                  <html lang="es">
                  	<head>
                    </head>
                    <body>
                      <div>
                        <h1>Hola</h1>
                      </div>

                      <script src="./src/vue.js"></script>
                      <script>
                        //Aquí va el código Vue
                      </script>
                    </body>
                  </html>

Para esto ya tenemos instalado Vue ahora vamos a referenciarlo con el DOM ("Modelo de Objetos del Documento" o "Modelo en Objetos para la Representación de Documentos"), para esto vamos a agregar un id a la etiqueta div y crear la estructura básica de Vue, quedando de la siguiente forma:


                  <!DOCTYPE html>
                  <html lang="es">
                    <head>
                    </head>
                    <body>
                      <div id="app">
                        <h1>Hola</h1>
                      </div>

                      <script src="./src/vue.js"></script>
                      <script>
                        var app = new Vue({
                          el: '#app',
                        })
                      </script>
                    </body>
                  </html>

Genial, como puedes ver con "el" referenciamos dentro de que etiquetas va a trabajar Vue en este caso referenciamos con un id por eso se usa el: '#app' y si fuera una clase sería, el:'.app', ahora vamos a mostrar un mensaje desde JavaScript, vamos a crear una variable y vamos a llamarla en el h1, de la siguiente forma:


                  <!DOCTYPE html>
                  <html lang="es">
                    <head>
                    </head>
                    <body>
                      <div id="app">
                        <h1> { msg } </h1>
                      </div>

                      <script src="./src/vue.js"></script>
                      <script>
                        var app = new Vue({
                          el: '#app',
                          data: {
                            msg: 'Hola desde JS',
                          },
                        })
                      </script>
                    </body>
                  </html>

Nota: msg va dentro de doble llave {{}}

Lo que estamos haciendo es inicializar una variable llamada msg en Vue, para esto agregamos "data" e inicializamos la variable, para después llamarla dentro de la etiqueta h1 de la forma { msg } (dentro de doble llave {{}}).

En la segunda parte de este artículo se mostrará como indagar más con Vue, como trabajar con eventos, y ejemplos de las diferentes funciones de Vue.

Conclusión

Vue es uno de los marcos JavaScript más completos, ya que puedes agregar plugins conforme los vayas necesitando, si trabajas con Laravel en el Back-end, Vue es el mejor aliado para trabajar el Front-end.

Vue es sencillo, ligero y completo, tus proyectos Web, serán fáciles de desarrollar y de mantener y como ya viste solo es necesario tener conocimientos básicos de JavaScript para empezar con esta herramienta y empezar a crear.

Publicaciones

Comandos básicos para facilitar el desarrollo en Laravel

Lo que debes saber sobre el desarrollo de aplicaciones móviles

Lo que debes saber de VueJS

Pasar mi proyecto laravel a producción

Al navegar y hacer uso de nuestros servicios aceptas los términos y condiciones.

Lo que debes saber de VueJS

¿Qué conocimientos previos debo tener antes de empezar con Vue?

Instalación

Descargar los scripts:

NPM

Empezando

Conclusión

Publicaciones

Laravel

PHP

Base de datos

JavaScript

Linux

Windows

Informativo

Forcsec Todos los derechos reservados

Forcsec
Todos los derechos reservados