Fala, jovem! No último capítulo aprendemos sobre a diretiva v-model. Agora, vamos falar sobre a diretiva v-bind do vuejs que vai ser usada basicamente nos atributos das tags html, dando valores a ela.
Segue o vídeo do meu canal do youtube. Não se esqueça de se inscrever e mandar aquele like massa! 
Então vamos ver como funciona na prática. Vou pegar, como de costume, meu HTML padrão e criar uma tag img para obviamente inserir uma imagem.
<div id="app">
<img decoding="async" src="" alt="Vuejs diretiva v-bind 1">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
},
});
</script>
Mas essa imagem vai ser inserida dinamicamente via a diretiva v-bind.
Vamos então dá um bind no src, que é a fonte da imagem. Para isso, a gente precisa usar o prefixo v- seguido de bind e mais símbolo : (dois pontos), apenas isso.
E aí, então, esse v-bind:src recebe uma variável. Confere no código abaixo para ficar mais fácil.
Eu vou definir o nome da variável como myImage.
Eu preciso ter uma imagem de fato para que isso funcione, não é mesmo? Vamos supor que essa imagem venha direto de uma API que, normalmente, já informa o endereço completo da imagem. Mas, para efeito de teste você pode pegar qualquer imagem do Google, ou melhor ainda usar o serviço do placeholder.com ou lorempixel.com.
Sabe então o que o Vue.js vai fazer? Ele vai reconhecer o elemento html img, reconhecer a diretiva v-bind e aplicar esse endereço no src que é a fonte da imagem. Tudo isso automaticamente.
<div id="app">
<img v-bind:src="myImage" alt="">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
myImage: 'https://via.placeholder.com/150'
},
});
</script>
Fácil não? Vamos incrementar mais um pouco e definir um valor para o atributo alt.
<div id="app">
<img v-bind:src="myImage" v-bind:alt="myImageAltText">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
myImage: 'https://via.placeholder.com/150',
myImageAltText: 'Vue.js is awesome',
},
});
</script>
Bom, em termos gerais, nós poderemos usar o v-bind em qualquer atributo html. Você também pode usar em atributos do HTML5 como por exemplo data-alguma-coisa Exemplos: data-user-id, data-validate, etc.
Uma dica é não usar a palavra v-bind, porque tem um caminho mais curto, que é só colocar o sinal de dois pontos :. Eu particularmente acho que o código fica mais limpo e organizado. Mas você pode usar qualquer uma das formas que vai funcionar.
Como eu já mencionei, vai funcionar em qualquer atributo HTML, inclusive em classes. Mas isso vou deixar para o próximo artigo, pois vamos ver muita coisa legal com class e css inline style bind.
É isso, aí, pessoal. Eu fico por aqui. Se alguém tiver alguma dúvida, é só comentar que eu vou respondendo.
Nos vemos no próximo capítulo.
