El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Sintaxi de plantilles

Següent ►
►

La sintaxi de plantilles de Vue.js és una de les característiques més potents i flexibles del framework. Permet als desenvolupadors crear vistes dinàmiques i interactives de manera senzilla i intuïtiva. En aquesta secció, explorarem els conceptes bàsics de la sintaxi de plantilles, incloent-hi la interpolació, les directives i els atributs especials.

Interpolació

Text

L'interpolació de text és la manera més senzilla de mostrar dades en una plantilla Vue. Utilitza les claus dobles {{ }} per inserir dades dins del HTML.

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hola, món!'
    }
  });
</script>

En aquest exemple, el text "Hola, món!" es mostrarà dins del paràgraf <p>.

HTML

Per inserir HTML directament dins d'una plantilla, utilitza la directiva v-html.

<div id="app">
  <p v-html="rawHtml"></p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      rawHtml: '<strong>Això és HTML en brut</strong>'
    }
  });
</script>

Nota: Utilitza v-html amb precaució, ja que pot exposar la teva aplicació a atacs XSS (Cross-Site Scripting) si el contingut no és segur.

Directives

Les directives són atributs especials que proporcionen funcionalitats addicionals a les plantilles. Comencen amb el prefix v-.

v-bind

La directiva v-bind s'utilitza per enllaçar atributs HTML a dades de Vue.

<div id="app">
  <a v-bind:href="url">Enllaç</a>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      url: 'https://www.example.com'
    }
  });
</script>

v-if

La directiva v-if s'utilitza per renderitzar condicionalment un element.

<div id="app">
  <p v-if="isVisible">Aquest text és visible</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    }
  });
</script>

v-for

La directiva v-for s'utilitza per renderitzar una llista d'elements basant-se en una matriu.

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, text: 'Element 1' },
        { id: 2, text: 'Element 2' },
        { id: 3, text: 'Element 3' }
      ]
    }
  });
</script>

Atributs especials

v-model

La directiva v-model s'utilitza per crear enllaços bidireccionals entre dades i elements de formulari.

<div id="app">
  <input v-model="message" placeholder="Escriu un missatge">
  <p>El missatge és: {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script>

v-on

La directiva v-on s'utilitza per escoltar esdeveniments del DOM i executar mètodes.

<div id="app">
  <button v-on:click="sayHello">Fes clic aquí</button>
</div>

<script>
  new Vue({
    el: '#app',
    methods: {
      sayHello: function() {
        alert('Hola!');
      }
    }
  });
</script>

Exercicis pràctics

Exercici 1: Interpolació de text

Crea una aplicació Vue que mostri un missatge dins d'un paràgraf. El missatge ha de ser una dada de Vue.

Solució:

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Benvingut a Vue.js!'
    }
  });
</script>

Exercici 2: Enllaç d'atributs

Crea una aplicació Vue que enllaci l'atribut href d'un enllaç a una dada de Vue.

Solució:

<div id="app">
  <a v-bind:href="url">Visita Vue.js</a>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      url: 'https://vuejs.org'
    }
  });
</script>

Exercici 3: Renderització condicional

Crea una aplicació Vue que mostri un text només si una dada de Vue és true.

Solució:

<div id="app">
  <p v-if="isVisible">Aquest text és visible</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    }
  });
</script>

Exercici 4: Renderització de llistes

Crea una aplicació Vue que renderitzi una llista d'elements basant-se en una matriu de dades.

Solució:

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, text: 'Element 1' },
        { id: 2, text: 'Element 2' },
        { id: 3, text: 'Element 3' }
      ]
    }
  });
</script>

Resum

En aquesta secció, hem après els conceptes bàsics de la sintaxi de plantilles de Vue.js, incloent-hi la interpolació de text i HTML, les directives com v-bind, v-if, v-for, i els atributs especials com v-model i v-on. Aquests conceptes són fonamentals per crear aplicacions Vue dinàmiques i interactives. En la següent secció, explorarem l'enllaç de dades en més detall.

◄ Anterior
◄
Següent ►
►

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats