Introdução ao Vue.js

3 minutos

Para começar a usar o Vue.js, você precisa instalar a estrutura, criar um aplicativo Vue e registrá-lo na página. O registro informa à página como usar o aplicativo.

Vamos começar.

Adicionar o Vue.js a uma página

Você pode adicionar o Vue.js a um aplicativo de algumas maneiras. Neste módulo, você adicionará um elemento script para importar o Vue de uma rede de distribuição de conteúdo (CDN). Usando uma CDN, você pode adicionar o Vue aos aplicativos existentes sem reescrevê-los.

Para adicionar o Vue a uma página usando uma CDN, adicione o elemento script a seguir à página.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Esse elemento instrui o navegador a executar o arquivo de script src referenciado pela diretiva. Depois que o script é executado, as APIs do Vue ficam disponíveis.

Criar um aplicativo

Todos os aplicativos Vue.js começam com a criação de um objeto de aplicativo. O aplicativo é a localização central para todos os dados e métodos usados pelo aplicativo. Embora o objeto de aplicativo siga algumas convenções, no núcleo, ele é um objeto JavaScript.

Para criar um aplicativo Vue, invoque o método createApp().

const App = Vue.createApp({
    // methods and content go here
});

Adicionar dados

Agora que você criou o seu aplicativo, você pode adicionar propriedades que dão ao seu aplicativo mais funcionalidade. Um método importante que a maioria dos aplicativos usa é data(). O Vue.js usa esse método para acessar qualquer informação que você precise disponibilizar para seu aplicativo.

Observação

Você usará o método data() neste módulo.

Todas as propriedades dentro do objeto retornadas por data() são dinâmicas. O Vue.js detecta automaticamente qualquer alteração de valor. Em seguida, ele atualiza as partes apropriadas da exibição com as informações atualizadas.

Criar um objeto de dados

O Vue.js invoca o método data(). Em troca, o Vue.js espera um objeto JavaScript.

No exemplo a seguir, o objeto retornado contém as propriedades firstName e lastName.

// a sample app object
const App = Vue.createApp({
    data() {
        return {
            firstName: 'Christopher',
            lastName: 'Harrison'
        };
    }
});

Neste ponto, os dados são expostos para que possam ser exibidos ao usuário.

Montar o aplicativo

O objeto de aplicativo criado precisa ser montado antes que o Vue.js possa usá-lo. Ao montar o aplicativo, você indica a parte da página controlada pelo aplicativo, permitindo que ele exiba informações ou, até mesmo, HTML.

Para montar o aplicativo, referencie a id de um elemento HTML comum.

<!-- the HTML element which will host our app -->
<div id='app'>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>

Em runtime, o conteúdo do elemento id= 'app' é substituído pelo conteúdo do aplicativo Vue.js.

Exibir dados

Para exibir dados na página, use a sintaxe {{ }}, às vezes, chamada de handlebars. Dentro da sintaxe {{ }}, você pode fornecer qualquer código JavaScript necessário para acessar as informações que deseja exibir.

A função data() criada anteriormente retorna um objeto. O Vue.js disponibiliza o objeto automaticamente, de modo que você não precisa chamar data().

Caso deseje exibir o nome, use a sintaxe {{ firstName }}. O exemplo a seguir mostra o aplicativo completo, que pode exibir lastName e firstName.

<!-- the HTML element which will host our app -->
<div id='app'>
    {{ lastName }}, {{ firstName }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>