Associação de atributo
Você já explorou como exibir dados em uma página usando handlebars ({{}}). Mas o texto na página não é a única parte que pode precisar ser dinâmica.
Muitos dos valores em uma página são definidos por meio de atributos. A boa notícia é que o Vue.js permite associar atributos por meio de diretivas.
Diretivas
As diretivas são atributos reconhecidos pelo Vue.js. Elas permitem que você defina dinamicamente os valores de atributos HTML. Todas as diretivas começam com v-.
v-bind
A diretiva principal é v-bind. Ela permite que você associe um valor de dados a um atributo. Use-a para definir dinamicamente o nome de uma classe, a origem de uma imagem ou um estilo.
Para usar a diretiva, coloque v-bind e dois-pontos (:) na frente do atributo que deseja definir. Portanto, para definir o atributo src para uma imagem, use v-bind:src="value". Depois, o valor do atributo é avaliado da mesma forma como é avaliado quando a sintaxe {{ }} é usada.
O código a seguir gera o 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>
A propriedade imageSource está disponível para o modelo porque ela é retornada do método data(). Em seguida, ela é associada ao atributo src do elemento de imagem.
Observação
Você não precisa manter uma referência ao objeto usado para o aplicativo. Mas você pode chamar createApp imediatamente, seguido de mount, como vimos anteriormente.
Abreviação de associação
Você acabou de ver como usar a diretiva v-bind no seu aplicativo Vue para associar dados a um atributo. Essa diretiva também pode ser digitada em formato abreviado. Por exemplo, em vez de digitar v-bind:attribute, você pode digitar :attribute. Essa abreviação economiza alguns caracteres.
No exemplo da origem da imagem associada, você pode usar a abreviação conforme mostrado a seguir.
<div id="app">
<img v-bind:src="imageSource" />
</div>
Agora, você pode digitar o código a seguir.
<div id="app">
<img :src="imageSource" />
</div>
Dica
Em geral, o uso da abreviação :attribute é considerado uma prática melhor do que o uso de v-bind:attribute.
Classe e estilo
Um dos atributos mais comuns que você pode querer definir para um elemento HTML é a class ou o style. Para fazer associação a esses atributos, use v-bind:class e v-bind:style. Ou, então, em formato abreviado, use :class e :style.
Objetos Classe
Digamos que você tenha um aplicativo com duas classes: centered e active. Em HTML, veja como você pode usar essas classes.
<div class='centered active'>Hello, Vue!</div>
No entanto, esse exemplo é estático. Se você quiser ter a capacidade de alterar os dados, use uma associação. O Vue permite a associação não apenas de uma cadeia de caracteres, mas também de um objeto.
Veja como mudar o valor estático centered active para outra propriedade:
<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>
A propriedade de dados classObject tem duas propriedades cujos valores são boolianos. Os valores boolianos permitem habilitar ou desabilitar classes específicas. A configuração de centered como false renderizará <div class="active">, porque active é a única propriedade que ainda é true.
Observação
As regras de nomenclatura do JavaScript se aplicam aos objetos de classe. Portanto, se o nome da classe usar um traço, como em center-text, coloque o nome entre aspas ('center-text': true) ao adicionar a propriedade.
Objetos de estilo
A definição de estilos em CSS envolve a criação de coleções de pares chave/valor. A representação do estilo por meio de um objeto JavaScript é relativamente natural. No Vue.js, você pode criar objetos de estilo para definir o estilo.
Por exemplo, para definir a cor da tela de fundo (background-color) do estilo de um elemento HTML, use o código a seguir.
<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>