==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.
<syntaxhighlight lang="html">
npm create vue@latest
</syntaxhighlight>

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
<syntaxhighlight lang="html">
npm install
</syntaxhighlight>

A estrutura da aplicación na carpeta será similar a esta:
<syntaxhighlight>
<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
</syntaxhighlight>

'''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''':
<syntaxhighlight lang="html">
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
},
})
</syntaxhighlight>

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''.
<syntaxhighlight lang="html">
{
"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",
}
</syntaxhighlight>

Será necesario a carga do módulo '''i18n''' no programa principal '''main.ts''', que pode quedar algo similar a esto:
<syntaxhighlight lang="html">
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')
</syntaxhighlight>

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:

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

O contido do main.js, podería ser o seguinte:
<syntaxhighlight lang="html">
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"
</syntaxhighlight>

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 "$" {{ $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étodos'''ref''' 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:

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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.
==Instalación==
Existen varios modos de instalación:
===Inclusión Direta con <script>===

=== Creación dunha aplicación Vue con Node ===
Vue proporciona un completo framework baseado en Node.js co que podemos desenvolver unha aplicación, "compilar" as plantillas e conseguir unha versión final de distribución. Para iso se empregan unha serie de utilidades (build tools) que nos axudarán nas distintas fases do proxecto. Unha desas ferramentas é '''Vite'''.

''Vite'' é unha ferramenta de desenvolvemento de front-end moderna que se utiliza para a creación de aplicacións web rápidas e eficientes. Foi creada por Evan You, o mesmo creador de ''Vue.js'', aínda que ''Vite'' non está limitado só a ''Vue'', xa que tamén soporta outros frameworks como ''React''.

A función de ''Vite'' dentro do ecosistema Vue é a "compilación" das plantillas (ES Modules) durante o desenvolvemento e a optimización final para producción.

En primeiro lugar, se debe crear a estrutura da aplicación mediante o uso de xestores de paquetes JavaScript como '''npm'' (Node Package Manager) ou '''yarn'' (Yet Another Resource Negotiator) entre outros:

<syntaxhighlight lang="html">
npm create vue@latest
</syntaxhighlight>

Durante a configuración inicial da aplicación o sistema nos preguntará detalles como:
* '''o nome do proxecto''
* '''si imos usar TypeScript'''
*'''si queremos JSX''' (unha extensión para escribir capas de presentacón dentro do JavaScript para crear interfaces demasiado complexas para as plantillas)
*'''si queremos usar Vue-Router''' (que nos facilita a creación de SPA a través de rutas para a transición entre compoñentes para presentar o contido solicitado ao servidor)
*'''si queremos usar Plinia''' (que nos permite compartir o estado --información-- entre distintos compoñentes da aplicación Vue)
*'''si queremos usar Vitest''' (que é un framework para a realización de tests unitarios ''')
*'''si queremos engadir un sistema de Testing''' (nos ofrece Cypress, Nightwatch ou Playwrigth)
*'''si queremos usar ESLint''' (analiza problemas de estilo, erros de sintaxe, se xera a configuración para VSCode e podemos utilizalo dende a liña de comandos con '''npx eslint .''' ou '''npx eslint . --fix'''. Mediante npx podemos executar paquetes instalados con npm sen instalalos no sistema)
*'''si queremos usar Prettier''' (formatea o código revisando tabuladores, espazos.. de xeito que quede lexible)
*'''si queremos usar as extensións de depuración de Vue'''

Unha vez iniciado o proxecto o sistema nos indicará:
<syntaxhighlight lang="bash">
Done. Now run:

cd "<proxecto>"
npm install
npm run dev
</syntaxhighlight>

*'''npm install''' instalará todos os módulos JavaScript necesarios para Vue
*'''npm run dev''' lanzará unha instancia do servidor web de Node para probar o noso proxecto. Inicialmente so aceptará conexións en localhost. Para cambiar a configuración deste servidor de desenvolvemento debemos modificar o arquivo '''vite.config.ts''':

<syntaxhighlight lang="html">
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
},
})

</syntaxhighlight>

O esquema do proxecto será similar a este:
<syntaxhighlight>
<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
└── ...
</syntaxhighlight>

Co obxectivo de usar rutas correctas a os distintos recursos, se dispón nos compoñentes de Vue do caracter @ para indicar src como raíz. Cando se desenvolva para producción as url se axustarán do xeito necesario.
Para crear a aplicación que serviremos mediante un Apache, debemos construila con '''npm run build''' e instalar o contido da carpeta build no root do sitio web. Debemos habilitar o módulo ''rewrite'' para que funcionen as rutas de Vue.

Unha aplicación básica tería o seguinte aspecto:
*'''index.htnl'''
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hola Mundo con Vue 3</title>

</head>
<body>
<div id="app"></div> 
<script type="module" src="/src/main.ts"></script>
</script>
</body>
</html>
</syntaxhighlight>

* '''/src/App.vue'''
<syntaxhighlight lang="html">
<script setup>
import Module from '@/components/Module/Module.vue'
const nombre="Test para Iass Cloud";
</script>

<template>
<Module msg="You did it!" />
{{ nombre }} Hola Mundo!
</template>
</syntaxhighlight>

* '''/src/compoents/Module/Module.vue'''
<syntaxhighlight lang="html">
<style src="@/components/Module/module.css" scoped></style> 

<script setup lang="ts">
defineProps<{msg: string}>()
</script>

<template>
<h1> {{msg}} It's Work - Has a background icon ?</h1>
</template>
</syntaxhighlight>

En este contexto, o marcador @ indica nas URL a carpeta /src do proxecto, e se pode usar como inicio de acceso aos recursos dentro de /src

== 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):
<syntaxhighlight lang="html">
<template>
<span>Message: {{ msg }}</span>
</template>
</syntaxhighlight>

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`:

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

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:

<syntaxhighlight lang="html">
<template>
<div :id="dynamicId"></div>
</template>
</syntaxhighlight>

====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`:

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

====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:

<syntaxhighlight lang="html">
<template>
<button :disabled="isButtonDisabled">Button</button>
</template>
</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">
const objectOfAttrs = {
id: 'container',
class: 'wrapper',
style: 'background-color:green'
}
</syntaxhighlight>

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

<syntaxhighlight lang="html">
<div v-bind="objectOfAttrs"></div>
</syntaxhighlight>

====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:

<syntaxhighlight lang="html">
{{ number + 1 }}

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

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

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

Estas expresións serán avaliadas como JavaScript no ámbito de datos da actual instancia do componente.

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

- Dentro das interpolacións de texto (mustaches)<br/>
- 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:

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

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.

Os globais</syntaxhighlight>
que non están incluídos na lista de forma explícita, como as propiedades engadidas polo usuario a window, non serán accesibles nas expresións de plantilla. Con todo, pódese definir explícitamente globais adicionais para todas as expresións de Vue engadíndoas a app.config.globalProperties.

====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`:

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

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

Vue 3

2024-10-26T17:34:50Z

Xavi: /* Composition API */

==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.
<syntaxhighlight lang="html">
npm create vue@latest
</syntaxhighlight>

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
<syntaxhighlight lang="html">
npm install
</syntaxhighlight>

A estrutura da aplicación na carpeta será similar a esta:
<syntaxhighlight>
<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
</syntaxhighlight>

'''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''':
<syntaxhighlight lang="html">
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
},
})
</syntaxhighlight>

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''.
<syntaxhighlight lang="html">
{
"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",
}
</syntaxhighlight>

Será necesario a carga do módulo '''i18n''' no programa principal '''main.ts''', que pode quedar algo similar a esto:
<syntaxhighlight lang="html">
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')
</syntaxhighlight>

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:

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

O contido do main.js, podería ser o seguinte:
<syntaxhighlight lang="html">
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"
</syntaxhighlight>

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 "$" {{ $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étodos'''ref''' 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:

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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.
==Desenvolvendo o Frontend==

==Instalación==
Existen varios modos de instalación:
===Inclusión Direta con <script>===

=== Creación dunha aplicación Vue con Node ===
Vue proporciona un completo framework baseado en Node.js co que podemos desenvolver unha aplicación, "compilar" as plantillas e conseguir unha versión final de distribución. Para iso se empregan unha serie de utilidades (build tools) que nos axudarán nas distintas fases do proxecto. Unha desas ferramentas é '''Vite'''.

''Vite'' é unha ferramenta de desenvolvemento de front-end moderna que se utiliza para a creación de aplicacións web rápidas e eficientes. Foi creada por Evan You, o mesmo creador de ''Vue.js'', aínda que ''Vite'' non está limitado só a ''Vue'', xa que tamén soporta outros frameworks como ''React''.

A función de ''Vite'' dentro do ecosistema Vue é a "compilación" das plantillas (ES Modules) durante o desenvolvemento e a optimización final para producción.

En primeiro lugar, se debe crear a estrutura da aplicación mediante o uso de xestores de paquetes JavaScript como '''npm'' (Node Package Manager) ou '''yarn'' (Yet Another Resource Negotiator) entre outros:

<syntaxhighlight lang="html">
npm create vue@latest
</syntaxhighlight>

Durante a configuración inicial da aplicación o sistema nos preguntará detalles como:
* '''o nome do proxecto''
* '''si imos usar TypeScript'''
*'''si queremos JSX''' (unha extensión para escribir capas de presentacón dentro do JavaScript para crear interfaces demasiado complexas para as plantillas)
*'''si queremos usar Vue-Router''' (que nos facilita a creación de SPA a través de rutas para a transición entre compoñentes para presentar o contido solicitado ao servidor)
*'''si queremos usar Plinia''' (que nos permite compartir o estado --información-- entre distintos compoñentes da aplicación Vue)
*'''si queremos usar Vitest''' (que é un framework para a realización de tests unitarios ''')
*'''si queremos engadir un sistema de Testing''' (nos ofrece Cypress, Nightwatch ou Playwrigth)
*'''si queremos usar ESLint''' (analiza problemas de estilo, erros de sintaxe, se xera a configuración para VSCode e podemos utilizalo dende a liña de comandos con '''npx eslint .''' ou '''npx eslint . --fix'''. Mediante npx podemos executar paquetes instalados con npm sen instalalos no sistema)
*'''si queremos usar Prettier''' (formatea o código revisando tabuladores, espazos.. de xeito que quede lexible)
*'''si queremos usar as extensións de depuración de Vue'''

Unha vez iniciado o proxecto o sistema nos indicará:
<syntaxhighlight lang="bash">
Done. Now run:

cd "<proxecto>"
npm install
npm run dev
</syntaxhighlight>

*'''npm install''' instalará todos os módulos JavaScript necesarios para Vue
*'''npm run dev''' lanzará unha instancia do servidor web de Node para probar o noso proxecto. Inicialmente so aceptará conexións en localhost. Para cambiar a configuración deste servidor de desenvolvemento debemos modificar o arquivo '''vite.config.ts''':

<syntaxhighlight lang="html">
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
},
})

</syntaxhighlight>

O esquema do proxecto será similar a este:
<syntaxhighlight>
<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
└── ...
</syntaxhighlight>

Co obxectivo de usar rutas correctas a os distintos recursos, se dispón nos compoñentes de Vue do caracter @ para indicar src como raíz. Cando se desenvolva para producción as url se axustarán do xeito necesario.
Para crear a aplicación que serviremos mediante un Apache, debemos construila con '''npm run build''' e instalar o contido da carpeta build no root do sitio web. Debemos habilitar o módulo ''rewrite'' para que funcionen as rutas de Vue.

Unha aplicación básica tería o seguinte aspecto:
*'''index.htnl'''
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hola Mundo con Vue 3</title>

</head>
<body>
<div id="app"></div> 
<script type="module" src="/src/main.ts"></script>
</script>
</body>
</html>
</syntaxhighlight>

* '''/src/App.vue'''
<syntaxhighlight lang="html">
<script setup>
import Module from '@/components/Module/Module.vue'
const nombre="Test para Iass Cloud";
</script>

<template>
<Module msg="You did it!" />
{{ nombre }} Hola Mundo!
</template>
</syntaxhighlight>

* '''/src/compoents/Module/Module.vue'''
<syntaxhighlight lang="html">
<style src="@/components/Module/module.css" scoped></style> 

<script setup lang="ts">
defineProps<{msg: string}>()
</script>

<template>
<h1> {{msg}} It's Work - Has a background icon ?</h1>
</template>
</syntaxhighlight>

En este contexto, o marcador @ indica nas URL a carpeta /src do proxecto, e se pode usar como inicio de acceso aos recursos dentro de /src

== 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):
<syntaxhighlight lang="html">
<template>
<span>Message: {{ msg }}</span>
</template>
</syntaxhighlight>

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`:

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

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:

<syntaxhighlight lang="html">
<template>
<div :id="dynamicId"></div>
</template>
</syntaxhighlight>

====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`:

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

====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:

<syntaxhighlight lang="html">
<template>
<button :disabled="isButtonDisabled">Button</button>
</template>
</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">
const objectOfAttrs = {
id: 'container',
class: 'wrapper',
style: 'background-color:green'
}
</syntaxhighlight>

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

<syntaxhighlight lang="html">
<div v-bind="objectOfAttrs"></div>
</syntaxhighlight>

====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:

<syntaxhighlight lang="html">
{{ number + 1 }}

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

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

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

Estas expresións serán avaliadas como JavaScript no ámbito de datos da actual instancia do componente.

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

- Dentro das interpolacións de texto (mustaches)<br/>
- 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:

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

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.

Os globais</syntaxhighlight>
que non están incluídos na lista de forma explícita, como as propiedades engadidas polo usuario a window, non serán accesibles nas expresións de plantilla. Con todo, pódese definir explícitamente globais adicionais para todas as expresións de Vue engadíndoas a app.config.globalProperties.

====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`:

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

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

Vue 3

2024-10-26T17:33:05Z

Xavi: /* Composition API */

==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.
<syntaxhighlight lang="html">
npm create vue@latest
</syntaxhighlight>

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
<syntaxhighlight lang="html">
npm install
</syntaxhighlight>

A estrutura da aplicación na carpeta será similar a esta:
<syntaxhighlight>
<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
</syntaxhighlight>

'''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''':
<syntaxhighlight lang="html">
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
},
})
</syntaxhighlight>

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''.
<syntaxhighlight lang="html">
{
"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",
}
</syntaxhighlight>

Será necesario a carga do módulo '''i18n''' no programa principal '''main.ts''', que pode quedar algo similar a esto:
<syntaxhighlight lang="html">
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')
</syntaxhighlight>

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:

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

O contido do main.js, podería ser o seguinte:
<syntaxhighlight lang="html">
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"
</syntaxhighlight>

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 "$" {{ $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étodos'''ref''' 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:

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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.

==Instalación==
Existen varios modos de instalación:
===Inclusión Direta con <script>===

=== Creación dunha aplicación Vue con Node ===
Vue proporciona un completo framework baseado en Node.js co que podemos desenvolver unha aplicación, "compilar" as plantillas e conseguir unha versión final de distribución. Para iso se empregan unha serie de utilidades (build tools) que nos axudarán nas distintas fases do proxecto. Unha desas ferramentas é '''Vite'''.

''Vite'' é unha ferramenta de desenvolvemento de front-end moderna que se utiliza para a creación de aplicacións web rápidas e eficientes. Foi creada por Evan You, o mesmo creador de ''Vue.js'', aínda que ''Vite'' non está limitado só a ''Vue'', xa que tamén soporta outros frameworks como ''React''.

A función de ''Vite'' dentro do ecosistema Vue é a "compilación" das plantillas (ES Modules) durante o desenvolvemento e a optimización final para producción.

En primeiro lugar, se debe crear a estrutura da aplicación mediante o uso de xestores de paquetes JavaScript como '''npm'' (Node Package Manager) ou '''yarn'' (Yet Another Resource Negotiator) entre outros:

<syntaxhighlight lang="html">
npm create vue@latest
</syntaxhighlight>

Durante a configuración inicial da aplicación o sistema nos preguntará detalles como:
* '''o nome do proxecto''
* '''si imos usar TypeScript'''
*'''si queremos JSX''' (unha extensión para escribir capas de presentacón dentro do JavaScript para crear interfaces demasiado complexas para as plantillas)
*'''si queremos usar Vue-Router''' (que nos facilita a creación de SPA a través de rutas para a transición entre compoñentes para presentar o contido solicitado ao servidor)
*'''si queremos usar Plinia''' (que nos permite compartir o estado --información-- entre distintos compoñentes da aplicación Vue)
*'''si queremos usar Vitest''' (que é un framework para a realización de tests unitarios ''')
*'''si queremos engadir un sistema de Testing''' (nos ofrece Cypress, Nightwatch ou Playwrigth)
*'''si queremos usar ESLint''' (analiza problemas de estilo, erros de sintaxe, se xera a configuración para VSCode e podemos utilizalo dende a liña de comandos con '''npx eslint .''' ou '''npx eslint . --fix'''. Mediante npx podemos executar paquetes instalados con npm sen instalalos no sistema)
*'''si queremos usar Prettier''' (formatea o código revisando tabuladores, espazos.. de xeito que quede lexible)
*'''si queremos usar as extensións de depuración de Vue'''

Unha vez iniciado o proxecto o sistema nos indicará:
<syntaxhighlight lang="bash">
Done. Now run:

cd "<proxecto>"
npm install
npm run dev
</syntaxhighlight>

*'''npm install''' instalará todos os módulos JavaScript necesarios para Vue
*'''npm run dev''' lanzará unha instancia do servidor web de Node para probar o noso proxecto. Inicialmente so aceptará conexións en localhost. Para cambiar a configuración deste servidor de desenvolvemento debemos modificar o arquivo '''vite.config.ts''':

<syntaxhighlight lang="html">
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
},
})

</syntaxhighlight>

O esquema do proxecto será similar a este:
<syntaxhighlight>
<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
└── ...
</syntaxhighlight>

Co obxectivo de usar rutas correctas a os distintos recursos, se dispón nos compoñentes de Vue do caracter @ para indicar src como raíz. Cando se desenvolva para producción as url se axustarán do xeito necesario.
Para crear a aplicación que serviremos mediante un Apache, debemos construila con '''npm run build''' e instalar o contido da carpeta build no root do sitio web. Debemos habilitar o módulo ''rewrite'' para que funcionen as rutas de Vue.

Unha aplicación básica tería o seguinte aspecto:
*'''index.htnl'''
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hola Mundo con Vue 3</title>

</head>
<body>
<div id="app"></div> 
<script type="module" src="/src/main.ts"></script>
</script>
</body>
</html>
</syntaxhighlight>

* '''/src/App.vue'''
<syntaxhighlight lang="html">
<script setup>
import Module from '@/components/Module/Module.vue'
const nombre="Test para Iass Cloud";
</script>

<template>
<Module msg="You did it!" />
{{ nombre }} Hola Mundo!
</template>
</syntaxhighlight>

* '''/src/compoents/Module/Module.vue'''
<syntaxhighlight lang="html">
<style src="@/components/Module/module.css" scoped></style> 

<script setup lang="ts">
defineProps<{msg: string}>()
</script>

<template>
<h1> {{msg}} It's Work - Has a background icon ?</h1>
</template>
</syntaxhighlight>

En este contexto, o marcador @ indica nas URL a carpeta /src do proxecto, e se pode usar como inicio de acceso aos recursos dentro de /src

== 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):
<syntaxhighlight lang="html">
<template>
<span>Message: {{ msg }}</span>
</template>
</syntaxhighlight>

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`:

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

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:

<syntaxhighlight lang="html">
<template>
<div :id="dynamicId"></div>
</template>
</syntaxhighlight>

====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`:

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

====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:

<syntaxhighlight lang="html">
<template>
<button :disabled="isButtonDisabled">Button</button>
</template>
</syntaxhighlight>

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:

<syntaxhighlight lang="javascript">
const objectOfAttrs = {
id: 'container',
class: 'wrapper',
style: 'background-color:green'
}
</syntaxhighlight>

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

<syntaxhighlight lang="html">
<div v-bind="objectOfAttrs"></div>
</syntaxhighlight>

====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:

<syntaxhighlight lang="html">
{{ number + 1 }}

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

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

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

Estas expresións serán avaliadas como JavaScript no ámbito de datos da actual instancia do componente.

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

- Dentro das interpolacións de texto (mustaches)<br/>
- 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:

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

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.

Os globais</syntaxhighlight>
que non están incluídos na lista de forma explícita, como as propiedades engadidas polo usuario a window, non serán accesibles nas expresións de plantilla. Con todo, pódese definir explícitamente globais adicionais para todas as expresións de Vue engadíndoas a app.config.globalProperties.

====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`:

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

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