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:

  • src
    • 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>
    

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 }}.

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.

© 2019 Todos los derechos reservados
contactoforcsec@gmail.com

Desarrollos


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