Vue 3

Introdución

Vue (pronunciado /vjuː/, como view) é un framework progresivo para construír interfaces de usuario. A biblioteca central está enfocada só na capa de visualización, e é doada de utilizar e integrar con outras bibliotecas ou proxectos existentes.

Vue dispón dun "compilador" que se encarga de transformar as plantillas (compoñentes) de Vue en código JavaScript optimizado que utilizará o navegador para visualizar a páxina, encargándose de procesar as plantillas e os datos para producir o contido.

As distribucións de desenvolvemento de Vue inclúen o compilador, polo que podemos crear e probar a aplicación con ficheiros individuais cos distintos compoñentes da nosa web (arquivos .vue) e probala mediante npm run dev. Con Vue normalmente ven integrado un xestor de proxectos (Vite e Vue CLI) que ademais proporciona un servidor web para poder ir probando o desenvolvemento.

Unha vez rematado o frontend, se "compila" (build) xerando o frontend de produción mediante o comando npm run build. Este comando xerará unha versión da distribución da web dentro da carpeta build que podemos copiar ao raiz do noso servidor de produción.

Elaboración dun Front-End con Vue

Instalación da contorna de desenvolvemento

Para desenvolver un frontend con Vue o mais apropiado e o uso do xestor de paquetes npm dentro da carpeta onde imos desenvolver o frontend, que non ten nada que ver coa carpeta onde se instalará o servizo web de producción.

npm create vue@latest

Mediante este comando se recopilan todos os módulos necesarios para o desenvolvemento e creación de frontend realizando unha serie de preguntas sobre as tecnoloxías que queremos empregar. E recomendable o uso de TypeScript e ESLint. Normalmente o axeitado e desenvolver mediante VSCode, xa que trae plugins que fan cómodo o desenvolvemento. Vue instalará un compoñente de "Benvida", que será o "frontend por defecto"

Unha vez executado ese comando, se crea a lista de software necesario que podemos instalar no proxecto

npm install

A estrutura da aplicación na carpeta será similar a esta:

<proxecto>/
│
├── index.html            // Archivo HTML principal
├── src/                  // Carpeta de código fuente
│   ├── assets/           // Archivos estáticos (imágenes, etc.)
│   ├── components/       // Componentes de Vue
│   ├── views/            // Vistas de la aplicación
│   ├── App.vue           // Componente raíz
│   └── main.js           // Archivo de entrada de JavaScript
│
├── package.json
└── vite.config.ts
└── eslint.config.ts

index.html e o punto de carga do frontend de desenvolvemento (unha vez compilado con npm run prod, se creará unha versión de index.html preparada para o despregamento na carpeta build). O desenvolvemento terá lugar na carpeta src, que se identificará no proxecto como a carpeta @ para as rutas.

Dentro da carpeta src temos o punto de entrada do frontend Vue, que é o arquivo main.ts ou main.js (dependendo de si utilizamos JavaScript ou TypeScript) e App.vue que é o compoñente principal que "debuxará" o frontend a presentar dentro do index.html da páxina.

En App.vue teremos o frontend que se amosará si lanzamos a versión de desenvolvemento mediante npm run dev,

Si queremos poder acceder cun cliente remoto (en outra máquina) debemos modificar a información do ficheiro vite.config.ts:

vite.config.ts:
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
        host: '0.0.0.0', // Escoitar en todas as interfaces
        port: 8000, // O porto no que se esperan conexións
        strictPort: true, // Opcional: fallará si o porto xa está en uso
    },
})

O punto de entrada dunha aplicación """Vue""" é normalmente un arquivo chamado """main.js""" (ou """main.ts""" se estás utilizando TypeScript). Este arquivo é onde se crea e configura a instancia da aplicación Vue e se monta nun elemento HTML-

Internacionalización

Si queremos que o noso frontend soporte varios idiomas necesitaremos o módulo vue-i18n que podemos instalar con npm install vue-i18n. Este módulo nos proporcionará a posibilidade de utilizar diccionarios en JSON nos que estarán as traduccións das distintas cadeas de texto do front-end situados en src/locales como es.json, gl.json ou en.json.

{
"Configure":"Configurar",
"Log Out":"Saír",
"Log In": "Iniciar Sesión",
"User":"Usuario",
"Password":"Contrasinal",
"Did you forget your password?":"¿ Esqueciches o teu contrasinal ?",
"Incorrect username or password":"Usuario ou contrasinal incorrectas",
}

Será necesario a carga do módulo i18n no programa principal main.ts, que pode quedar algo similar a esto:

import App from '@/App.vue';
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';

import en from '@/locales/en.json';
import es from '@/locales/es.json';
import gl from '@/locales/gl.json';

const messages={ en, es, gl };

// Collemos por defecto a linguaxe do navegador
const userLocale = navigator.language || 'gl';

// Crear a instancia de i18n e definir o idioma predeterminado
const i18n = createI18n({
  locale: userLocale, // Idioma predeterminado
  fallbackLocale: 'en',  // Si non atopamos no idioma actual, usamos este
  messages,     // Recursos de tradución
  numberFormats: {
    en: { currency: { style: 'currency', currency: 'USD' } },
    es: { currency: { style: 'currency', currency: 'EUR' } },
    gl: { currency: { style: 'currency', currency: 'EUR' } }
  }
});

const app=createApp(App).use(i18n).mount('#app')

Isto nos proporcionará nas plantillas o método $t(), que se encargará de substituír o texto entre paréntese polo lido do dicionario.

Os Compoñentes Vue

Os frontends construídos en Vue comezan no script main.ts ou main.js coa creación dunha intancia de aplicación mediante a función createApp. Esa aplicación consiste nun compoñente que se incrustará nun elemento do DOM de index.html. Ese compoñente pode facer uso a súa vez de outros compoñentes para conformar o frontend. Aínda que un frontend pode ter varias aplicacións cada unha co seu compoñente raíz, o habitual e ter unha única aplicación.

Un SFC (Single File Component) de Vue, como suxire o nome, encapsula a lóxica do compoñente (JavaScript), a plantilla (HTML) e os estilos (CSS) nun único ficheiro normalmente coa extensión .vue

Un exemplo de compoñente Vue (Vue.js) mínimo que pode ser "incrustado" pode ser este:

<script setup lang="ts">
    const nome="O meu primeiro compoñente Vue";
</script>
<template>  
   Hola Mundo!!! {{ nome }}
</template>
<style scoped>
</style>

O contido do main.js, podería ser o seguinte:

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'   // Importamos o compoñente

const app = createApp(App) // Creamos a aplicación
app.mount("#app"); // Incrustamos o compoñente Vue no index.html no elemento con id "app"

Como podemos observar no compoñente Vue, se aprecian tres seccións diferentes:

<script setup>

Esta sección contén o código javascript que se levará a cabo cando se "monte" o compoñente na páxina, o que normalmente sucede unha única vez. Os compoñentes poden recibir parámetros dende main.ts ou main.js ou dende outro código javascript dun compoñente.

<template>

Contén a plantilla HTML que producirá a presentación a ser incrustada na páxina, reemplazando a información na plantilla segundo a linguaxe de plantillas de Vue.

<style>

Conten o código CSS para a plantilla indicada en <template> Si especificamos scoped os estilos aquí especificados unicamente serán efectivos para esta plantilla, si non, serán efectivos de xeito global.

Options API

Options API é un dos sistemas de deseño de compoñentes que pode usar Vue. Options API é o "modo tradicional", e consiste en definir a lóxica dun compoñente usando un obxecto javascript con distintos métodos e atributos que cubren o ciclo de vida e funcionalidades do compoñente:

name

Este atributo indica o nome do compoñente.

data()

Este método define o estado reactivo local do compoñente. Retorna un obxecto coas propiedades que desexamos sexan empregados no procesamento da plantilla de xeito reactivo.

created()

Este método se executa cando o compoñente é creado.

mounted()

Este método se executa cando o compoñente é montado no DOM.

updated()

Este método se executa cada vez que é necesario actualizar a plantilla.

destroyed()

Este método se executa cada vez que o compoñente se elimina.

provide() / inject

O método provide() permite compartir datos entre compoñentes "pais" e "fillos". provide() Debe retornar un obxecto onde se especifique como atributos a información a compartir. Esta información pode ser accedida polos fillos mediante o atributo inject, que indicará nun array o conxunto de datos "provided" a utilizar.

props

Este atributo especifica os datos (parámetros) que pode recibir o compoñente cando é "incluído" na web.

computed

Este atributo almacena un obxecto que contén métodos que podemos especificar como atributos na plantilla, deste xeito podemos eliminar a lóxica da plantilla deixandoa máis limpa e fácil de manter.

methods

Este atributo almacena un obxecto que contén métodos que podemos chamar dende a plantilla, principalmente como xestores de eventos. Si queremos, podemos usar para o método o mesmo identificador que o atributo que queremos "recalcular", de xeito que se refrescará cando o valor do atributo cambie.

watch

Este atributo almacena un obxecto que contén métodos que "observan" certas propiedades, executando un método cando se produce un cambio. Debemos identificar o método co mesmo nome que o atributo que queremos vixiar, e recibirá como parámetros o valor futuro e o valor actual.

components

Este atributo almacena un obxecto que contén compoñentes dos que queremos poder facer uso no compoñente actual.

mixins

Este atributo é un array que permite reutilizar funcionalidade para que sexa utilizada en varios compoñentes. Permiten compartir métodos, datos e ciclo de vida entre diferentes compoñentes. En primeiro lugar, se debe crar o "mixin" que consistirá nunha variable que almacene un obxecto coa información a reutilizar. Esa información se poderá utilizar en novos compoñentes especificando os mixin desexados no seu atributo mixins.

directives

Este atributo almacena obxectos que almacena métodos a aplicar a elementos concretos do DOM en unha frase concreta do ciclo de vida do compoñente (hooks). Os elementos que especifiquen v-[metodo] executarán a directiva no hook indicado que pode ser created,beforeMount,mounted,beforeUpdate,updated,beforeUmount e unmounted".

extends

Este atributo permite especificar un compoñente base do que se herdan as funcionalidades. E similar aos mixin, pero indicando un único compoñente.

inheritAttrs

Este atributo booleano controla a herdanza dos atributos. Por defecto os atributos especificados nun compoñente incluído que non son declarados como propiedades, se inclúen como atributos no elemento raíz do template, engadíndose as existentes si é o caso. Especificando false evitamos este comportamento, pero serán accesibles co prefixo "$" Modelo:$attr

emits

Este atributo é un array que conten un conxunto de métodos que "poden ser emitidos" mediante this.$emit. Este evento pode ser capturado co atributo @evento na chamada ao compoñente.

template

Este atributo almacena a plantilla a ser transformada en HTML e incrustada no DOM. Tamén pode indicarse fora do script entre <template> e </template>. A template define o documento a ser incrustado no DOM unha vez procesado coa información producida pola sección <script> e aplicando o estilo especificado na sección <style>. A reactividade garante que si os datos cambian, o template é procesado de novo para xerar unha nova saida.

Composition API

Coa Composition API utilízamos normalmente <script setup> para indicar o JavaScript a utilizar na inicialización do componente. Outra posibilidade é especificar un método setup() co mesmo código. Si queremos que o compoñente poda recibir parámtros, os debemos especificar mediante o atributo props, que conten un obxecto que indica todos os atributos que se poden recibir cando se chama ao compoñente. Todos os parámetros declarados en props son reactivos. En esta API podemos seleccionar que outros datos queremos que sexan reactivos de modo específico mediante os métodosref ou reactive (en options API, os datos se teñen que declarar en data() e sempre son reactivos).

ref é axeitado para datos simples, mentres que reactive é máis axeitado para obxectos complexos, que podan ter outros obxectos como atributos que tamén queremos que sexan reactivos. Cando definimos un dato como reactivo mediante o método ref necesitaremos usar o atributo .value para acceder ao seu valor. Outra posibilidade é shallowRef (que simplemente comproba si cambia a referencia do obxecto, en lugar do obxecto en sí).

Nos compoñentes con compositionAPI podemos definir as funcionalidades desexadas mediante métodos javascript. Estas funcionalidades simplemente variarán valores reactivos que provocan o repintado e polo tanto o "recálculo" da plantilla. Todo o código irá dentro do método setup(), ou si queremos unha sintaxe mais simple, dentro de <script setup>

Vexamos un exemplo de compoñente:

<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: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

Os hook da composition API son maiores que en Options API: setup(), onMounted(), onUpdated(), onUnmounted(), onBeforeMount(), onBeforeUpdate(), onBeforeUnmount, onErrorCaptured, onActivated, onDeactivated(),

Ambos os estilos de API son plenamente capaces de cubrir casos de uso comúns. Son interfaces diferentes impulsadas polo mesmo sistema subxacente. De feito, a Options API está implementada sobre a Composition API. Os conceptos fundamentais e o coñecemento sobre Vue son compartidos entre os dous estilos.

Se es novo en Vue, aquí está a nosa recomendación xeral:

Para fins de aprendizaxe, escolla o estilo que lle pareza máis fácil de entender. De novo, a maioría dos conceptos básicos son compartidos entre os dous estilos. Sempre podes aprender o outro estilo máis adiante.

Para uso en produción:

• Escolla a Options API se non está a usar ferramentas de construción, ou se planea usar Vue principalmente en escenarios de baixa complexidade, por exemplo, mellora progresiva.
• Escolla a Composition API + Compoñentes de Ficheiro Único se planea construir aplicacións completas con Vue.

Neste documento utilizaremos principalmente Composition API.

As plantillas en Vue

Vue utiliza unha sintaxe de templates baseada en HTML que che permite ligar de forma declarativa o DOM renderizado cos datos subxacentes da instancia do compoñente. Todos os templates de Vue son sintacticamente HTML válido, que pode ser analizado por navegadores compatibles co estándar e parsers de HTML.

Por debaixo, Vue compila os templates en código JavaScript altamente optimizado. Combinado co sistema de reactividade, Vue pode determinar de maneira intelixente o número mínimo de compoñentes que precisa volver renderizar e aplicar a mínima cantidade de manipulacións no DOM cando cambia o estado da aplicación.

As plantillas Vue se definen nos compoñentes dentro das etiquetas <template>...</template> e dispoñen dunha linguaxe de procesado de plantillas bastante simple e potente que procesará a información procesada na sección <script>:

Interpolación de Texto

A forma máis básica de vinculación de datos é a interpolación de texto utilizando a sintaxe de "mostacho" (dobres chaves):

<template>
  <span>Message: {{ msg }}</span>
</template>

A etiqueta de mostacho será substituída polo valor da propiedade `msg` da instancia do componente correspondente. Ademais, actualizarase cada vez que a propiedade `msg` cambie.

Vinculación de Atributos

As chaves non se poden usar dentro dos atributos HTML. En vez diso, usa a directiva `v-bind`:

<template>
  <div v-bind:id="dynamicId"></div>
</template>

A directiva `v-bind` indica a Vue que mantén o atributo id do elemento sincronizado coa propiedade `dynamicId` do compoñente. Se o valor vinculado é `null` ou `undefined`, o atributo será eliminado do elemento renderizado.

Sintaxe Abreviada Como `v-bind` se usa con moita frecuencia, ten unha sintaxe abreviada dedicada:

<template>
  <div :id="dynamicId"></div>
</template>

HTML Crudo

As dobres chaves interpretan os datos como texto sin formato, non como HTML. Para saír HTML real, necesitas usar a directiva `v-html`:

<template>
  <p>Usando interpolación de texto: {{ rawHtml }}</p>
  <p>Usando a directiva v-html: <span v-html="rawHtml"></span></p>
</template>

Atributos Booleanos

Os atributos booleanos son atributos que poden indicar valores verdadeiros/falsos pola súa presenza nun elemento. Por exemplo, `disabled` é un dos atributos booleanos máis comúns.

`v-bind` funciona dun xeito algo diferente neste caso:

<template>
  <button :disabled="isButtonDisabled">Button</button>
</template>

O atributo `disabled` incluirase se `isButtonDisabled` ten un valor verdadeiro. Tamén se incluirá se o valor é unha cadea de texto vacía, mantendo a coherencia con `<button disabled="">`. Para outros valores falsos, o atributo será omxido.

Vinculación dinámica de múltiples atributos

Se tes un obxecto de JavaScript que representa múltiples atributos e que ten a seguinte estrutura:

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

Podes vinculalos a un único elemento utilizando `v-bind` sen un argumento:

<div v-bind="objectOfAttrs"></div>

Usando expresións de JavaScript

Até agora, só vinculamos claves de propiedades sinxelas nas nosas plantillas. Pero Vue realmente admite toda a potencia das expresións de JavaScript dentro de todas as vinculaciones de datos:

{{ number + 1 }}

{{ ok ? 'SÍ' : 'NON' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

Estas expresións serán avaliadas como JavaScript no ámbito de datos da actual instancia do componente. As comiñas invertidas ` na última expresión, permiten incluir variables para crear un texto pechadas con ${}.

Nas plantillas de Vue, as expresións de JavaScript pódense usar nas seguintes posicións:

- Dentro das interpolacións de texto (mustaches)
- No valor dos atributos de calquera directiva de Vue (atributos especiais que comezan con `v-`)

Chamando funcións

É posible chamar a un método exposto por un componente dentro dunha expresión de vinculación:

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

1. :title="toTitleDate(date)": O atributo title establécese de forma dinámica mediante v-bind, utilizando a sintaxe abreviada :. Isto indica que title tomará o seu valor do resultado da chamada ao método toTitleDate(date).
   • toTitleDate(date): Este método debería estar definido no compoñente, ben na sección methods (en Options API) ou directamente na función setup (en Composition API). A súa finalidade é formatear a data (date) nunha cadea que será usada como valor do atributo title. Por exemplo, toTitleDate podería devolver algo como "20 de Outubro de 2024" para amosar unha data legible cando o usuario poña o cursor enriba do tempo.
2. :datetime="date": Aquí tamén se usa v-bind para ligar o valor do atributo datetime a unha variable date. Isto fai que datetime reciba directamente o valor de date. O atributo datetime en etiquetas require un formato específico (xeralmente o formato ISO 8601, como 2024-10-20T00:00:00Z), xa que axuda a indicar a data exacta para fins de SEO e accesibilidade.
3. {{ formatDate(date) }}: O contido dentro da etiqueta utiliza formatDate(date) para amosar a data formateada.
   • formatDate(date): Este método, similar a toTitleDate, debería estar definido no compoñente e pode transformar date nun formato amigable para o usuario, como "20/10/2024".

As funcións chamadas dentro das expresións de vinculación serán executadas cada vez que o componente se actualice, polo que non deben ter efectos secundarios, como cambiar datos ou acender operacións asincrónicas. As expresións de plantilla están illadas e só teñen acceso a unha lista restrinxida de globais. A lista expón globais incorporados de uso común como Math e Date.

Directivas

As directivas son atributos especiais co prefijo `v-`. Vue proporciona unha serie de directivas incorporadas, incluíndo `v-html` e `v-bind.

Os valores dos atributos das directivas esperan ser expresións de JavaScript únicas (con excepción de `v-for`, `v-on` e `v-slot`). O traballo dunha directiva é aplicar actualizacións de forma reactiva no DOM cando o valor da súa expresión cambia. Tomemos como exemplo `v-if`:

<p v-if="seen">Agora me ves</p>

Neste caso, a directiva `v-if` eliminaría ou inseriría o elemento <p> en función da veracidade do valor da expresión lóxica seen. Outras directivas son:

• v-on: Para xestionar eventos de usuario
• v-for: Para procesar listas de datos de xeito repetitivo (producindo grupos de elementos HTML na plantilla)
• v-slot: Para pasar contido de plantilla dende o pai ao fillo

v-on

A directiva v-on úsase para xestionar eventos de usuario, como pulsar un botón ou escribir nun campo de texto, e permite executar métodos específicos ao detectar eses eventos. Pódese abreviar usando @.

Exemplos Uso básico: <button v-on:click="saudar">Prema aquí</button>

Isto asocia o evento click co método saludar, que debería estar definido no compoñente na seccion <script setup>.

Abreviatura: <button @click="saludar">Prema aquí</button>

Con paso de parámetros: <button @click="incrementar(5)">Incrementar</button>

Prevención de comportamento por defecto: Para evitar o comportamento por defecto dun evento (como o envío dun formulario), úsase o modificador .prevent na plantilla HTML: <form @submit.prevent="procesarFormulario">...</form>. Outros modificadores posibles para usar na xestión de eventos na plantila son:

.stop

Evita a propagación do evento a través dos elementos pai.

.self

Unicamente atende a eventos producidos no propio elemento, sin facer caso a os elementos fillos

.capture

Indica que os eventos de este tipo producidos nos elementos interiores son xestionados por este método.

.once

Soamente se permite o evento unha vez.

.passive

Indica que se procesará o evento nativamente sen esperar a que se execute o xestor indicado

Os eventos de teclado, de xeito similar poden levar .enter, .page-dowwn, .tab, .delete, .esc, .space, .up, .down, .left, .right,.ctrl,.alt,.shift,.meta identificando a tecla pulsada e os de rato .left, right ou .middle identificando o botón pulsado.

v-for

A directiva v-for é empregada para renderizar listas e repetir un compoñente ou elemento en función dunha colección de datos, como un array. Require que se especifique un key único en cada elemento renderizado.

Sintaxe e Exemplos Uso básico: <ul> <li v-for="elemento in lista" :key="elemento.id">{{ elemento.nome }}</li> </ul>

Neste caso, lista debería ser unha colección de obxectos definida no compoñente, e cada elemento sería renderizado cun valor de id único.

Acceso a índice: <ul> <li v-for="(elemento, índice) in lista" :key="índice"> {{ índice }} - {{ elemento.nome }} </li> </ul> Renderizado de obxectos: <ul> <li v-for="(valor, chave) in obxecto" :key="chave">{{ chave }}: {{ valor }}</li> </ul>

v-slot

A directiva v-slot permite crear e pasar contidos personalizados a compoñentes fillo desde o pai, mellorando a modularidade ao permitir especificar diferentes partes do contido dende o compoñente pai.

Exemplo de uso básico Definir un slot nun compoñente

<template> <div> <slot></slot> </div> </template>

Usalo dende o compoñente pai: <MeuCompoñente> <p>Este parágrafo será amosado dentro do slot do compoñente.</p> </MeuCompoñente>

Slots con nome Permite crear varios slots con nomes específicos

<template> <header> <slot name="cabeceira"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="pé"></slot> </footer> </template>

Usando slots con nome no compoñente pai: <MeuCompoñente> <template v-slot:cabeceira> <h1>Cabeceira personalizada</h1> </template> <p>Este é o contido principal.</p> <template v-slot:pé> <p>Pé de páxina personalizado</p> </template> </MeuCompoñente>

Slots dinámicos Pódese pasar datos ao slot e acceder a eles mediante o uso de “scoped slots”

<template> <slot :datos="datosExemplo"></slot> </template>

No compoñente pai: <MeuCompoñente v-slot="{ datos }"> <p>Os datos pasados son: {{ datos }}</p> </MeuCompoñente>