Vue.js 2 Tutorial de introducción

¿Qué es Vue.js 2?

Vue.js es un framework de JavaScript que se enfoca principalmente en construir interfaces de usuario. Ya que solo se encarga de ‘manipular’ la capa de la vista puede ser integrado fácilmente con otras librerías. Vue.js es bastante ligero (17 kb) lo que hace que añadirlo a nuestros proyectos no vaya a tener un costo de velocidad o peso. Pero aún así, viene con una gran funcionalidad para crear aplicaciones de página simple. Algunas de las funcionalidades que nos ofrece son:

  • Filtros
  • Directivas
  • Enlace de datos (data binding)
  • Componentes
  • Manejo de Eventos (event handling)
  • Propiedades computadas
  • Render declarativo
  • Animaciones
  • Transiciones
  • Lógica en la plantilla

¿Cómo usar Vue.js?

Hay varias formas para usar este framework en nuestros proyectos, las más populares son:

  • Usando el CLI (Command Line Interface)
  • Instalándolo usando NPM (Node Package Manager)
  • Llamándolo desde un <script> tag in un archivo HTML

De estas tres opciones, la primera es la más ‘robusta’, este tutorial va a usar esta opción.

Vue CLI

Para poder usar el CLI tenemos que instalarlo en nuestro sistema. El CLI está disponible como un paquete en NPM, por lo tanto debemos tener instalado Node.js y NPM.

Para instalar el CLI usamos el siguiente comando en la consola

En linux o mac es necesario usar sudo

Una vez termine la instalación podemos usar el comando vue . Con este comando podemos inicializar un nuevo proyecto:

Este comando tiene 4 partes

  1. El comando vue, lo usamos para llamar el CLI
  2. init, estamos diciéndole al CLI que queremos inicializar un nuevo proyecto.
  3. webpack, es la plantilla que queremos usar. Hay varias plantillas, más información al respecto más adelante
  4. miaplicacion, es el nombre que le queremos dar a nuestro proyecto

Para completar la creación del proyecto tenemos que contestar unas preguntas:

Crear proyecto en vue js

Una vez hayamos contestado las preguntas, podemos ir al directorio ‘miaplicacion’ (el nombre del proyecto) e instalar las dependencias.

Las dependencias las instalamos corriendo

y luego podemos correr nuestra aplicación en un servidor de desarrollo con el siguiente comando

En la terminal (o consola) vamos a ver el siguiente mensaje

Y nuestro navegador automáticamente va a cargar la página en localhost y el puerto 8080

Estructura de una aplicación Vue

La siguiente es la estructura de carpetas y archivos que podemos ver dentro de nuestra carpeta ‘miaplicacion’:

Estructura de un proyecto Vuejs

Los archivos importantes son los siguientes:

index.html

Este archivo es la entrada a nuestra aplicación y tiene el siguiente código

En el código podemos ver un div con un id="app". En este div es donde vamos a ver todo el código que Vue JS va a generar.

src/main.js

En este archivo es donde nuestra aplicación se inicializa, este es el código:

en la parte superior podemos ver

Vue es el nombre de la clase principal del framework
App es el nombre del componente raíz de nuestra aplicación

Luego creamos una nueva instancia de la clase Vue (usando new) y la inicializamos pasándole un objeto al constructor. Este objeto tiene 4 propiedades:

  1. el: es el elemento (la etiqueta html) donde queremos mostrar el contenido de nuestra aplicación. En este caso estamos pasando ‘#app’ que es el id del div que tenemos en index.html.
  2. template: Es el código HTML que define nuestra aplicación (lo que queremos mostrar al usuario). En este caso solo vemos <App/> que no es un elemento de HTML. Este elemento está indicando que vamos a usar la plantilla (template) del componente App.
  3. components: La lista de componentes que son necesarios en la plantilla (template).

src/App.vue

En este archivo vemos la implementación del componente App, este es el código:

Este tipo de archivo se conoce como un componente de archivo simple (single-file component) porque definimos el html, js y css en el mismo archivo en las secciones template, script y style respectivamente.

En la sección template estamos definiendo el código HTML que queremos usar en nuestra página. Luego definimos la sección script, en la cual tenemos un objeto, default, el cual estamos exportando. Este objeto tiene (por ahora) dos propiedades:

name: el nombre del id sobre el cual este componente va a actuar. En este caso es ‘app’ y en la sección template podemos ver como tenemos un div con el mismo id. El componente va a tener acceso a todo el div.

components: los componentes que el componente actual (en este caso el componente raíz) necesita (Dependencias).

De la misma forma que lo vimos con el archivo main.js, en App.vue estamos diciendo que necesitamos el componente Hello dentro del componente App. Este subcomponente lo podemos encontrar en la carpeta components:

Hello.vue

Este archivo también es una plantilla de archivo simple con las tres secciones que vimos antes; template, script y style.

Y de la misma forma estamos exportando, en la sección script, el objeto de configuración del componente. En el componente Hello vemos esta vez un método llamado data. Este método retorna un objeto el cual representa el modelo del componente. Propiedades definidas en el modelo pueden ser usadas en el template del componente usando interpolación ({{ }}). Este modelo solo tiene una propiedad, llamada msg. Y estamos mostrando el contenido de esta variable en el template usando interpolación:

La interpolación requiere el uso de corchetes dobles con el nombre de la propiedad que queremos mostrar en nuestro template.

En las sección style, podemos ver algo diferente, podemos ver que tenemos también la opción scoped. Scoped quiere decir que el CSS que definimos en la sección styles va a ser usado únicamente en la plantilla actual y no afectará otras plantillas.

Si quieres aprender más sobre Vue.js 2 no te pierdas nuestro curso!

6 agosto, 2017

0 respuestas en "Vue.js 2 Tutorial de introducción"

Deja un mensaje

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Aprende Fácilmente© Todos los derechos reservados