L'enllaç de dades és un dels conceptes fonamentals en Vue.js que permet sincronitzar les dades entre el model i la vista de manera reactiva. Això significa que qualsevol canvi en les dades del model es reflectirà automàticament en la vista i viceversa.
Tipus d'enllaç de dades
- Enllaç de dades unidireccional
L'enllaç de dades unidireccional permet que les dades flueixin des del model cap a la vista. Això es fa utilitzant la sintaxi de plantilles de Vue.js.
Exemple:
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hola, món!'
}
});
</script>En aquest exemple, el valor de message es mostra dins del paràgraf <p>. Si el valor de message canvia, la vista es tornarà a renderitzar automàticament per reflectir el nou valor.
- Enllaç de dades bidireccional
L'enllaç de dades bidireccional permet que les dades flueixin tant des del model cap a la vista com des de la vista cap al model. Això es fa utilitzant la directiva v-model.
Exemple:
<div id="app">
<input v-model="message" placeholder="Escriu un missatge">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
});
</script>En aquest exemple, el valor de message es sincronitza amb l'entrada de text. Qualsevol canvi en l'entrada de text actualitzarà el valor de message i viceversa.
Directives d'enllaç de dades
v-bind
v-bindLa directiva v-bind s'utilitza per enllaçar atributs HTML amb dades de Vue.js. Això és útil per a atributs com src, href, class, style, etc.
Exemple:
<div id="app">
<img v-bind:src="imageSrc" alt="Imatge">
</div>
<script>
new Vue({
el: '#app',
data: {
imageSrc: 'https://via.placeholder.com/150'
}
});
</script>En aquest exemple, l'atribut src de la imatge es vincula amb la propietat imageSrc del model de dades.
v-model
v-modelLa directiva v-model s'utilitza per crear enllaços de dades bidireccionals en elements de formulari com <input>, <textarea> i <select>.
Exemple:
<div id="app">
<input v-model="username" placeholder="Escriu el teu nom d'usuari">
<p>Nom d'usuari: {{ username }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
username: ''
}
});
</script>En aquest exemple, el valor de username es sincronitza amb l'entrada de text.
Exercicis pràctics
Exercici 1: Enllaç de dades unidireccional
Crea una aplicació Vue que mostri un missatge de benvinguda utilitzant enllaç de dades unidireccional.
Solució:
<div id="app">
<h1>{{ welcomeMessage }}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
welcomeMessage: 'Benvingut a Vue.js!'
}
});
</script>Exercici 2: Enllaç de dades bidireccional
Crea una aplicació Vue que permeti a l'usuari introduir el seu nom i mostri un missatge de benvinguda personalitzat utilitzant enllaç de dades bidireccional.
Solució:
<div id="app">
<input v-model="name" placeholder="Escriu el teu nom">
<h1>Hola, {{ name }}!</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
name: ''
}
});
</script>Errors comuns i consells
Error: No es reflecteixen els canvis en la vista
- Solució: Assegura't que la propietat de dades està definida correctament en l'objecte
datade la instància de Vue.
Error: v-model no funciona en elements personalitzats
- Solució:
v-modelnomés funciona en elements de formulari natius com<input>,<textarea>i<select>. Per a elements personalitzats, hauràs de gestionar l'enllaç de dades manualment.
Conclusió
L'enllaç de dades és una característica poderosa de Vue.js que facilita la sincronització de dades entre el model i la vista. Comprendre com utilitzar l'enllaç de dades unidireccional i bidireccional, així com les directives v-bind i v-model, és fonamental per desenvolupar aplicacions Vue.js eficients i reactives. Amb aquests coneixements, estàs preparat per avançar cap a conceptes més avançats de Vue.js.
Curs de Vue.js
Mòdul 1: Introducció a Vue.js
- Què és Vue.js?
- Configuració de l'entorn de desenvolupament
- Creant la teva primera aplicació Vue
- Entenent la instància de Vue
Mòdul 2: Conceptes bàsics de Vue.js
- Sintaxi de plantilles
- Enllaç de dades
- Propietats computades i observadors
- Enllaços de classes i estils
- Renderització condicional
- Renderització de llistes
Mòdul 3: Components de Vue.js
- Introducció als components
- Props i esdeveniments personalitzats
- Slots
- Components dinàmics i asíncrons
- Comunicació entre components
Mòdul 4: Vue Router
- Introducció a Vue Router
- Configuració de Vue Router
- Rutes dinàmiques
- Rutes niades
- Guàrdies de navegació
Mòdul 5: Gestió d'estat amb Vuex
- Introducció a Vuex
- Estat, getters, mutacions i accions
- Mòduls a Vuex
- Utilitzant Vuex en components
- Patrons avançats de 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
- Funcions de renderització i JSX
- Renderització del costat del servidor (SSR) amb Nuxt.js
- API de composició de Vue 3
- Optimització del rendiment