Instância da Aplicação Vue

Para habilitar as funcionalidades do framework Vue em uma página web, é necessário criar uma instância da aplicação Vue. Essa instância é criada por meio da função Vue.createApp. Essa função recebe um objeto que contém os parâmetros responsáveis pela inicialização da aplicação:

Vue.createApp(/* { parâmetros } */)

Após criar a instância da aplicação, o método mount() pode ser chamado para associar a aplicação Vue a um elemento HTML específico na página. O método mount() utiliza um seletor CSS como argumento para identificar o elemento HTML que será vinculado:

const vueApp = Vue.createApp(/* { parâmetros } */); // criação da instância da aplicação Vue
vueApp.mount(/* seletor_do_elemento_html */);       // associação da instância ao elemento HTML

Por exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app"></div>
    <script>
        const vueApp = Vue.createApp({});
        vueApp.mount('#app');
    </script>
</body>
</html>

Neste exemplo, a função Vue.createApp recebe um objeto vazio, o que é suficiente para criar a instância da aplicação Vue. A variável vueApp representa a instância da aplicação Vue, que é associada ao elemento div com o identificador app.

Dados da Aplicação

Para configurar e inicializar uma aplicação Vue, o objeto de parâmetros passado à função Vue.createApp utiliza a função data() para definir as propriedades que armazenarão os dados da aplicação:

Vue.createApp({
    data() {
        return {
            name: 'Tom',
            age: 36
        }
    }
})

A função data retorna um objeto contendo as propriedades que armazenam os dados. No exemplo acima, são definidas duas propriedades: name e age.

Essa configuração pode ser exibida em uma página web:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
        <p>Nome: {{ name }}</p>
        <p>Idade: {{ age }}</p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    name: 'Tom',
                    age: 36
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

As expressões {{ propriedade }}, delimitadas por chaves duplas, acessam as propriedades definidas na instância Vue e exibem seus valores na página web.

Navegador exibindo dados da aplicação Vue.js

Os dados também podem ser definidos como um objeto externo e retornados pela função data:

const tom = { name: 'Tom', age: 36 };
Vue.createApp({
    data() {
        return tom;
    }
}).mount('#app');

Além disso, é possível acessar e modificar as propriedades da instância Vue diretamente. Essas alterações refletem-se automaticamente na interface, devido à reatividade das propriedades:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
        <p>Nome: {{ name }}</p>
        <p>Idade: {{ age }}</p>
    </div>
    <script>
        const vueApp = Vue.createApp({
            data() {
                return { name: "Tom", age: 36 }
            },
            mounted() {
                console.log(this.age); // 36
                this.age = 25;
                console.log(this.age); // 25
            }
        });
        vueApp.mount('#app');
    </script>
</body>
</html>

No exemplo acima, o método mounted() é chamado após a instância Vue ser montada no elemento HTML. Nele, o valor inicial da propriedade age é exibido no console, depois alterado, e o novo valor é exibido. A modificação também é refletida na interface.

Essa reatividade permite que aplicações interativas sejam desenvolvidas com facilidade. O método mounted() é apenas um dos locais possíveis para modificar propriedades da instância Vue. Alterações nos dados, independentemente do contexto, sempre atualizam a interface vinculada.

Métodos

Além de armazenar estado, uma instância Vue pode definir comportamentos através do parâmetro methods. Esse parâmetro contém um conjunto de métodos, cada um sendo uma função JavaScript padrão:

methods: {
    metodo1() {
        // lógica do método 1
    },
    metodo2() {
        // lógica do método 2
    },
    // ...
    metodoN() {
        // lógica do método N
    },
}

Por exemplo, métodos podem ser definidos para processar ou exibir informações baseadas nos dados da aplicação:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
        <p>{{ welcome() }}</p>
        <p>{{ displayUser() }}</p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return { name: "Tom", age: 36 };
            },
            methods: {
                welcome() {
                    return "Welcome " + this.name;
                },
                displayUser() {
                    return `UserInfo: name ${this.name}, age ${this.age}`;
                },
            },
        }).mount('#app');
    </script>
</body>
</html>

Nesse exemplo, foram criados dois métodos: welcome, que retorna uma mensagem de boas-vindas, e displayUser, que retorna informações sobre o usuário. Para acessar as propriedades definidas nos dados da instância Vue, é utilizada a palavra-chave this, como em this.name e this.age.

Os métodos podem ser chamados diretamente na página web utilizando interpolação:

<p>{{ welcome() }}</p>
<p>{{ displayUser() }}</p>

A interpolação chama o método e exibe seu retorno na interface.

Os métodos definidos na instância Vue também podem ser chamados diretamente no código JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
        <p>Nome: {{ name }}</p>
        <p>Idade: {{ age }}</p>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return { name: "Tom", age: 36 };
            },
            methods: {
                incrementAge() {
                    this.age++;
                },
                incrementAgeThreeTimes() {
                    for (let i = 0; i < 3; i++) {
                        this.incrementAge();
                    }
                },
            },
        }).mount('#app');

        app.incrementAgeThreeTimes();
    </script>
</body>
</html>

Nesse exemplo, o método incrementAge incrementa o valor da propriedade age em 1. O método incrementAgeThreeTimes faz uma chamada ao método incrementAge três vezes, resultando em um incremento total de 3 unidades.

Dentro da instância Vue, a palavra-chave this é utilizada para acessar tanto propriedades quanto outros métodos da própria instância:

incrementAgeThreeTimes() {
    this.incrementAge();
    // ...
}

Além de serem utilizados na interface HTML, os métodos também podem ser chamados diretamente no código JavaScript através do nome da instância:

app.incrementAgeThreeTimes();

Como resultado, após a execução do método incrementAgeThreeTimes, o valor da propriedade age será incrementado em 3.

Demonstração de chamada de métodos em Vue.js