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.

    
        <body>
            <div id="app">
                <img src="" alt="">
            </div>
            
            <script>
                var app = new Vue({
                    el: '#app',
                    data: {
                    },
                });
            </script>
        </body>
    

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.

    
        <body>
            <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>
        </body>
    

Fácil não? Vamos incrementar mais um pouco e definir um valor para o atributo alt.

    
        <body>
            <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>
        </body>
    

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.