6. VueJS

Vue és un framework progressiu de JavaScript dissenyat per construir interfícies d'usuari interactives. En aquest capítol no ens complicarem amb entorns de desenvolupament complexos, compiladors, ni aplicacions de pàgina única (SFC o PWA). L'utilitzarem en la seva forma més àgil i agraïda: afegint-lo directament al nostre document HTML clàssic mitjançant una simple etiqueta <script>.

Per què Vue? Fins ara, per actualitzar dades a la pantalla havíem de buscar elements amb JavaScript i modificar el seu innerHTML manualment. Vue introdueix la reactivitat declarativa. La nostra feina serà simplement definir les dades (com el JSON que rebem d'un fetch); Vue s'encarregarà d'actualitzar el DOM automàticament i de forma eficient quan aquestes dades canviïn.

Què hi aprendrem a fer de forma increïblement ràpida i neta?

Renderitzat automàtic: Transformar llistes i objectes JSON en codi HTML dinàmic sense bucles feixucs, utilitzant la directiva v-for.
Condicionals visuals: Mostrar o ocultar blocs d'informació a l'instant amb directives com v-if o v-show, sense tocar el CSS des de JavaScript.
Formularis i validació: Capturar i avaluar dades escrites per l'usuari en temps real gràcies a l'enllaç bidireccional (v-model).

L'objectiu és deixar de barallar-nos amb el DOM i centrar-nos purament en la lògica de les dades.

Primeres passes

Introducció a VueJS. El Framework progressiu

Després de treballar manualment amb el DOM i les peticions AJAX, treballa amb un framework com Vu...

Hola món Vue

Com sempre un "Hola món" és la millor manera de començar, amb només un fitxer HTML i unes poques ...

Interpolació de text avançada: v-html

El problema de la interpolació de text Fins ara, hem vist que per mostrar el valor d'una variabl...

Form input bindings

L'enllaç de dades bidireccional (Two-Way Data Binding) amb v-model és una de les característiques...

Els esdeveniments: un botó interactiu

El poder de Vue.js: la reactivitat associada als esdeveniments. A JavaScript clàssic, si volíem q...

Mostrar/ocultar elements

Aquest és una de les tasques més repetitives, amb JavaScript tradicional, mostrar i ocultar eleme...

FOUC o Flash of Unstyled Content. La solució v-cloak

Si al carregar algun codi de VueJS veus tots els elements i de cop s'amaguen, com per exemple en ...

Llistes i dades

Estils dinàmics

Aquest és un apartat fonamental per a qualsevol desenvolupador frontend. Amb JavaScript clàssic, ...

Generar llistes, directiva v-for

Una de les directives més potents, satisfactòries i utilitzades de Vue.js: v-for. Amb JavaScript ...

Llistes avançades amb v-for

Obtenir l'índex en un Array: (item, index) Sovint no en tenim prou amb l'objecte; necessitem sab...

v-for + API Fetch

Per a aquest exemple, utilitzarem JSONPlaceholder, una API pública i gratuïta pensada precisament...

Propietats computades: v-model

Les propietats computades ens permeten fer un cercador en temps real, amb JavaScript clàssic impl...

Exemple. Formulari + Fetch POST

Amb aquest exemple, acabem amb el cercle de la comunicació web: no només llegim dades del servido...

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

1. "El codi funciona al Postman, però al navegador em surt un error vermell de CORS!" Aquest és,...

Els components VueJS

Fins ara hem construït aplicacions amb un únic bloc d'HTML controlat per una sola instància globa...

Hello world component

Començarem amb el desenvolupament d'un component, pero separant tota la interficie del codi VueJS...

Com integrar-ho tot en un Framework PHP

Utilitzar Vue.js d'aquesta manera (el que s'anomena "enfocament progressiu") dins de vistes de fr...

Afegim propietats

Les props (propietats) són els paràmetres que li passem al component. Com hem vist, els component...

Afegim esdeveniments

Aquesta és l'última gran peça del trencaclosques de l'arquitectura de components. Si les props só...