1. A Instância Vue (Introdução ao Vue.js)

Nesse tópico vamos aprender como usar o Vue para exibir dados em uma página web.

My first Vue app

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.

A Instância Vue

Nesse tópico vamos aprender como usar o Vue para exibir dados em uma página web.

Objetivo

Vamos adicionar o título de nossa aplicação.

Código inicial

• Para iniciar como qualquer projeto, sugiro que você crie uma pasta e dentro dela crie um arquivo chamado index.html
• Também dentro desta pasta crie outra chamada assets/js/ que vai ser o local onde vamos criar nosso arquivo main.js
• Dentro do nosso index.html vamos adicionar o seguinte código

No nosso arquivo main.js vamos adicionar uma variável chamada meme com o valor 'Dog Meme' logo você vai entender o motivo.

Depois disso basta abrir no navegador para ver o resultado do html, e também já encontramos nosso primeiro empecilho.

Problema

Como eu exibo o valor da variável meme do nosso arquivo javascript, no html usando o Vue.js?

good question

Nós precisamos de alguma forma mostrar o valor da variável memedentro do <h1>no nosso html, no lugar de Meme Name.

Solução

O primeiro passo é incluir o script do Vue no nosso projeto. Esse código você pode adicionar abaixo do <title>Meme Generator</title> no nosso index.html

E no nosso main.js vamos incluir a instância do Vue. Assim vamos substituir todo nosso código do main.js pelo seguinte:

E assim usar a nossa primeira expressão JavaScript. {{ meme }} substituindo ela no lugar do Meme Name no nosso h1

Resultado

Vamos ver o nome Dogdentro de nossa tag <h1>. Além disso, fechando nosso inspect do navegador e abrindo novamente depois de atualizar a página vamos ver que nossa extensão do Vue.js devtools está em funcionamento.

Ai você deve se perguntar…

WTF???

Meu código funciona e eu não tenho ideia do porquê

Então vamos por partes, vamos analisar nosso código do main.js

O que é a Instância Vue?

A instância Vue é a raiz de nossa aplicação. Ela é criada passando um objeto com suas opções. Nesse objeto tem uma variedade de propriedades opcionais que dão a instância a habilidade de armazenar dados e realizar ações.

Vamos ver aos poucos cada uma dessas propriedades.

Como é feita uma conexão com um elemento?

A instância Vue ela precisa ser conectada com um elemento de sua escolha, para formar um relacionamento entre a instância e uma parte do DOM.

doom

To zuando não é esse Doom. É o (Document Object Model).

DOM — Document Object Model

Que é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web.

DOM (Document Object Model)

Em outras palavras, nós estamos ativando o Vue na div com o id app, colocando #app, como o elemento (el) da nossa instância.

el: ‘#app’

Resumindo você precisa fazer a conexão com algum elemento de sua página para que o Vue funcione.

Propriedade: data

Uma instância do Vue possui a propriedade datapara inserir os dados

Os dados da instância podem ser acessados dentro do elemento em que a instância está plugada.

Isso significa se você tentar usar a variável {{ meme }} fora da div#app no navegador ele não vai interpretar como um dado e vai exibir{{ meme }} no lugar de 'Dog'

Expressão {{ }}

Se nós queremos que algum dado seja mostrado no html, é preciso adicionar as chaves duplas entre o valor a ser exibido.

acertou miseravi

Termo importante: Expression

• Expressões permitem utilizar valores existentes de dados, em conjunto com lógica para produzir novos valores de dados.
• Quando o Vue visualiza a expressão {{ meme }}, ele reconhece que nós estamos referenciando aos dados de sua instância. Então ele substitui aquela expressão com o seu devido valor. No nosso caso o nome do meme que é: "Dog".

{{ meme }}

Expressões JavaScript— outros exemplos

expressions

• No primeiro caso você pode usar um operador condicional ternário, se a variável ok estiver com o valor true vai retornar SIM caso contrário NÃO
• No segundo exemplo está chamando o método toUpperCase() que vai retornar o valor da variável title convertida para maiúscula
• E no último vai realizar uma concatenação com o valor firstName com o lastName

Isso quer dizer que você pode utilizar expressões JavaScript.

Vamos entender agora mais um conceito importante do Vue.js a:

Reatividade

• A razão do Vue ser capaz de mostrar o valor dos dados imediantamente é porque o Vue é reativo.
• Em outras palavras, os dados da instância estão interligados a cada local em que o dado está sendo referenciado.

et bilu

Busquem conhecimento!!

Com isso finalizamos nossa primeira parte do Gerador de Memes. Além do mais, aprendemos algumas coisas.

1. A instância Vue — (O que aprendemos)

• Como começar a escrever uma aplicação Vue utilizando sua instância;
• Como exibir dados em uma página web;
• A instância Vue é a raiz de toda aplicação Vue;
• A instância Vue é conectada com um elemento do DOM;
• Os dados da instância Vue podem ser mostrados usando uma sintaxe de chaves duplas. Ex: {{ title }};
• Vue é reativo.

+respect

1º DESAFIO

Renomear a propriedade meme do objeto data para title, e alterar seu valor para: Meme Generator.

meme generator

Depois de completar o desafio continue no próximo post.

Próximo post

2. Ciclo de Vida da Instância Vue (Introdução ao Vue.js)

Referências

The Vue Instance - Vue.js