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

Entenent la instància de Vue

Següent ►
►

En aquest tema, explorarem la instància de Vue, que és el nucli de qualsevol aplicació Vue.js. La instància de Vue és l'objecte que controla una part del DOM i proporciona la funcionalitat necessària per a la reactivitat i la gestió de dades.

Què és la instància de Vue?

La instància de Vue és un objecte JavaScript creat amb el constructor Vue. Aquest objecte conté totes les propietats i mètodes que Vue.js proporciona per a la gestió de dades, la reactivitat, els cicles de vida i la interacció amb el DOM.

Creant una instància de Vue

Per crear una instància de Vue, utilitzem el constructor Vue i passem un objecte de configuració. Aquí teniu un exemple bàsic:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hola, Vue!'
  }
});

Explicació del codi

  1. el: Aquesta propietat especifica l'element del DOM que Vue controlarà. En aquest cas, Vue controlarà l'element amb l'ID app.
  2. data: Aquesta propietat conté les dades de l'aplicació. En aquest exemple, tenim una sola propietat message amb el valor 'Hola, Vue!'.

HTML corresponent

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

Quan Vue.js processa aquesta instància, reemplaçarà {{ message }} amb el valor de message en l'objecte data, resultant en:

<div id="app">
  Hola, Vue!
</div>

Reactivitat en Vue

Una de les característiques més potents de Vue.js és la seva capacitat de fer que les dades siguin reactives. Això significa que quan les dades canvien, la vista s'actualitza automàticament per reflectir aquests canvis.

Exemple de reactivitat

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hola, Vue!'
  }
});

// Canviant el missatge després de 2 segons
setTimeout(function() {
  app.message = 'Missatge actualitzat!';
}, 2000);

En aquest exemple, després de 2 segons, el valor de message es canviarà a 'Missatge actualitzat!', i la vista s'actualitzarà automàticament per reflectir aquest canvi.

Cicles de vida de la instància de Vue

Cada instància de Vue passa per una sèrie de fases des del moment en què es crea fins que es destrueix. Aquestes fases es coneixen com a cicles de vida. Vue proporciona diversos "hooks" de cicle de vida que permeten executar codi en diferents punts del cicle de vida d'una instància.

Principals hooks de cicle de vida

  1. created: S'executa després de la creació de la instància, però abans de muntar-la al DOM.
  2. mounted: S'executa després de muntar la instància al DOM.
  3. updated: S'executa després d'actualitzar les dades reactives.
  4. destroyed: S'executa després de destruir la instància.

Exemple d'ús dels hooks de cicle de vida

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hola, Vue!'
  },
  created: function() {
    console.log('Instància creada');
  },
  mounted: function() {
    console.log('Instància muntada');
  },
  updated: function() {
    console.log('Instància actualitzada');
  },
  destroyed: function() {
    console.log('Instància destruïda');
  }
});

Exercicis pràctics

Exercici 1: Crear una instància de Vue

  1. Crea una instància de Vue que controli un element amb l'ID example.
  2. Defineix una propietat message en l'objecte data amb el valor 'Aprenent Vue.js!'.
  3. Mostra el valor de message en l'element controlat per Vue.

Solució

<div id="example">
  {{ message }}
</div>

<script>
  var example = new Vue({
    el: '#example',
    data: {
      message: 'Aprenent Vue.js!'
    }
  });
</script>

Exercici 2: Reactivitat

  1. Crea una instància de Vue que controli un element amb l'ID reactive.
  2. Defineix una propietat counter en l'objecte data amb el valor 0.
  3. Incrementa el valor de counter cada segon i mostra el valor actual en l'element controlat per Vue.

Solució

<div id="reactive">
  Compte: {{ counter }}
</div>

<script>
  var reactive = new Vue({
    el: '#reactive',
    data: {
      counter: 0
    },
    mounted: function() {
      var vm = this;
      setInterval(function() {
        vm.counter++;
      }, 1000);
    }
  });
</script>

Resum

En aquesta secció, hem après què és la instància de Vue, com crear-la i com utilitzar les seves propietats i mètodes per gestionar dades i reactivitat. També hem explorat els cicles de vida de la instància de Vue i com utilitzar els hooks de cicle de vida per executar codi en diferents punts del cicle de vida. Amb aquests coneixements, estem preparats per aprofundir en els conceptes bàsics de Vue.js en el següent mòdul.

◄ 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