Associazione di attributi
È già stato illustrato come visualizzare i dati in una pagina usando la sintassi Handlebars ({{}}). Ma il testo non è l'unica parte della pagina che potrebbe dover essere dinamica.
Molti dei valori in una pagina vengono impostati tramite attributi. Fortunatamente, Vue.js consente di associare i dati agli attributi tramite le direttive.
Direttive
Le direttive sono attributi riconosciuti da Vue.js. Consentono di impostare in modo dinamico i valori degli attributi HTML. Tutte le direttive iniziano con v-.
v-bind
La direttiva principale è v-bind. Consente di associare un valore di dati a un attributo. È possibile usarla per impostare in modo dinamico il nome di una classe, l'origine di un'immagine o uno stile.
Per usare la direttiva, inserire v-bind e un segno di due punti (:) davanti all'attributo che si vuole impostare. Quindi, per impostare l'attributo src per un'immagine, usare v-bind:src="value". Il valore dell'attributo viene quindi valutato in modo simile a come viene valutato quando si usa la sintassi {{ }}.
Il codice seguente genera l'elemento HTML <img src="./media/sample.jpg">.
<div id="app">
<img v-bind:src="imageSource" />
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
imageSource: './media/sample.jpg'
}
}
}).mount('#app');
</script>
La proprietà imageSource è disponibile per il modello perché viene restituita dal metodo data(). Viene quindi associata all'attributo src dell'elemento immagine.
Nota
Non è necessario mantenere un riferimento all'oggetto usato per l'app, ma è possibile chiamare createApp immediatamente, seguito da mount, come illustrato in precedenza.
Associazione in forma abbreviata
Si è visto come usare la direttiva v-bind nell'app Vue per associare i dati a un attributo. È possibile digitare questa direttiva anche in forma abbreviata. Ad esempio, anziché digitare v-bind:attribute, si può digitare :attribute. Questa sintassi abbreviata permette di risparmiare alcuni caratteri.
Nell'esempio relativo all'origine dell'immagine associata è possibile usare la sintassi abbreviata nel modo seguente.
<div id="app">
<img v-bind:src="imageSource" />
</div>
Ora è possibile digitare il codice seguente.
<div id="app">
<img :src="imageSource" />
</div>
Suggerimento
L'uso della sintassi abbreviata :attribute è generalmente considerata una procedura migliore rispetto all'uso di v-bind:attribute.
Classe e stile
Uno degli attributi più comuni che è possibile impostare per un elemento HTML è class o style. Per eseguire l'associazione a questi attributi, si può usare v-bind:class e v-bind:style oppure, in forma abbreviata, :class e :style.
Oggetti classe
Si supponga di avere un'applicazione con due classi: centered e active. Ecco come è possibile usare queste classi in HTML.
<div class='centered active'>Hello, Vue!</div>
Questo esempio, tuttavia, è statico. Se si vuole avere la possibilità di modificare i dati, è possibile usare un'associazione. Vue consente l'associazione non solo per una stringa, ma anche per un oggetto.
Ecco come è possibile disattivare il valore statico centered active per una proprietà diversa:
<div id="app">
<div :class="classObject">Hello, Vue!</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
classObject: {
centered: true,
active: true
}
}
}
}).mount('#app');
</script>
La proprietà di dati classObject include due proprietà con valori booleani. I valori booleani consentono di abilitare o disabilitare classi specifiche. L'impostazione di centered su false restituirebbe <div class="active"> perché active sarebbe l'unica proprietà ancora true.
Nota
Agli oggetti classe si applicano le regole di denominazione JavaScript. Se quindi il nome della classe usa un trattino, come in center-text, inserire il nome tra virgolette ('center-text': true) quando si aggiunge la proprietà.
Oggetti stile
L'impostazione di stili in CSS implica la creazione di raccolte di coppie chiave/valore. La rappresentazione dello stile tramite un oggetto JavaScript è relativamente naturale. In Vue.js è possibile creare oggetti stile per impostare lo stile.
Ad esempio, per impostare il colore di sfondo (background-color) dello stile di un elemento HTML, si può usare il codice seguente.
<div id="app">
<div :style="styleObject">Hello, Vue!</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
styleObject: {
'background-color': 'red'
}
}
}
}).mount('#app');
</script>