Vue.js

Vue.js
Vue.js
Desenvolvedor	Evan You
Plataforma	Web
Lançamento	Fevereiro de 2014; há 5 anos
Versão estável	2.6.10 / 20 de Março de 2019; há 5 meses
Gênero(s)	Framework JavaScript
Licença	MIT License
Estado do desenvolvimento	Ativo
Página oficial	vuejs.org

Vue.js (informalmente chamado de Vue; pronunciado/vjuː/) é um framework JavaScript de código aberto focado na construção de interfaces de usuário e aplicações de página única.

Vue.js (informalmente chamado Vue; pronunciado /vjuː/) é um framework JavaScript de código-aberto, focado no desenvolvimento de interfaces de usuário e aplicativos de página única.

Visão geral

O Vue.js conta com uma arquitetura que pode ser adotada de forma incremental, e que foca na renderização declarativa e na composição de componentes. Funcionalidades avançadas necessárias para aplicações complexas (como encaminhamento, gestão de estados e automação de compilação) são oferecidas por meio de bibliotecas e pacotes de suporte mantidos oficialmente , sendo o Nuxt.js como uma das soluções mais populares.

História

O Vue foi criado pelo desenvolvedor independente chinês Evan You, após trabalhar para o Google usando o AngularJS em vários projetos. Posteriormente, ele resumiu o pensamento por trás do processo de criação do Vue: "Pensei, e se eu pudesse retirar somente a parte que realmente gostava do Angular e criar algo muito leve?". O primeiro commit ao código-fonte do projeto data de julho de 2013, e o framework foi lançado oficialmente em fevereiro do ano seguinte, em 2014.

Versões

Version	Release date	Title
2.6	4 de fevereiro de 2019	Macross
2.5	13 de outubro de 2017	Level E
2.4	13 de julho de 2017	Kill la Kill
2.3	27 de abril de 2017	JoJo's Bizarre Adventure
2.2	26 de fevereiro de 2017	Initial D
2.1	22 de novembro de 2016	Hunter X Hunter
2.0	30 de setembro de 2016	Ghost in the Shell
1.0	27 de outubro de 2015	Evangelion
0.12	12 de junho de 2015	Dragon Ball
0.11	7 de novembro de 2014	Cowboy Bebop
0.10	23 de março de 2014	Blade Runner
0.9	25 de fevereiro de 2014	Animatrix
0.8	27 de janeiro de 2014	-
0.7	24 de dezembro de 2013	-
0.6	8 de dezembro de 2013	VueJS

Funcionalidades

Componentes

Os componentes Vue extendem elementos HTML básicos para encapsular código reutilizável. A um alto nível, os componentes são elementos personalizados aos quais o compilador do Vue associa determinados comportamentos. No Vue, um componente é essencialmente uma instância do Vue com opções predefinidas. O trecho de código abaixo contém um exemplo de um componente Vue. O componente apresenta um botão e simplesmente imprime o número de vezes que o botão é clicado:

<div id="tuto">
	<button-clicked v-bind:initial-count="0"></button-clicked>
</div>

<script>
Vue.component('button-clicked', {
  props: [ "initialCount" ],
  data: () => ({
    count: 0,
  }),
  template: `<button v-on:click="onClick">Clicked <nowiki>{{ count }}</nowiki> times</button>`,
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
    }
  },
  methods: {
    onClick() {
        this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

Modelos

O Vue usa uma sintaxe de modelo baseada em HTML que permite vincular o DOM renderizado aos dados contidos na instância subjacente do Vue. Todos os modelos do Vue são HTML válido, e podem ser interpretados por navegadores compatíveis e analisadores HTML. O Vue compila os modelos e transforma-os em funções de renderização do DOM virtual. O Modelo de Objeto de Documento (ou "DOM") virtual permite ao Vue renderizar componentes internamente antes de atualizar o navegador. Combinado com o sistema de reatividade, o Vue consegue calcular o número mínimo de componentes a serem re-renderizados, e manipular minimamente o DOM quando o estado do aplicativo é alterado.

Usuários do Vue podem usar a sintaxe de modelo ou optar por escrever diretamente funções de renderização usando JSX. As funções de renderização permitem que o aplicativo seja construído a partir de componentes de software.

Reatividade

O Vue possui um sistema de reatividade que utiliza objetos JavaScript simples e re-renderização otimizada. Cada componente controla suas próprias dependências reativas durante sua renderização, com o objetivo de que o sistema saiba exatamente quando e quais componentes renderizar novamente.

Transições

O Vue permite diversas maneiras de aplicar efeitos de transição quando itens são inseridos, atualizados ou removidos do DOM. Isso inclui ferramentas para:

• Aplicar automaticamente classes para transições e animações CSS
• Integrar bibliotecas de animação CSS de terceiros, como a Animate.css
• Utilizar JavaScript para manipular diretamente o DOM durante ganchos de transição
• Integrar bibliotecas de animação JavaScript de terceiros, como Velocity.js

Quando um elemento envolto em um componente de transição é inserido ou removido, o que acontece é:

1. O Vue detecta automaticamente se o elemento-alvo tem transições ou animações CSS aplicadas; caso em que as classes de transição CSS serão adicionadas ou removidas nos momentos apropriados.
2. Se o componente de transição fornecer ganchos JavaScript, esses ganchos serão chamados nos momentos apropriados.
3. Se nenhuma transição/animação CSS for detectada e nenhum gancho JavaScript for fornecido, as operações do DOM para inserção e/ou remoção serão executadas imediatamente no próximo frame.

Encaminhamento

Uma desvantagem tradicional dos aplicativos de página única (SPAs) é a incapacidade de compartilhar links para a "sub-página" exata em uma página da web específica. Como os SPAs atendem a seus usuários apenas uma resposta baseada em URL do servidor (normalmente retornando index.html ou index.vue), marcar determinadas telas ou compartilhar links para seções específicas é normalmente difícil, se não impossível. Para resolver esse problema, muitos roteadores do lado do cliente delimitam suas URLs dinâmicas com um hashbang (#!), por exemplo, page.com/#! /. Com o HTML5, no entanto, a maior parte dos navegadores modernos oferece suporte ao encaminhamento sem hashbangs.

O Vue oferece uma interface para alterar o que é exibido na página com base no caminho atual da URL—independentemente de como ela foi alterada (seja por link enviado por email, atualização da página ou links na própria página). Além disso, o uso de encaminhamento front-end permite a transição intencional do caminho do navegador quando certos eventos (por exemplo, cliques) ocorrem em botões ou links. O próprio Vue não vem com roteamento de hash front-end. Mas o pacote de código-aberto "vue-router" fornece uma API para atualizar a URL do aplicativo, suporta o botão voltar (histórico de navegação) e e-mail de redefinição de senha ou verificação de email com parâmetros de URL de autenticação. Suporta ainda o mapeamento de rotas aninhadas para componentes aninhados e oferece controle de transição preciso. Com o Vue, desenvolvedores já estão compondo aplicativos com pequenos blocos construindo componentes maiores. Com o vue-router adicionado à mistura, os componentes devem simplesmente ser mapeados para as rotas às quais pertencem, e as rotas parent/raiz devem indicar onde os "filhos" devem renderizar.

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const User = {
  template: '<div>User <nowiki>{{ $route.params.id }}</nowiki></div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
...
</script>

O código acima:

1. Define uma rota de front-end em websitename.com/user/<id> .
2. Que será renderizada no componente User definido em (const User. . . )
3. Permite que o componente User passe o ID específico do usuário digitado na URL usando a chave de parâmetros do objeto $route: $route.params.id.
4. Este modelo (variando de acordo com os parâmetros passados para o roteador) será renderizado em <router-view></router-view> dentro da div#app do DOM.
5. O HTML final gerado para alguém que digite websitename.com/user/1 será:

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

Ecossistema

A biblioteca principal vem com ferramentas e bibliotecas desenvolvidas pela equipe principal e por colaboradores.

Ferramentas Oficiais

• Devtools - extensão devtools do navegador para depuração de aplicativos Vue.js
• Vue CLI - Ferramentas padrão para desenvolvimento rápido com Vue.js
• Vue Loader - um loader webpack que permite a escrita de componentes Vue em um formato chamado SFC (Single-File Components)

Bibliotecas Oficiais

• Vue Router - O router oficial para o Vue.js
• Vuex - Gerenciamento centralizado de estado inspirado em fluxo para Vue.js
• Vue Server Renderer - Renderização server-side para Vue.js

Veja também

• React
• AngularJS
• Angular
• Framework JavaScript
• Biblioteca JavaScript
• Model – view – ViewModel

Fontes

Licenciado sob uma licença MIT. Declaração de licença : Guia Vue.js., Vue.js.

Links externos

• Página oficial