Bàsic

#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>