Vue.js
Vue.js | |
---|---|
![]() | |
Desenvolvedor | Evan You |
Plataforma | Web |
Lançamento | fevereiro de 2014; há 10 anos |
Versão estável | 3.4.27 (6 de maio de 2024; há 3 meses[1]) |
Escrito em | TypeScript |
Gênero(s) | Framework para aplicações web |
Licença | MIT |
Página oficial | vuejs |
Repositório | vuejs/core no GitHub |
Vue.js (informalmente chamado de Vue; pronunciado /vjuː/) é um framework JavaScript de código-aberto, focado no desenvolvimento de interfaces de usuário e aplicativos de página única.[8]
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,[9] 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?".[10] 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 |
---|---|---|
3.0 | 18 de setembro de 2020 | One Piece |
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.[11] O trecho de código abaixo contém um exemplo de um componente Vue:
<script setup> import { computed, ref } from 'vue' const props = defineProps({ start: { type: Number, default: 5 }, }) const count = ref(props.start) const isDisabled = computed(() => count.value === 0) function decrement() { if (count.value > 0) { count.value-- } } </script> <template> <div class="host"> <p v-if="count === 0">Fim.</p> <p v-else-if="count === 1">Encerra no próximo clique!</p> <p v-else>Encerra em {{ count }} cliques.</p> <button :disabled="isDisabled" @click="decrement">Contar</button> </div> </template> <style scoped> .host { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } p { font: 1.125rem Noto, sans-serif; } </style>
E o uso:
<script setup> import Counter from './Counter.vue' </script> <template> <Counter :start="5" /> </template>
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. Compilando os modelos, o Vue 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, 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.[12] As funções de renderização permitem que o aplicativo seja construído a partir de componentes de software.[13]
Reatividade
O sistema de reatividade do Vue 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.[14]
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 é:
- 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.
- Se o componente de transição fornecer ganchos JavaScript, esses ganchos serão chamados nos momentos apropriados.
- 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.[15][16]
Roteamento
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.[17]
<div id="app"> <router-view></router-view> </div> ... <script> ... const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ... </script>
O código acima:
- Define uma rota de front-end em
websitename.com/user/<id>
. - Que será renderizada no componente User definido em (const User. . . )
- 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
. - Este modelo (variando de acordo com os parâmetros passados para o roteador) será renderizado em dentro da div#app do DOM.
- O HTML final gerado para alguém que digite
websitename.com/user/1
será:
<div id="app"> <div> <div>User 1</div> </div> </div>
[18]
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
- Pinia - Gerenciamento de estado inspirado no Vuex, oficial do Vue 3.
Ver também
- Angular (framework)
- Lit
- React (JavaScript)
- Svelte
Referências
- ↑ «Release v3.4.27 · vuejs/core». github.com (em inglês). 6 de maio de 2024. Consultado em 12 de maio de 2024
- ↑ Macrae, Callum (2018). Vue.js: Up and Running: Building Accessible and Performant Web Apps (em inglês). [S.l.]: O'Reilly Media. ISBN 9781491997215
- ↑ Nelson, Brett (2018). Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch (em inglês). [S.l.]: Apress. ISBN 9781484237816
- ↑ Yerburgh, Edd (2019). Testing Vue.js Applications (em inglês). [S.l.]: Manning Publications. ISBN 9781617295249
- ↑ Freeman, Adam (2018). Pro Vue.js 2 (em inglês). [S.l.]: Apress. ISBN 9781484238059
- ↑ Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A.; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019). Working with Vue.js (em inglês). [S.l.]: SitePoint. ISBN 9781492071440
- ↑ «Introduction — Vue.js» (em inglês). Consultado em 11 de março de 2017
- ↑ [2][3][4][5][6][7]
- ↑ «Evan is creating Vue.js | Patreon». Patreon (em inglês)
- ↑ «Between the Wires | Evan You». Between the Wires [ligação inativa]
- ↑ «Components — Vue.js» (em inglês)
- ↑ «Template Syntax — Vue.js» (em inglês)
- ↑ «Vue 2.0 is Here!». The Vue Point
- ↑ «Reactivity in Depth — Vue.js» (em inglês)
- ↑ «Transition Effects — Vue.js» (em inglês)
- ↑ «Transitioning State — Vue.js» (em inglês)
- ↑ «Routing — Vue.js» (em inglês)
- ↑ «Vue Nested Routing (2)». Vue Home Page (subpage)