Bàsic

Introducció
Ús de Vue des d’un CDN
Sintaxi de plantilles
Gestors d’esdeveniments
Form Bindings
Component

Introducció

Vue (pronunciat /vjuː/, com “view”) és un framework de JavaScript per construir interfícies d’usuari. Es construeix sobre l’HTML, el CSS i el JavaScript estàndard i proporciona un model de programació declarat i basat en components que t’ajuda a desenvolupar interfícies d’usuari de qualsevol complexitat de manera eficient.

Ús de Vue des d’un CDN

Pots utilitzar Vue directament des d’un CDN mitjançant una etiqueta de script:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Crea un projecte vue-basic:

mkdir vue-basic
cd vue-basic

Create un fitxer hello.html amb aquest contingut:

<div id="app">
    <p>Hello, {{name}}</p>
</div>

<script type="module">
    import {createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup() {
            return {
                name: ref("David")
            }
        }
    }).mount('#app')
</script>

Aquí fem servir unpkg, però també pots utilitzar qualsevol CDN que serveixi paquets d’npm, per exemple jsdelivr o cdnjs. És clar que també pots descarregar aquest fitxer i servir-lo tu mateix.

Fer servir Vue des d’un CDN és adequat per millorar HTML estàtic o per integrar-lo amb un framework de backend.

Si obres el document html pots veure que {{ name }} s’ha modificat pel valor de la propietat name de l’objecte retornat pel hook setup().

Podem declarar estat reactiu fent servir les API de reactivitat Reactivity APIs i exposar-lo a la plantilla retornant un objecte des de setup().

Sintaxi de plantilles

Vue utilitza una sintaxi de plantilles basada en HTML que permet vincular declarativament el DOM renderitzat amb les dades de la instància de component subjacent.

Totes les plantilles de Vue són HTML vàlid des del punt de vista sintàctic i poden ser analitzades per navegadors i analitzadors HTML que compleixin l’especificació.

Interpolació de text

La forma més bàsica de vinculació de dades és la interpolació de text utilitzant la sintaxi “Mustache” (dobles claus):

<p>Hello, {{name}}</p>

L’expressió Mustache se substituirà pel valor de la propietat name de la instància de component corresponent.

També s’actualitzarà sempre que la propietat name canviï, com veurem més endavant.

✅ Activitat

Modifica l’script per tal que la plantilla html tingui accés als dos atributs name i city de l’objecte retornat pel hook setup().

<div id="app">
    <p>Hello, {{name}}!</p>
    <p>I'm from {{city}}, {{country}}.</p>
</div>

<script type="module">
    import {createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup() {
            return {
                name: ref("David")
                // TODO: Les noves propietats
            }
        }
    }).mount('#app')
</script>

createApp({
    setup() {
        return {
            name: ref("David"),
            city: ref("Barcelona"),
            country: ref("Spain")
        }
    }
}).mount('#app')

Vinculació d’atributs

A Vue, la sintaxi Mustache només s’utilitza per a la interpolació de text.

Per vincular un atribut a un valor dinàmic, fem servir la directiva v-bind:

<script src="https://cdn.tailwindcss.com?plugins=typography"></script>

<div id="app">
    <p v-bind:class="style">Hello, {{name}}!</p>
</div>

Una directiva és un atribut especial que comença amb el prefix v-. Formen part de la sintaxi de plantilles de Vue.

De manera similar a les interpolacions de text, els valors de les directives són expressions de JavaScript que tenen accés a l’estat del component. Els detalls complets de v-bind i de la sintaxi de les directives es tracten a la Guia - Sintaxi de plantilles.

La part que ve després dels dos punts (:class) és l’«argument» de la directiva. Aquí, l’atribut class de l’element se sincronitzarà amb la propietat style de l’estat del component.

Com que v-bind s’utilitza molt sovint, té una sintaxi abreujada específica:

<p :class="style">Hello, {{name}}!</p>

✅ Activitat

Crea la propietat style amb les utility classes de Tailwind per mostrar el text amb color taronja, etc.

setup() {
    return {
        name: ref("David"),
        style: ref("font-bold text-orange-500")
    }
}

Gestors d’esdeveniments

Pots escoltar esdeveniments del DOM fent servir la directiva v-on:

<div class="m-4" id="app">
    <button v-on:click="increment">Increment</button>
    <p>Count is: {{ count }}</p>
</div>

A causa del seu ús freqüent, v-on també té una sintaxi abreujada:

<button @click="increment">{{ count }}</button>

Aquí, increment fa referència a una funció declarada a setup():

setup() {
    const count = ref(0)
        return {
            count,
            increment: () => {
                count.value++
            }
    }
}

Dins de la funció, podem actualitzar l’estat del component modificant els refs.

El resultat és que cada cop que fas clic al butó, aquest crida la funció increment que al seu torn incrementa el valor de count, i com que es una propietat vinculada s’actualitza {{ count }} en el DOM.

Els gestors d’esdeveniments també poden utilitzar expressions en línia i simplificar tasques comunes amb modificadors. Aquests detalls es tracten a la Guia - Gestió d’esdeveniments.

Per tant, pots eliminar la funció increment i incrementar el valor de count directament:

<div class="m-4" id="app">
    <button @click="count++">Increment</button>
    <p>Count is: {{ count }}</p>
</div>

<script type="module">
    import {createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup() {
            const count = ref(0)
            return {
                count
            }
        }
    }).mount('#app')
</script>

✅ Activitat

Afegeix un butó que decrementi el valor de count en 1.

<div id="app">
    <button v-on:click="count++">Increment</button>
    <p>Count is: {{ count }}</p>
    <button v-on:click="count--">Decrement</button>
</div>

Form Bindings

Fent servir v-bind i v-on junts, podem crear vinculacions bidireccionals als elements d’entrada dels formularis:

<div id="app">
    <input v-bind:value="text" v-on:input="onInput" placeholder="Type here">
    <p>{{ text }}</p>
</div>

<script type="module">
    import {createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup() {
            const text = ref('')
            return {
                text,
                onInput:  (e) => {
                    text.value = e.target.value
                }
            }
        }
    }).mount('#app')
</script>

Prova d’escriure al quadre d’entrada: hauries de veure com el text del <p> s’actualitza a mesura que escrius.

Per simplificar les vinculacions bidireccionals, Vue proporciona una directiva, v-model, que és bàsicament sucre sintàctic del que hem vist:

<input v-model="text">

v-model sincronitza automàticament el valor de l’<input> amb l’estat vinculat, de manera que ja no cal utilitzar un gestor d’esdeveniments per a això.

<div id="app">
    <input v-model="text" placeholder="Type here">
    <p>{{ text }}</p>
</div>

<script type="module">
    import {createApp, ref} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        setup() {
            return {
                text: ref('')
            }
        }
    }).mount('#app')
</script>

v-model funciona no només amb entrades de text, sinó també amb altres tipus d’entrada com caselles de selecció (checkbox), botons d’opció (radio) i llistes desplegables (select).

En trobaràs més detalls a la Guia - Vinculació de formularis.

Component

Si obres directament l’index.html anterior al navegador, veuràs que apareix un error perquè els mòduls ES no poden funcionar amb el protocol file://, que és el protocol que el navegador fa servir quan obres un fitxer local. Per motius de seguretat, els mòduls ES només funcionen sobre el protocol http://, que és el que utilitzen els navegadors quan obren pàgines a la web. Perquè els mòduls ES funcionin a la nostra màquina local, hem de servir l’index.html mitjançant el protocol http://, amb un servidor HTTP local.

If you directly open the above index.html in your browser, you will find that it throws an error because ES modules cannot work over the file:// protocol, which is the protocol the browser uses when you open a local file.