Logo do Vue.js
Vue.js/Reprodução

Atualizado em

O Vue.js é um dos frameworks JavaScript mais populares atualmente, com mais de 200 mil estrelas no GitHub e uma comunidade crescente de desenvolvedores em todo o mundo. Criado em 2014 pelo programador chinês Evan You, o Vue.js tem como objetivo facilitar a criação de interfaces de usuário reativas e dinâmicas para web apps e sites.

Características do Vue.js

Uma das características que mais chamam a atenção no Vue.js é sua simplicidade e facilidade de aprendizado, o que torna o framework uma boa escolha tanto para iniciantes quanto para desenvolvedores experientes. Além disso, o Vue.js tem uma sintaxe clara e concisa, o que ajuda na hora de escrever e manter o código.

Outra vantagem do Vue.js é sua flexibilidade. O framework pode ser utilizado de diversas formas, desde uma simples biblioteca para adicionar interatividade a uma página HTML até um sistema completo de single-page applications (SPAs). O Vue.js também é compatível com outras bibliotecas e frameworks, como o React e o Angular, o que aumenta ainda mais sua versatilidade.

Outra característica importante do Vue.js é sua capacidade de renderizar templates de forma rápida e eficiente. O framework utiliza uma técnica chamada Virtual DOM (DOM virtual), que permite atualizar apenas as partes da interface que foram alteradas, em vez de renderizar a página inteira a cada mudança. Isso faz com que as aplicações feitas com Vue.js sejam mais rápidas e responsivas.

Popularidade e adoção

O Vue.js vem conquistando cada vez mais adeptos nos últimos anos. Segundo a pesquisa State of JavaScript de 2020, o framework é o terceiro mais popular entre os desenvolvedores, atrás apenas do React e do Angular. A pesquisa também apontou que o Vue.js é o framework que mais tem evoluído nos últimos anos, com melhorias significativas em performance e facilidade de uso.

Outro dado interessante é que o Vue.js é particularmente popular em alguns países, como a China e o Japão. Na China, o framework é o mais utilizado pelos desenvolvedores, de acordo com o site de análise de dados Qubit. Já no Japão, o Vue.js é o segundo framework mais popular, atrás apenas do React, segundo a pesquisa do site de empregos Indeed.

Exemplos de uso

O Vue.js é utilizado por diversas empresas e projetos em todo o mundo. Algumas das marcas que adotaram o framework incluem Alibaba, Xiaomi, Wizz Air e GitLab. Além disso, o Vue.js é a base do painel de administração do Laravel, um popular framework PHP para desenvolvimento de aplicações web.

Um exemplo interessante de uso do Vue.js é o site da rede social chinesa WeChat. O site utiliza o framework para criar uma interface de usuário responsiva e dinâmica, com recursos como navegação por abas e filtragem de conteúdo. O resultado é uma experiência de usuário fluida e agradável.

Sintaxe

Aqui vai um exemplo simples de um componente Vue.js que exibe uma lista de tarefas.

Primeiro, vamos criar um arquivo HTML que contém a tag div onde o componente será renderizado:

<html>
  <head>
    <title>Exemplo Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Aqui, estamos incluindo o Vue.js como uma dependência usando um CDN (Content Delivery Network) e criando uma div com o id “app” que será usada para renderizar o nosso componente.

Agora, vamos criar o nosso componente em um arquivo JavaScript separado:

Vue.component('lista-tarefas', {
  data: function () {
    return {
      tarefas: [
        { texto: 'Fazer compras' },
        { texto: 'Pagar contas' },
        { texto: 'Estudar Vue.js' }
      ]
    }
  },
  template: `
    <ul>
      <li v-for="tarefa in tarefas"></li>
    </ul>
  `
})

Aqui, estamos registrando um novo componente Vue chamado “lista-tarefas”. O componente possui um objeto data que contém uma lista de tarefas. O template do componente usa a diretiva v-for para iterar sobre a lista de tarefas e exibi-las na tela.

Por fim, vamos instanciar o componente e renderizá-lo dentro da div com id “app”:

new Vue({
  el: '#app'
})

Aqui, estamos criando uma nova instância Vue e passando o seletor #app para indicar onde o componente será renderizado.

Ao abrir o arquivo HTML em um navegador, deveríamos ver a lista de tarefas renderizada na tela. Esse é um exemplo simples, mas mostra como o Vue.js pode ser usado para criar componentes reutilizáveis e fáceis de manter.