Les directives integrades de Vue.js són eines poderoses que permeten manipular el DOM de manera declarativa. Aquestes directives s'utilitzen directament en les plantilles de Vue per afegir comportaments dinàmics als elements HTML. En aquesta secció, explorarem les directives integrades més comunes i com utilitzar-les.
Contingut
- v-bind
La directiva v-bind s'utilitza per enllaçar atributs HTML a dades de Vue. Això és útil per actualitzar dinàmicament els atributs d'un element.
Exemple
<div id="app">
<a v-bind:href="url">Enllaç</a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://www.example.com'
}
});
</script>Explicació
En aquest exemple, l'atribut href de l'element <a> està enllaçat a la propietat url de les dades de Vue. Quan la propietat url canvia, l'atribut href s'actualitza automàticament.
- v-model
La directiva v-model s'utilitza per crear enllaços bidireccionals entre les dades de Vue i els elements del formulari.
Exemple
<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>Explicació
En aquest exemple, l'entrada de text està enllaçada a la propietat message de les dades de Vue. Quan l'usuari escriu en l'entrada, la propietat message s'actualitza automàticament i viceversa.
- v-if, v-else-if, v-else
Les directives v-if, v-else-if i v-else s'utilitzen per renderitzar condicionalment elements en funció d'una expressió booleana.
Exemple
<div id="app">
<p v-if="type === 'A'">Tipus A</p>
<p v-else-if="type === 'B'">Tipus B</p>
<p v-else>Altres tipus</p>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'A'
}
});
</script>Explicació
En aquest exemple, es renderitza un paràgraf diferent en funció del valor de la propietat type. Si type és 'A', es mostra "Tipus A"; si és 'B', es mostra "Tipus B"; en cas contrari, es mostra "Altres tipus".
- v-show
La directiva v-show s'utilitza per mostrar o amagar un element en funció d'una expressió booleana. A diferència de v-if, v-show no elimina l'element del DOM, sinó que simplement canvia la seva propietat display.
Exemple
<div id="app">
<p v-show="isVisible">Aquest paràgraf és visible</p>
<button @click="isVisible = !isVisible">Canvia Visibilitat</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
});
</script>Explicació
En aquest exemple, el paràgraf es mostra o s'amaga en funció del valor de la propietat isVisible. El botó canvia el valor de isVisible quan es fa clic.
- v-for
La directiva v-for s'utilitza per renderitzar una llista d'elements basats en una matriu de dades.
Exemple
<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>Explicació
En aquest exemple, es renderitza una llista d'elements <li> basada en la matriu items. Cada element de la matriu es representa com un element <li>.
- v-on
La directiva v-on s'utilitza per afegir controladors d'esdeveniments als elements HTML.
Exemple
<div id="app">
<button v-on:click="greet">Saluda</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
greet: function() {
alert('Hola!');
}
}
});
</script>Explicació
En aquest exemple, es defineix un controlador d'esdeveniments greet que mostra una alerta quan es fa clic al botó.
- v-pre
La directiva v-pre s'utilitza per evitar la compilació d'un element i els seus fills. Això pot ser útil per mostrar codi de plantilla literal.
Exemple
Explicació
En aquest exemple, el contingut del paràgraf no es compilarà, i es mostrarà literalment com {{ aquest text no serà compilat }}.
- v-cloak
La directiva v-cloak s'utilitza per mantenir un element ocult fins que la instància de Vue estigui completament inicialitzada.
Exemple
<div id="app" v-cloak>
<p>{{ message }}</p>
</div>
<style>
[v-cloak] { display: none; }
</style>
<script>
new Vue({
el: '#app',
data: {
message: 'Hola, món!'
}
});
</script>Explicació
En aquest exemple, el paràgraf es mantindrà ocult fins que Vue hagi inicialitzat completament la instància, evitant que es mostrin plantilles no compilades.
- v-once
La directiva v-once s'utilitza per renderitzar un element només una vegada. Això pot millorar el rendiment en elements que no necessiten ser actualitzats.
Exemple
<div id="app">
<p v-once>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Aquest missatge es renderitza una vegada'
}
});
</script>Explicació
En aquest exemple, el paràgraf es renderitzarà només una vegada, i no es tornarà a renderitzar encara que la propietat message canviï.
Conclusió
Les directives integrades de Vue.js proporcionen una manera poderosa i flexible de manipular el DOM de manera declarativa. Hem explorat les directives més comunes, com v-bind, v-model, v-if, v-show, v-for, v-on, v-pre, v-cloak i v-once. A mesura que avancis en el teu aprenentatge de Vue.js, aquestes directives seran fonamentals per crear aplicacions dinàmiques i interactives.
En el següent tema, explorarem com crear directives personalitzades per afegir funcionalitats específiques a les nostres aplicacions 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