Categorias:

Vue.js: Data binding

Imagem do avatar de
Publicado por Fernando Santos

Neste artigo espero compartilhar um compilado das minhas primeiras aulas de Vue.js. Estou deixando estas anotações para referência futura e espero que também possam lhes ser úteis.

Atenção: Este artigo usa a versão 3.x do framework. Tenha certeza de estar referenciando o endereço CDN correto em seu projeto. Alguns dos recursos apresentados podem não funcionar em versões anteriores.

Criar template e fazer referencia ao endereço CDN

  1. Criar os arquivo index.html e js.js
  1. Referenciar os arquivos de script dentro do template html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myTemplate">
        <p>{{HelloVueMessage}}</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="js.js"></script>
</body>
</html>
  1. Criar a aplicação myApp no arquivo js.js com os atributos HelloVueMessage e VueUrl.
  2. Conectar a aplicação, myApp, com o elemento myTemplate (<div id=”myTemplate”>). 
const myApp = Vue.createApp({
    data(){
        return{
            HelloVueMessage: "Hello Vue.js",
            VueUrl: "https://v3.vuejs.org/"
        };
    }    
}) ;

myApp.mount("#myTemplate");

Data Binding

Nesta seção vamos ver como expor os atributos da aplicação no template.

Interpolação

Para criar um parágrafo no template com o conteúdo do atributo HelloVueMessage, use os caracteres {{ }}. Esse método é conhecido como interpolação.

<body>
    <div id="myTemplate">
        <p>{{HelloVueMessage}}</p>
    </div>    
    <script src="https://unpkg.com/vue@next"></script>
    <script src="js.js"></script>
</body>

v-bind

A interpolação não funciona em atributos dos elementos da página. Para conectar o atributo href de um elemento link do template com o atributo VueUrl da aplicação utilize a diretiva v-bind.

<body>
    <div id="myTemplate">
        <p>{{HelloVueMessage}}</p>
        <a v-bind:href="VueUrl">Vue.js website</a>
    </div>    
    <script src="https://unpkg.com/vue@next"></script>
    <script src="js.js"></script>
</body>

Atenção: Também podemos usar a forma simplificada, omitindo a diretiva v-bind e usando apenas o sinal : (dois pontos), conforme o trecho de código abaixo

    <a :href="VueUrl">Vue.js website</a>

two way data binding

Para atualizar e exibir o conteúdo de um atributo em tempo real, utilize a diretiva v-model.

Primeiro, crie o atributo VueName na aplicação:

const myApp = Vue.createApp({
    data(){
        return{
            HelloVueMessage: "Hello Vue.js",
            VueUrl: "https://v3.vuejs.org/",
            VueName : ""            
        };
    }    
}) ;

No template, crie um input com a diretiva v-model e coloque o nome do atributo VueName. Crie um parágrafo logo abaixo e use interpolação usando este mesmo atributo:

<body>
    <div id="myTemplate">
        <p>{{HelloVueMessage}}</p>
        <a v-bind:href="VueUrl">Vue.js website</a> 
        <br>
        <input type="text" v-Model = "VueName">       
        <p>{{VueName}}</p>
    </div>    
    <script src="https://unpkg.com/vue@next"></script>
    <script src="js.js"></script>
</body>

Abra a página index.html no navegador, digite qualquer coisa dentro do input e delicie-se com o conteúdo do parágrafo sendo atualizado em tempo real sem a necessidade de nenhum esforço adicional.

Tags: