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

Conceptes Bàsics de Vue.js

Següent ►
►

Introducció a Vue.js

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 només se centra en la capa de vista, però és fàcilment escalable amb una biblioteca d'ecosistema que cobreix funcions avançades com el routing i la gestió d'estat.

Característiques Clau de Vue.js

  • Reactivitat: Vue utilitza un sistema de reactivitat basat en dades, que actualitza automàticament la vista quan les dades canvien.
  • Components: Vue permet crear components reutilitzables que encapsulen HTML, CSS i JavaScript.
  • Directives: Vue proporciona directives com v-bind i v-model per manipular el DOM de manera declarativa.
  • Ecosistema: Inclou eines com Vue Router per al routing i Vuex per a la gestió d'estat.

Configuració del Projecte Vue.js

Instal·lació de Vue CLI

Vue CLI és una eina estàndard per inicialitzar i gestionar projectes Vue.js. Per instal·lar Vue CLI, necessites tenir Node.js i npm instal·lats.

npm install -g @vue/cli

Creació d'un Nou Projecte

Un cop instal·lat Vue CLI, pots crear un nou projecte amb el següent comandament:

vue create my-vue-app

Segueix les instruccions per configurar el projecte segons les teves necessitats.

Estructura d'un Projecte Vue.js

Un projecte Vue típic té l'estructura següent:

my-vue-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md
  • public/index.html: El fitxer HTML principal.
  • src/main.js: El punt d'entrada de l'aplicació.
  • src/App.vue: El component principal de l'aplicació.
  • src/components/: Carpeta per als components Vue.

El Teu Primer Component Vue

Creació d'un Component

Un component Vue és un fitxer .vue que encapsula HTML, CSS i JavaScript. Aquí tens un exemple d'un component senzill:

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hola, món!'
    };
  }
};
</script>

<style scoped>
.hello {
  font-family: Arial, sans-serif;
  color: #42b983;
}
</style>

Utilització del Component

Per utilitzar el component HelloWorld en el teu projecte, primer has d'importar-lo i registrar-lo en el component App.vue.

<!-- src/App.vue -->
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
</style>

Directives de Vue.js

v-bind

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

<template>
  <img v-bind:src="imageSrc" alt="Example Image">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

v-model

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

<template>
  <input v-model="message" placeholder="Escriu un missatge">
  <p>El teu missatge: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if i v-for

Les directives v-if i v-for s'utilitzen per a la renderització condicional i la iteració sobre llistes, respectivament.

<template>
  <div>
    <p v-if="isVisible">Aquest text és visible.</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

Exercicis Pràctics

Exercici 1: Crear un Component de Salutació

Crea un component anomenat Greeting.vue que mostri un missatge de salutació passat com a propietat (prop).

Solució

<!-- src/components/Greeting.vue -->
<template>
  <div>
    <h1>{{ greetingMessage }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Greeting',
  props: {
    greetingMessage: {
      type: String,
      required: true
    }
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Exercici 2: Crear una Llista de Tasques

Crea un component anomenat TodoList.vue que mostri una llista de tasques i permeti afegir-ne de noves.

Solució

<!-- src/components/TodoList.vue -->
<template>
  <div>
    <h2>Llista de Tasques</h2>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
    </ul>
    <input v-model="newTask" placeholder="Nova tasca">
    <button @click="addTask">Afegir Tasca</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: 'Aprendre Vue.js' },
        { id: 2, name: 'Construir una aplicació' }
      ],
      newTask: ''
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ id: this.tasks.length + 1, name: this.newTask });
        this.newTask = '';
      }
    }
  }
};
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

Resum

En aquest tema, hem après els conceptes bàsics de Vue.js, incloent-hi la configuració del projecte, la creació de components i l'ús de directives. Hem vist com Vue facilita la creació d'interfícies d'usuari reactives i modulars. Els exercicis pràctics ens han ajudat a consolidar aquests coneixements. En el proper tema, explorarem com gestionar l'estat de l'aplicació amb Vuex.

◄ Anterior
◄
Següent ►
►

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

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