Skip to content

3. projeto [vuejs-01]: o básico

Para explicar o código executado em [vuejs-00], vamos simplificá-lo em [vuejs-01]. Duplicamos a pasta [vuejs-00] em [vuejs-01]:

Image

O projeto [vuejs-01] compreende essencialmente quatro arquivos:

  • [main.js] e [2] são o ponto de entrada do projeto;
  • [App.vue, HelloWorld.vue] e [3-4] são componentes do [Vue.js], podendo incluir, opcionalmente, os seguintes elementos:
    • [<template>...</template>]: código HTML;
    • [<script>...</script>]: o código JavaScript associado ao código HTML;
    • [<style>...</style>]: o estilo CSS associado ao código HTML;
  • [public/index.html] [5]: o documento HTML exibido pelo comando [npm run serve];

O arquivo [public/index.html] exibido ao executar o projeto é este:


<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- os arquivos gerados serão inseridos automaticamente -->
  </body>
</html>

Portanto, esse arquivo HTML não exibe nada de forma estática. Não há aqui nenhum código HTML. A exibição é dinâmica: o código jS do projeto irá gerar o HTML, que substituirá integralmente a tag [<div id=’app’>] da linha 14. O código HTML, gerado pelo código jS do projeto e inserido no lugar da tag [<div>] da linha 14, provém das tags [template] dos componentes [vue.js], cujos arquivos possuem a extensão [.vue].

O código HTML é inserido dinamicamente na linha 14 pelo seguinte script [vuejs-01/main.js]:


// importações
import Vue from 'vue'
import App from './App.vue'

// configuração
Vue.config.productionTip = false

// instanciação do projeto [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

Comentários

  • linha 2: o objeto [Vue] é fornecido pelo framework [vue.js];
  • linha 3: o objeto [App] é fornecido pelo arquivo [vuejs-01/App.vue];
  • linha 6: configuração do objeto [Vue];
  • linhas 9-11: são as linhas que:
    • geram o código HTML do aplicativo. Na linha 10, é o arquivo [App.vue] que o gera;
    • carregam o código HTML gerado na linha 10 na seção [<div id=’app’></div>] do arquivo [public/index.html];

Qualquer projeto [Vue.js] pode manter o arquivo [index.html] tal como está.

O arquivo [App.vue] do projeto inicial [vuejs-00] é simplificado da seguinte forma no projeto [vuejs-01]:


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Comentários

  • Um fragmento [.vue] compreende, no máximo, três seções:
    • [<template>...</template>]: do código HTML;
    • [<script>...</script>]: o código JavaScript associado ao código HTML;
    • [<style>...</style>]: o estilo CSS associado ao código HTML;

Aqui, não temos a seção [style].

  • linhas 1-6: o código HTML do fragmento (página, componente, visualização, ...);
  • linhas 2-5: a seção [template] só pode conter um elemento. Geralmente, insere-se uma seção [div] que abrange todo o HTML do fragmento. Também é possível inserir uma tag <template>;
  • linha 3: uma imagem;

Image

  • linha 4: um componente denominado [HelloWorld]. O princípio do [Vue.js] consiste em construir páginas da web por meio de fragmentos definidos em arquivos [.vue], como, neste caso, o [App.vue]. Esse componente é definido pelo arquivo [HelloWorld.vue], definido na linha 9 do script jS associado;
  • linha 4: um componente pode aceitar parâmetros. O parâmetro aqui é o atributo [msg];
  • linhas 8-17: o script jS do fragmento (ou componente);
  • linha 9: para poder utilizar o componente [HelloWorld] no componente [App], é necessário importar sua definição para a parte [script];
  • linhas 11-16: o script define um objeto e o exporta para torná-lo disponível externamente;
  • linha 12: o atributo [name] define o nome do componente exportado;
  • linhas 13-15: o atributo [components] lista os componentes utilizados pelo componente [App]. Eles são exportados junto com ele;

Na linha 9, não é obrigatório que o componente [HelloWorld] tenha o mesmo nome que o arquivo que o define. Ele poderia ser importado como [X] e exportado como componente [Bonjour]:

Image

  • linha 14: o componente [X] é exportado com o nome [Bonjour]. Ele é então utilizado com esse nome, na linha 4;

A primeira versão é a mais comum; portanto, definiremos nossos componentes dessa forma;


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

A linha 14 é um atalho para o código [HelloWorld : HelloWorld]: o componente [HelloWorld] (à direita, importado na linha 9) é exportado com o nome [HelloWorld] (à esquerda).

Image

Simplificamos o componente [HelloWorld.vue] da seguinte maneira:


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

Comentários

  • o componente [HelloWorld] tem a mesma estrutura de arquivo que o componente principal [App];
  • linha 3: aqui temos uma avaliação de expressão JavaScript, neste caso a expressão [msg];
  • linhas 10-12: definem as propriedades do componente, mais precisamente seus parâmetros. Quando o componente [App] instanciou um componente [HelloWorld], ele o fez com a seguinte sintaxe: 

<HelloWorld msg="Notre première application Vue.js" />

O componente [HelloWorld] é instanciado atribuindo-se um valor ao parâmetro (atributo) [msg]. Se seguirmos o [template] do componente [HelloWorld], este passa a ser:


<div>
    <h1>Notre première application Vue.js</h1>
</div>
  • linhas 7-14: as propriedades do componente definidas na forma de um objeto que é exportado;
    • linha 9: o componente é exportado com o nome [HelloWorld];
    • linhas 10-12: seus parâmetros são definidos pela propriedade [props];

Por fim, se reunirmos os modelos dos dois componentes [App, HelloWorld] utilizados, o arquivo [index.html] exibido será o seguinte:


<!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">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Notre première application Vue.js</h1>
    </div>
  </div></body>
</html>

Executamos o aplicativo alterando o comando [serve] [1] do arquivo [package.json]:

Image

A página exibida é, então, [2].

Agora, vamos examinar o código dessa página:

Image

  • em [1], substituir por [clic droit];
  • em [2], o código-fonte da página. Vemos que esse é o código do arquivo inicial [index.html] e não foi ele que foi exibido. De fato, foi a página [index.html] que foi carregada inicialmente. Em seguida, dinamicamente, o código JavaScript modificou essa página, mas isso não nos é mostrado;

Quando as páginas são geradas dinamicamente por JavaScript, a opção [2] não serve para nada. É preciso acessar as ferramentas do navegador (F12 no Firefox) para ver o código da página atualmente exibida:

Image

  • em [1], o inspetor do DOM (Document Object Model) do documento exibido;
  • em [2], o que esse DOM realmente contém;
  • [3-4], as ferramentas que usaremos para exibir os objetos JavaScript utilizados pelo framework [Vue.js];
  • [4] é uma extensão (neste caso, para o Firefox) para depurar aplicativos [Vue.js]:
    • para o Firefox: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
    • para o Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];

Vamos examinar a aba [Vue] [4]:

Image

A visualização [1-4] nos mostra a estrutura [Vue.js] do documento: a raiz do documento [2] (index.html) inclui o componente [App] (3), que, por sua vez, inclui o componente [HelloWorld] (4). Ao clicar em [4], são exibidas as propriedades dos componentes [HelloWorld] e [5].

Em [4] (à direita), vemos o indicador [$vm0]. Esse é o nome da variável que pode ser usada no console JavaScript [6] para designar o objeto [HelloWorld]. Vamos fazer isso:

Image

  • em [2], fazemos com que a expressão [$vm0] seja avaliada, o que resulta na exibição de sua estrutura. Normalmente, não precisaremos usar essa estrutura diretamente;

Vamos encerrar mostrando a capacidade de [hot reload] do comando [serve] usado para executar o projeto:

  • no [App.vue], altere a mensagem exibida pelo [HelloWorld]:

Image

  • em [1], a mensagem exibida é alterada;
  • no [2-3], a página é atualizada automaticamente sem intervenção nossa;

Agora, vamos criar diversos projetos [vuejs-xx] para ilustrar os pontos importantes de [Vue.js]. Por “importantes”, entenda-se “que vamos utilizar no cliente [vue.js] do servidor de cálculo de impostos”. Outros pontos “importantes” serão omitidos caso não sejam utilizados no cliente. Portanto, não será feita uma apresentação exaustiva do [vue.js].

https://stahe.github.io
Este tutorial, escrito por Serge Tahé, é disponibilizado ao público de acordo com os termos da Creative Commons Atribuição – Sem uso comercial – Compartilhamento igualitário 3.0 Inalterado.