Vue 3 - Historial de revisións

Xavi: /* Instalación da contorna de desenvolvemento */

2024-11-08T20:27:31Z

Instalación da contorna de desenvolvemento

← Revisión máis antiga		Revisión como estaba o 8 de novembro de 2024 ás 20:27
Liña 39:		Liña 39:
	</syntaxhighlight>		</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.		'''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.		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.

Xavi: /* v-slot */

2024-11-04T17:33:40Z

v-slot

← Revisión máis antiga		Revisión como estaba o 4 de novembro de 2024 ás 17:33
Liña 463:		Liña 463:
	</MeuCompoñente>		</MeuCompoñente>
	</syntaxhighlight>		</syntaxhighlight>
			== Facendo consultas ao servidor: Axios ==
			Aquí tes un breve titorial en galego normativo sobre o uso de Axios, unha libraría popular en JavaScript para realizar solicitudes HTTP de forma sinxela e eficiente:

			Instalación de Axios
			Para comezar a usar Axios nun proxecto, primeiro debes instalalo. Se estás usando npm, executa o seguinte comando no terminal:

			bash
			Copiar código
			npm install axios
			Para proxectos que usan Vue ou React, Axios intégrase facilmente e non require configuración adicional.

			Realizar unha Solicitude GET
			Unha das funcións máis básicas de Axios é a solicitude GET, que permite obter datos dun servidor. Por exemplo, se queremos obter unha lista de usuarios dun endpoint, podemos facelo do seguinte xeito:

			javascript
			Copiar código
			import axios from 'axios';

			axios.get('https://api.exemplo.com/usuarios')
			.then(response => {
			console.log(response.data);
			})
			.catch(error => {
			console.error('Erro ao obter os usuarios:', error);
			});
			Neste exemplo:

			axios.get() envía unha solicitude GET á URL especificada.
			.then() xestiona a resposta cando a solicitude é exitosa.
			.catch() xestiona os erros se a solicitude falla.
			Realizar unha Solicitude POST
			Para enviar datos ao servidor, usamos a solicitude POST. Por exemplo, para crear un novo usuario:

			javascript
			Copiar código
			axios.post('https://api.exemplo.com/usuarios', {
			nome: 'Xoán',
			correo: 'xoan@exemplo.com'
			})
			.then(response => {
			console.log('Usuario creado:', response.data);
			})
			.catch(error => {
			console.error('Erro ao crear usuario:', error);
			});
			Aquí, enviamos un obxecto JSON con información do usuario que queremos crear.

			Configuración de Parámetros e Cabeceiras
			Para configurar parámetros ou cabeceiras adicionais, engádeos como terceiro argumento en axios.get() ou axios.post():

			javascript
			Copiar código
			axios.get('https://api.exemplo.com/usuarios', {
			params: { id: 123 },
			headers: { 'Authorization': 'Bearer token' }
			})
			.then(response => {
			console.log(response.data);
			})
			.catch(error => {
			console.error('Erro:', error);
			});
			Uso de Interceptores
			Os interceptores permiten interceptar solicitudes ou respostas antes de que se procesen. Útil para engadir autenticación ou xestionar erros de forma global:

			javascript
			Copiar código
			axios.interceptors.request.use(config => {
			config.headers['Authorization'] = 'Bearer token';
			return config;
			}, error => {
			return Promise.reject(error);
			});

			axios.interceptors.response.use(response => {
			return response;
			}, error => {
			console.error('Erro na resposta:', error);
			return Promise.reject(error);
			});
			Resumo das Funcións Básicas de Axios
			axios.get(url, config): Solicitude GET.
			axios.post(url, data, config): Solicitude POST.
			axios.put(url, data, config): Solicitude PUT para actualizar recursos.
			axios.delete(url, config): Solicitude DELETE para eliminar recursos.

Xavi: /* Options API */

2024-10-27T12:40:16Z

Options API

← Revisión máis antiga		Revisión como estaba o 27 de outubro de 2024 ás 12:40
Liña 169:		Liña 169:
	;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".		;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.		;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 }}		;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 "$" <nowiki>{{ $attr }}</nowiki>
	;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.		;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.		;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.

Xavi: /* As plantillas en Vue */

2024-10-27T11:43:07Z

As plantillas en Vue

← Revisión máis antiga		Revisión como estaba o 27 de outubro de 2024 ás 11:43
Liña 227:		Liña 227:

	Neste documento utilizaremos principalmente Composition API.		Neste documento utilizaremos principalmente Composition API.
	== As plantillas en Vue ==		== Comezando con 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.		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.

Xavi: /* v-slot */

2024-10-27T11:42:41Z

v-slot

@@ Liña 417: / Liña 417: @@
 </syntaxhighlight>
-Usalo dende o compoñente pai:
+Usalo dende o compoñente pai: '''''MeuCompoñente''''' na sección <nowiki><template></nowiki>
 <syntaxhighlight lang="html">
 <MeuCompoñente>
 </syntaxhighlight>

Xavi: /* v-slot */

2024-10-27T11:31:45Z

v-slot

← Revisión máis antiga		Revisión como estaba o 27 de outubro de 2024 ás 11:31
Liña 409:		Liña 409:

	==== v-slot ====		==== 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.		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.

			<syntaxhighlight lang="html">
	; Exemplo de uso básico Definir un slot nun compoñente: <nowiki><template>
			<template>
		⚫	<div> <slot></slot> </div>
			</template>
			</syntaxhighlight>

		⚫	Usalo dende o compoñente pai:
⚫	<div> <slot></slot> </div> ~~</template></nowiki>~~
			<syntaxhighlight lang="html">
⚫	Usalo dende o compoñente pai: ~~<nowiki><MeuCompoñente>~~
			<MeuCompoñente>
			</syntaxhighlight>

	<p>Este parágrafo será amosado dentro do slot do compoñente.</p> </MeuCompoñente></nowiki>		<p>Este parágrafo será amosado dentro do slot do compoñente.</p> </MeuCompoñente></nowiki>

Xavi: /* v-on */

2024-10-27T11:29:57Z

v-on

← Revisión máis antiga		Revisión como estaba o 27 de outubro de 2024 ás 11:29
Liña 363:		Liña 363:
	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 @.		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 @.

			<syntaxhighlight lang="html">
	~~;<nowiki>~~<button v-on:click="saudar">Prema aquí</button></~~nowiki~~>		<button v-on:click="saudar">Prema aquí</button></syntaxhighlight>

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

			<syntaxhighlight lang="html">
	~~;<nowiki>~~<button @click="saludar">Prema aquí</button></~~nowiki~~>		<button @click="saludar">Prema aquí</button></syntaxhighlight>

			<syntaxhighlight lang="html">
	~~;<nowiki>~~<button @click="incrementar(5)">Incrementar</button></~~nowiki~~>		<button @click="incrementar(5)">Incrementar</button></syntaxhighlight>

	;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: <nowiki><form @submit.prevent="procesarFormulario">...</form></nowiki>. Outros modificadores posibles para usar na xestión de eventos na plantila son:		;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: <nowiki><form @submit.prevent="procesarFormulario">...</form></nowiki>. Outros modificadores posibles para usar na xestión de eventos na plantila son:

Xavi: /* v-for */

2024-10-27T11:28:53Z

v-for

← Revisión máis antiga		Revisión como estaba o 27 de outubro de 2024 ás 11:28
Liña 387:		Liña 387:
	<li v-for="elemento in lista" :key="elemento.id">{{ elemento.nome }}</li>		<li v-for="elemento in lista" :key="elemento.id">{{ elemento.nome }}</li>
	</ul>		</ul>
			</syntaxhighlight>
	</syntaxhightligth>

	Neste caso, lista debería ser unha colección de obxectos definida no compoñente en <nowiki><script setup></nowiki>, e cada elemento sería renderizado cun valor de id único. Tamén se pode usar o índice da colección de elementos:		Neste caso, lista debería ser unha colección de obxectos definida no compoñente en <nowiki><script setup></nowiki>, e cada elemento sería renderizado cun valor de id único. Tamén se pode usar o índice da colección de elementos:

Liña 395:		Liña 396:
	</ul>		</ul>
	</syntaxhighlight>		</syntaxhighlight>


	Ou utilizar obxectos e as súas propiedades:		Ou utilizar obxectos e as súas propiedades:
	<~~syntaxhightlight~~ lang="html"~~><nowiki~~>		<syntaxhighlight lang="html">
	<ul>		<ul>
	<li v-for="(valor, chave) in obxecto" :key="chave">{{ chave }}: {{ valor }}</li>		<li v-for="(valor, chave) in obxecto" :key="chave">{{ chave }}: {{ valor }}</li>
	</ul>		</ul>
			</syntaxhighlight>
	</nowiki></syntaxhightlight>

	==== v-slot ====		==== v-slot ====

Xavi: /* v-for */

2024-10-27T11:27:48Z

v-for

← Revisión máis antiga		Revisión como estaba o 27 de outubro de 2024 ás 11:27
Liña 383:		Liña 383:
	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.		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.

	<~~syntaxhigligth~~ lang=html~~><nowiki~~>		<syntaxhighlight lang="html">
	<ul>		<ul>
	<li v-for="elemento in lista" :key="elemento.id">{{ elemento.nome }}</li>		<li v-for="elemento in lista" :key="elemento.id">{{ elemento.nome }}</li>
	</ul>		</ul>
	~~</nowiki>~~</syntaxhightligth>		</syntaxhightligth>
	Neste caso, lista debería ser unha colección de obxectos definida no compoñente en <nowiki><script setup></nowiki>, e cada elemento sería renderizado cun valor de id único. Tamén se pode usar o índice da colección de elementos:		Neste caso, lista debería ser unha colección de obxectos definida no compoñente en <nowiki><script setup></nowiki>, e cada elemento sería renderizado cun valor de id único. Tamén se pode usar o índice da colección de elementos:

	<~~syntaxhightlight~~ lang="html"~~><nowiki~~>		<syntaxhighlight lang="html">
	<ul>		<ul>
	<li v-for="(elemento, índice) in lista" :key="índice"> {{ índice }} - {{ elemento.nome }} </li>		<li v-for="(elemento, índice) in lista" :key="índice"> {{ índice }} - {{ elemento.nome }} </li>
	</ul>		</ul>
	~~</nowiki>~~</syntaxhighlight>		</syntaxhighlight>

	Ou utilizar obxectos e as súas propiedades:		Ou utilizar obxectos e as súas propiedades:

Xavi: /* v-for */

2024-10-27T11:26:52Z

v-for

← Revisión máis antiga		Revisión como estaba o 27 de outubro de 2024 ás 11:26
Liña 383:		Liña 383:
	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.		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.

	<~~syntaxhiglight~~ lang=html><nowiki>		<syntaxhigligth lang=html><nowiki>
	<ul>		<ul>
	<li v-for="elemento in lista" :key="elemento.id">{{ elemento.nome }}</li>		<li v-for="elemento in lista" :key="elemento.id">{{ elemento.nome }}</li>
	</ul>		</ul>
	</nowiki></~~syntaxhightlight~~>		</nowiki></syntaxhightligth>
	Neste caso, lista debería ser unha colección de obxectos definida no compoñente en <nowiki><script setup></nowiki>, e cada elemento sería renderizado cun valor de id único. Tamén se pode usar o índice da colección de elementos:		Neste caso, lista debería ser unha colección de obxectos definida no compoñente en <nowiki><script setup></nowiki>, e cada elemento sería renderizado cun valor de id único. Tamén se pode usar o índice da colección de elementos: