Que o Vue.js tem crescido cada vez mais no mercado todo mundo sabe, e que também ele pode ser uma ótima alternativa ao famoso React.js e/ou Angular também não é novidade pra quase ninguém.
Seu crescimento pode ser explicado em alguns pontos em relação aos principais concorrentes:
- Vue trabalha principalmente com o conceito de template diferentemente de React que está “preso” ao JSX e por vezes funções render. — é possível usar ambos também em Vue, apesar de pouco comum.
- Não é tão opinativo quanto Angular, sendo mais flexível, por muitas vezes mais leve e rápido também. Não sendo obrigatório conhecimento de outra tecnologia além do ES5 — o tradicional Javascript —, HTML e CSS; tendo em comum com Angular apenas os dois últimos.
- Qualquer HTML válido é um template Vue válido, o que facilita a migração de aplicações entre tecnologias, favorecendo também iniciantes e designers não especializados em outras tecnologias além do trio da web.
- Você pode até usar pré-processadores como o Pug (anteriormente conhecido como Jade) para criar seus templates Vue sem quase nenhuma configuração extra.
- Curva de aprendizado pequena, até mesmo comparado ao React
Ok, paremos por aqui.
Talvez esse início tenha sido um pouco tendencioso, mas prometo que vai ser tudo puro agora, ou se preferir, ao termino desse post vão ter links bem úteis que talvez confirmem o que digo.
Hello World em Vue3
Agora que já entendemos um pouco a sua popularidade e largo crescimento, vamos ver algo um pouco na prática.
Para isso usaremos uma CDN do Vue3 em unpk.
Passo a passo do que foi feito:
- Primeiro, fizemos um simples e clichê arquivo HTML5.
- Logo após definir o título da página, chamamos a CDN do Vue3
- Uma div com id igual à #app, onde nosso app será montado pelo Vue.
- Dentro de nossa div temos uma tag h1 com uma referência pra nossa variável message.
- No nosso próprio script chamamos a função createApp de dentro do nosso objeto Vue que nos foi dado pela chamada à CDN no
<head>. - Passamos um objeto contendo a função
setup(), que é quem seta nosso componente — Tudo em Vue é componente — Vue3. - Em seguida montamos chamando o método
mount()passando o id do contêiner.
Tudo bem explicado e entendido até agora? Ok, tente você mesmo e veja a magia acontecer.
Agora que entendemos um pouco de como funciona, vamos colocar um input que pega o que é digitado e ao mesmo tempo exibe fora do input.
Vai ficar tipo isso:
Além de tudo já conhecido, agora temos um atributo chamado v-model, que, de forma simplificada, insere um input listener e cada vez que o evento é disparado, altera o resultado armazenado na variável passada como valor da propriedade.
Na função setup() agora, temos uma constante chamada name que recebe Vue.ref(''). Essa função cria uma variável reativa — também chamadas de estado —, que, sempre que sofre alteração, renderiza novamente o componente dependente dela, no nosso caso, o elemento h1.
Legal, né? Sentindo quanta linha de Jquery isso economiza? Paremos com as brincadeiras de novo.
Vamos evoluir mais um passo e transformar o nosso simples h1 em um componente Vue que recebe uma prop e então vamos chamá-lo de Saudacao.
Oh, também nos aventuraremos pela propriedade template.
Limpamos o que tinha dentro de #app, e adicionamos o atributo template na linha 30 passando uma string semelhante a como faríamos no html; e com a primeira letra maiúscula, está nosso componente personalizado que tem atributo chamado meuNome, antecedido por ":".
Essa é uma forma “abreviada” de v-bind:prop. que simplificando, permite passar valores dinâmicos pra nossos componentes filhos — estados obviamente são dinâmicos.
Na linha 27 criamos um objeto onde registraremos os componentes que iremos usar dentro do nosso componente atual. Como vamos usar o componente com o mesmo nome, apenas jogaremos a variável do objeto de componente.
Na linha 11 temos de fato nosso componente Saudacao.
Na linha seguinte dizemos o nome da(s) prop(s) que esperamos.
Dessa vez esperamos realmente receber algo no nosso método setup(). Recebemos um argumento nomeando de props e o convertemos em uma variável reativa chamada meuNome.
toRef recebe como primeiro parâmetro um objeto, e no segundo parâmetro o item do objeto a ser observado.
Entendido até agora? Isso é ótimo!
Depois voltaremos a ver mais sobre tal tecnologia.