materials

Conceptos básicos

Introducción

El uso de un framework nos facilita enormemente el trabajo a la hora de crear una aplicación. Vue es un framework progresivo para la construcción de interfaces de usuario y aplicaciones desde el lado del cliente. Lo de framework “progresivo” significa que su núcleo es pequeño pero está diseñado para crecer: su núcleo está enfocado sólo en la capa de visualización pero es fácil añadirle otras bibliotecas o proyectos existentes (algunos desarrollados por el mismo equipo de Vue) que nos permitan crear complejas SPA.

Su código es opensource y fue creado por el desarrollador independiente Evan You, lo que lo diferencia de los otros 2 frameworks más utilizados: Angular desarrollado por Google y React desarrollado por Facebook.

Vue tiene una curva de aprendizaje menor que otros frameworks y es extremadamente rápido y ligero.

Este material está basado en la guía oficial de Vue y veremos además los servicios de vue-router, axios y pinia (sustituto de vuex en Vue3) entre otros.

¿Qué framework es mejor? Depende de la aplicación a desarrollar y de los gustos del programador. Tenéis algunos enlaces al respecto:

Las razones de que veamos Vue en vez de Angular o React son, en resumen:

Usar Vue

Para utilizar Vue sólo necesitamos enlazarlo en nuestra página desde cualquier CDN como:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Esta no es la forma más recomendable de trabajar. Lo normal es crear un proyecto con npm que genere un completo scaffolding. Esto nos permitirá trabajar con componentes (Single File Components o SFC) lo que nos facilitará enormemente la creación de nuestras aplicaciones.

Un SFC es un componente reutilizable que se guarda en un fichero con extensión .vue. Para que VSCode reconozca correctamente los ficheros .vue debemos instalar la extensión Volar.

Estructura de una aplicación Vue

Vamos a crear la aplicación con Vue que mostrará un contador y un botón para actualizarlo:

Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}).mount('#app')

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue</title>
    <!-- Import Vue.js -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>

    <div id="app">
      <button @click="increment">
        Count is: {\{ count }}
      </button>
    </div>

    <!-- Import Js -->
    <script src="./main.js"></script>
  </body>
</html>

Podéis ver su funcionamiento en la documentación oficial de Vue o en CodePen.

En este ejemplo podemos ver las 2 principales características de Vue:

Para probar el funcionamiento de código tenemos el Palyground de Vue al que accedemos desde su documentación en [https://vuejs.org/guide/quick-start.html#try-vue-online].

HTML

En el HTML debemos vincular los scripts de la librería de Vue y de nuestro código.

Vue se ejecutará dentro de un elemento de nuestra página (al que se le suele poner como id app) que en este caso es un <div>.

Dentro de ese elemento es donde podemos usar expresiones de Vue (fuera del mismo se ignorarán). En este ejemplo se usa

Javascript

En el fichero JS debemos crear la aplicación con el método createApp (al que se le pasa un objeto con una serie de opciones) y montarla en el elemento del HTML donde se ejecutará dicha aplicación. En nuestro caso la única opción que se le pasa es data pero hay muchas más:

Vue.createApp({
  data() {
    return {
      count: 0,
      msg: 'Hola',
      ...
    }
  },

Fijaos que para hacer referencia desde Javascript a una variable (o a un método) hay que anteponerle this.

Además de las opciones data y methods podemos definir otras como:

data() {
  return {
    nombre: 'Juan',
    apellido: 'Segura', 
  }
},
computed: {
  nombreCompleto() {
    return this.nombre + ' ' + this.apellido;
  }
}

created() {
    console.log('instancia creada'); 
}

Estilos de API

La forma en que hemos programado estos ejemplos no es la más recomendable por lo que más adelante usaremos npm para crear un completo scaffolding que nos facilitará enormemente la creación de nuestras aplicaciones. Con ella dividiremos nuestra aplicación en componentes llamados Single File Components que incluirán en un único fichero tanto la lógica del componente (Javascript) como su presentación (HTML) y su apariencia (CSS).

Vue3 proporciona 2 formas diferentes de programar:

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: 8</button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: 8</button>
</template>

Binding de variables

En la Guía de la documentación oficial de Vue tenemos un tutorial guiado donde podemos probar cada una de las funcionalidades de Vue. En la parte superior izquierda nos pregunta por nuestras preferencias: de momento escogeremos Options y HTML, aunque enseguida cambiaremos a Options y SFC.

Haz el ejercicio del tutorial de Vue.js

Enlace unidireccional: interpolación {{…}}

Donde queramos mostrar en la vista el valor de una variable simplemente la ponemos entre dobles llaves:

<p>Contador: {\{ counter }}</p>

Y en el código Javascript sólo tenemos que declarar esa variable dentro del objeto devuelto por data():

  data() {
    return {
      counter: 0
    }
  }

Podemos ver esa variable y manipularla desde la consola, y si cambiamos su valor vemos que cambia lo que muestra nuestra página. Esto es porque Vue (al igual que Angular o React) enlazan el DOM y los datos de forma que cualquier cambio en uno se refleja automáticamente en el otro.

Enlazar a un atributo: v-bind

Para mostrar un dato en el DOM usamos la interpolación {{ }} pero si queremos nostrarlo como atributo de una etiqueta debemos usar v-bind:

  <p v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </p>

Vue incorpora estos ‘atributos’ que podemos usar en las etiquetas HTML y que se llaman directivas. Todas las directivas comienzan por v- (en Angular es igual pero el prefijo es ng-). Como la directiva v-bind se utiliza mucho se puede abreviar símplemente como : (el carácter ‘dos puntos’). El siguiente código es equivalente al de antes:

  <p :title="message">
Haz el ejercicio del tutorial de Vue.js

Enlace bidireccional: v-model

Tanto {{ }} como v-bind son un enlace unidireccional: muestran en el DOM el valor de un dato y reaccionan ante cualquier cambio en dicho valor.

Pero además está la directiva v-model que es un enlace bidireccional que enlaza un dato a un campo de formulario y permite cambiar el valor del campo al cambiar el dato pero también cambia el dato si se modifica lo introducido en el input.

  <input v-model="message">

See the Pen v-model by Juan Segura (@juanseguravasco) on CodePen.

Vemos que al escribir en el input automáticamente cambia lo mostrado en el primer párrafo. Esta característica nos permite ahorrar innumerables líneas de código para hacer que el DOM refleje los cambios que se producen en los datos.

NOTA: toda la aplicación se monta en el elemento app por lo que las directivas o interpolaciones que pongamos fuera del mismo no se interpretarán.

Haz el ejercicio del tutorial de Vue.js

[Vue devtools]

Es una extensión para Chrome y Firefox que nos permite inspeccionar nuestro objeto Vue y acceder a todos los datos de nuestra aplicación. Es necesario instalarlo porque nos ayudará mucho a depurar nuestra aplicación, especialmente cuando comencemos a usar componentes.

Podemos buscar la extensión en nuestro navegador o acceder al enlace desde la documentación de Vue.

Si tenemos las DevTools instaladas en la herramienta de desarrollador aparece una nueva opción, Vue, con 4 botones:

DevTools

Junto al componente que estamos inspeccionando aparece = $vm0 que indica que DevTools ha creado una variable con ese nombre que contiene el componente por si queremos inspeccionarlo desde la consola.

Cuando inspeccionamos nuestros componentes, bajo la barra de botones aparece otra barra con 3 herramientas:

NOTA: Si por algún motivo queremos trabajar sin servidor web (desde file://…) hay que habilitar el acceso a ficheros en la extensión.

DevTools

Extensiones para el editor de código

Cuando empecemos a trabajar con componentes usaremos ficheros con extensión .vue que integran el HTML, el JS y el CSS de cada componente. Para que nuestro editor los detecte correctamente es conveniente instalar la extensión para Vue.

En el caso de Visual Studio Code esta extensión se llama Volar (sustituye en Vue 3 a la extensión Vetur que se usa con Vue 2). En Sublime Text tenemos el plugin Vue Syntax Highlight.

Otras utilidades

Vue 3 permite utilizar directamente Typescript en nuestros componentes simplemente indicándolo al definir el SFC (lo veremos al llegar allí).

Respecto a los tests se recomienda usar Vitest para los test unitarios y Cypress para los E2E, como se indica en la documentación oficial aunque también puede usarse Jest u otras herramientas.

Cursos de Vue

Podemos encontrar muchos cursos en internet, algunos de ellos gratuitos. Por ejemplo los creadores de Vue tienen la web Vue Mastery donde podemos encontrar desde cursos de iniciación (gratuitos) hasta los mas avanzados.

This site is open source. Improve this page.