Cerca {created_by:admin} {type:page}

v-for + API Fetch

6. VueJS Llistes i dades

Per a aquest exemple, utilitzarem JSONPlaceholder, una API pública i gratuïta pensada precisament per fer proves. Farem una petició per obtenir una llista de 10 usuaris ficticis i els mostrarem per pantalla. A més, introduirem un concepte fonamental de Vue: el...

Propietats computades: v-model

6. VueJS Llistes i dades

Les propietats computades ens permeten fer un cercador en temps real, amb JavaScript clàssic implicava capturar l'esdeveniment onkeyup, llegir el valor de l'input, buidar el contenidor de la llista al DOM, filtrar l'Array original i tornar a construir tot l'HT...

Exemple. Formulari + Fetch POST

6. VueJS

Amb aquest exemple, acabem amb el cercle de la comunicació web: no només llegim dades del servidor (GET), sinó que en generem de noves i les hi enviem (POST). A l'era de JavaScript clàssic, enviar un formulari suposava capturar l'esdeveniment onsubmit, fer un ...

FAQs: Resolució de problemes Vue.js i Fetch API

6. VueJS

1. "El codi funciona al Postman, però al navegador em surt un error vermell de CORS!" Aquest és, de llarg, l'ensurt número u del desenvolupador frontend. El problema: Quan es fa un fetch a una API i la consola del navegador mostra un error que diu algu...

Interpolació de text avançada: v-html

6. VueJS Primeres passes

El problema de la interpolació de text Fins ara, hem vist que per mostrar el valor d'una variable fem servir la sintaxi de bigotis {{ variable }}. Però, què passa si aquesta variable conté etiquetes HTML per donar-li format? Per exemple, si rebem un text d'un...

Estils dinàmics

6. VueJS Llistes i dades

Aquest és un apartat fonamental per a qualsevol desenvolupador frontend. Amb JavaScript clàssic, per canviar l'aparença d'un element havíem d'accedir al DOM i utilitzar element.classList.add(), element.classList.remove() o modificar directament element.style. ...

Llistes avançades amb v-for

6. VueJS Llistes i dades

Obtenir l'índex en un Array: (item, index) Sovint no en tenim prou amb l'objecte; necessitem saber en quina posició de la llista estem (per fer un rànquing, per numerar files d'una taula, o per aplicar classes CSS parells/senars). Per fer-ho, afegim uns parèn...

Form input bindings

6. VueJS Primeres passes

L'enllaç de dades bidireccional (Two-Way Data Binding) amb v-model és una de les característiques més estimades de Vue. Una regla d'or abans de començar: v-model ignorarà completament els atributs HTML inicials com value, checked o selected. Vue sempre conside...

Hello world component

6. VueJS Els components VueJS

Començarem amb el desenvolupament d'un component, pero separant tota la interficie del codi VueJS, la diferència entre un principiant i algú que comença a pensar com un desenvolupador professional. Per fer això utilitzant només el navegador (sense eines comple...

Com integrar-ho tot en un Framework PHP

6. VueJS Els components VueJS

Utilitzar Vue.js d'aquesta manera (el que s'anomena "enfocament progressiu") dins de vistes de frameworks de backend com CodeIgniter 4 o Laravel és una pràctica molt estesa a la indústria, ja que t'estalvia haver de muntar una API completa i un projecte separa...

Afegim propietats

6. VueJS Els components VueJS

Les props (propietats) són els paràmetres que li passem al component. Com hem vist, els components estan totalment aïllats. Si tenim un component <targeta-usuari>, per defecte no sap qui és l'usuari ni quines dades té. Per solucionar-ho, Vue utilitza un sistem...

Afegim esdeveniments

6. VueJS Els components VueJS

Aquesta és l'última gran peça del trencaclosques de l'arquitectura de components. Si les props són la manera com el Pare parla amb el Fill (de dalt a baix), els esdeveniments personalitzats ($emit) són la manera com el Fill respon al Pare (de baix a dalt). Hem...

Llibreria Text2Image (Text captcha)

7. PHP Framework. Codeigniter4 Llibreries

Codi PHP <?php namespace App\Libraries; /** * Generador de Captcha i Imatges amb Text */ class Text2Image { private string $font; private string $text; private string $letters = '23456789bcdfghjkmnpqrstvwxyz'; /...