Tutorial práctico de Vue.js

Posted on:20 abril, 2017

Author:Andros Fenollosa Hurtado

Category:programación, Uncategorized

Share: / /

 

Vue.js es un framework  que se enfoca en la construcción de las interfaces de usuario. Esta herramienta sólo trabaja con la capa de vista  de la aplicación, es decir todo lo relacionado con el usuario. No hace referencia al modelo o base de datos al menos por si sólo. Como su propia definicion indica, es un framework progresivo, es decir, se diseño desde su base para que se adopte incrementalmente. Diseñado para que sea facilmente integrado con otros proyectos o librerias pero al mismo tiempo capaz de crear aplicaciones muy potentes que se actualizan al mismo tiempo que el usuario interacciona con la aplicación.

 

Instalación

La forma en la que empezaremos la configuración de Vue.js es a traves de su CLI. Para ello es necesario instalar node.js con anterioridad, lo podemos hacer desde su página web. Una vez instalado, abrimos una terminal y ejecutamos las siguientes instrucciones:

$ npm install -g vue-cli

La primera instrucción instala la interfaz de comandos de vue mediante el gestor de paquetes de node.

$ vue init webpack myapp

Una vez instalado el cli, nos dirigimos al directorio donde queremos tener el proyecto e iniciamos un proyecto vue mediante la anterior instruccuión.

La isntalación realiza una serie de preguntas, en ellas podemos dejar la opción por defecto y contestar que no a la instalación de componentes adicionales para una instalación mas simple.

$ cd myapp
$ npm install

La anterior instrucción instala todos los paquetes node necesarios, y que se encuentra en el archivo package.json.

$ npm run dev

Finalmente ejecutamos el servidor y una vez en funcionamiento se abrirá un navegador automaticamente en el que visualizaremos la página de inicio de Vue.

 

Primeros pasos

En el proyecto creado hay que tener en cuenta 3 archivos principales:

  • src/main.js: Creación del componente Vue y su configuración. Observaremos que importa y carga el componente principal App.vue
  • src/App.vue: Componente principal del proyecto que carga el sub-componente Hello.vue.
  • src/components/Hello.vue: Primer componente del proyecto.

Cuando hacemos referencia al término componente, se entiende como una parte especifica de una aplicación que realiza una funcionalidad determinada y que se puede extraer de la composición general. Los componentes nos ayudan a dividir una aplicación relativamente grande en trozos más pequeños para facilitar el trabajo de desarrollo.

Estudiando un componente como App.vue nos damos cuenta de que se compone de 3 etiquetas diferenciadas y que componen cada componente que vayamos a crear en un futuro:

  • <template></template>
  • <script></script>
  • <style></style>

El primer paso en este tutorial es eliminar todo aquello que no haga falta en el componente principal App.vue. Además crearemos un nuevo componente en src/components que llamaremos Animales.vue y que cargaremos dentro de App.vue. Finalmente el App.vue debe tener este aspecto:

<template>
 <div id="app">
 <animales></animales>
 </div>
</template>

<script>
import Animales from './components/Animales'
export default {
 name: 'app',
  components: {
   Animales
  }
}
</script>

<style></style>

Si abrimos la consola del inspector del navegador al cargar el proyecto observamos que hay un error que nos dice que falla al tratar de cargar el componente, en este caso Animales.vue. Esto es debido a que Animales.vue está vacío. Arreglamos esto añadiendo los 3 elementos principales y una configuración básica, por lo que Animales.vue queda  así:

<template>
 <div class="animales">
 {{titulo}}
 </div>
</template>

<script>
export default {
 name: 'animales',
 data () {
  return {
   titulo: "Animales",
  }
 }
}
</script>

<style></style>

En Animales.vue observamos una de las principales características de Vue.js. Dentro de el componente template, hay un trozo de html básico y el elemento {{titulo}}, este elemento esta asociado con la parte del script del componente en el que si nos fijamos en la linea ‘titulo: “Animales”,’ comprenderemos que al recargar el proyecto en el navegador ahora aparecerá el texto Animales. Intuimos así que se ha establecido un enlace entre {{titulo}} y la asociación de  la variable con la palabra Animales en el momento de renderizar la página. De esta manera podemos asociar valores dinamicamente en una pagina web mediante el poder de javascript.

 

Data binding

Si ampliamos nuestra plantilla de Animales.vue, con el siguiente código:

<template>
 <div class="animales">
  {{titulo}}
 <br>
  <input type="text" v-model="animal">
 <br>
  {{animal}}
 </div>
</template>

<script>
export default {
 name: 'animales',
 data () {
  return {
   titulo: "Animales",
   animal: "Perro",
  }
 }
}
</script>

<style></style>

Ahora observamos que hay un elemento nuevo elemento en elemento script y que devuelve una nueva variable, animal: “Perro”. De esta manera en la parte de template, se enlazara con {{animal}}. Aparte, tenemos un nuevo elemento html input, que contiene un atributo llamado v-model y que esta enlazado a animal (v-model=”animal”), este atributo es propio de Vue.js e indica que cualquier dato que insertemos en el input se ligará automáticamente a la variable correspondiente mostrando dinámicamente el cambio en el html en caso de que la variable {{animal}} esté presente.

 

Bucles

En la parte de script también podemos crear variables complejas como un array de elementos clave elemento que nos pueden ayudar a ordenar nuestros datos. Para este ejemplo crearemos el siguiente array de animales:

 animales: [
  {nombre: "Gato", tipo:"Terrestre"},
  {nombre: "Águila", tipo:"Aereo"},
  {nombre: "Carpa", tipo:"Acuático"}
 ]

Para representar estos datos en la plantilla haremos uso del atributo v-for de Vue. Añadiremos una lista html debajo de los datos anteriores:

<ul>
 <li v-for="elementoAnimal in animales">
  Nombre: {{elementoAnimal.nombre}}, Tipo: {{elementoAnimal.tipo}}
 </li>
</ul>

De esta manera, en el navegador aparece una lista de los tres elementos introducidos anteriormente. Observamos que v-for necesita una cadena de texto que indica el recorrido para cada uno de los elementos dentro del bucle.

Concluimos la explicación de los elementos fundamentales del desarrollo en Vue.js. Es una herramienta muy poderosa y apenas se ha dejado ver todo su potencial en este tutorial. Si te has quedado con ganas de más, te recomendamos que investigues por tu propia cuenta o dejes un comentario pidiendo más tutoriales de este tipo.

Leave a comment