Introducció

Vue.js és un framework progressiu per a la construcció d'interfícies d'usuari. A diferència d'altres frameworks monolítics, Vue està dissenyat des de zero per ser adoptable de manera incremental. La seva biblioteca principal se centra només en la capa de vista, i és fàcil de recollir i integrar amb altres biblioteques o projectes existents. D'altra banda, Vue també és perfectament capaç d'alimentar aplicacions sofisticades d'una sola pàgina quan s'utilitza en combinació amb eines modernes i biblioteques de suport.

Característiques clau de Vue.js

Reactivitat: Vue.js utilitza un sistema de reactivitat basat en dades que actualitza automàticament la vista quan les dades canvien.
Components: Vue.js està basat en components, el que permet crear elements reutilitzables i modulars.
Directives: Vue.js proporciona directives com v-bind i v-model per manipular el DOM de manera declarativa.
Transicions: Vue.js té suport integrat per a transicions i animacions quan els elements del DOM són inserits, actualitzats o eliminats.
Ecosistema: Vue.js té un ecosistema ric amb eines com Vue Router per a la gestió de rutes i Vuex per a la gestió d'estat.

Per què utilitzar Vue.js?

Simplicitat i facilitat d'ús: Vue.js és conegut per la seva corba d'aprenentatge suau i la seva documentació excel·lent.
Flexibilitat: Pots utilitzar Vue.js per a projectes petits o grans, des d'un simple widget fins a aplicacions complexes d'una sola pàgina.
Rendiment: Vue.js és lleuger i ofereix un rendiment excel·lent gràcies a la seva arquitectura optimitzada.
Comunitat i suport: Vue.js té una comunitat activa i un bon suport, amb nombrosos recursos i biblioteques disponibles.

Comparació amb altres frameworks

Característica	Vue.js	React	Angular
Arquitectura	MVVM	Biblioteca UI	Framework complet
Curva d'aprenentatge	Suau	Moderada	Pronunciada
Reactivitat	Integrada	Utilitza hooks	Utilitza RxJS
Components	Sí	Sí	Sí
Directives	Sí	No	Sí
Gestió d'estat	Vuex	Redux	NgRx
Rendiment	Alt	Alt	Alt

Exemple pràctic: Hola, Vue!

A continuació, crearem una simple aplicació "Hola, Vue!" per veure com funciona Vue.js en la pràctica.

Pas 1: Incloure Vue.js

Pots incloure Vue.js directament des d'un CDN en el teu fitxer HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Hola, Vue!</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hola, Vue!'
      }
    });
  </script>
</body>
</html>

Explicació del codi

Incloure Vue.js: Utilitzem un CDN per incloure Vue.js en el nostre projecte.
Crear un element HTML: Creem un div amb l'ID app que serà gestionat per Vue.
Instància de Vue: Creem una nova instància de Vue i la lliguem a l'element amb l'ID app.
Dades reactives: Definim una propietat message en l'objecte data de Vue. Aquesta propietat és reactiva, el que significa que qualsevol canvi en el seu valor actualitzarà automàticament la vista.

Exercici pràctic

Modifica l'exemple anterior per afegir un camp de text que permeti a l'usuari canviar el missatge en temps real.

Solució

<!DOCTYPE html>
<html>
<head>
  <title>Hola, Vue!</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <input v-model="message" placeholder="Escriu un missatge">
    <p>{{ message }}</p>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hola, Vue!'
      }
    });
  </script>
</body>
</html>

Explicació de la solució

Directiva v-model: Utilitzem la directiva v-model per enllaçar el valor del camp de text amb la propietat message de Vue. Això permet que qualsevol canvi en el camp de text actualitzi automàticament el valor de message i viceversa.
Actualització en temps real: Quan l'usuari escriu en el camp de text, el valor de message es modifica i la vista es torna a renderitzar per mostrar el nou valor.

Conclusió

En aquesta secció, hem après què és Vue.js, les seves característiques clau, per què és una bona elecció per al desenvolupament d'interfícies d'usuari, i hem vist un exemple pràctic de com crear una simple aplicació "Hola, Vue!". Amb aquesta base, estem preparats per configurar el nostre entorn de desenvolupament i començar a construir aplicacions més complexes amb Vue.js.

Què és Vue.js?

Introducció

Característiques clau de Vue.js

Per què utilitzar Vue.js?

Comparació amb altres frameworks

Exemple pràctic: Hola, Vue!

Pas 1: Incloure Vue.js

Explicació del codi

Exercici pràctic

Solució

Explicació de la solució

Conclusió

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