Mostrar código-fonte de Vue.js

{{Info/Software
| nome                     = Vue.js
| logotipo                 = Vue.js Logo 2.svg
| imagem                   = 
| desenvolvedor            = Evan You
| data_do_lançamento       = {{Data de lançamento|2014|02}}
| última_versão            = 3.5.12
| data_da_última_versão    = {{Data de lançamento|2024|10|11}}<ref>{{Citar web |url=https://github.com/vuejs/core/releases/latest |título=Release v3.5.12 · vuejs/core |website=github.com |língua=inglês |data=10 de outubro de 2024 |acessodata=29 de outubro de 2024}}</ref>
| plataforma               = [[:en:Web platform|Web]]
| linguagem                = [[TypeScript]]
| modelo                   = 
| idioma                   = 
| sistema_operacional      = 
| estado                   = 
| gênero                   = [[Framework para aplicações web]]
| licença                  = [[Licença MIT|MIT]]
| website                  = {{URL|https://vuejs.org}}
| repositório              = {{GitHub|vuejs/core|vuejs/core}}
}}
'''Vue.js''' (informalmente chamado de '''Vue'''; pronunciado {{AFI|{{IPAc-en|v|j|uː}}}}) é um [[Framework para aplicações web|framework]] [[JavaScript]] de [[Código aberto|código-aberto]], focado no desenvolvimento de [[Interface de usuário|interfaces de usuário]] e [[Aplicativo de página única|aplicativos de página única]].{{Refn|<ref>{{citar livro |último1=Macrae |primeiro1=Callum |título=Vue.js: Up and Running: Building Accessible and Performant Web Apps |data=2018 |publicado=[[O'Reilly Media]] |isbn=9781491997215 |url=https://books.google.com/books?id=bJpNDwAAQBAJ |língua=en}}</ref><ref>{{citar livro |último1=Nelson |primeiro1=Brett |título=Getting to Know Vue.js: Learn to Build Single Page Applications in Vue from Scratch |data=2018 |publicado=[[Apress]] |isbn=9781484237816 |url=https://books.google.com/books?id=mTpsDwAAQBAJ |língua=en}}</ref><ref>{{citar livro |último1=Yerburgh |primeiro1=Edd |título=Testing Vue.js Applications |data=2019 |publicado=[[Manning Publications]] |isbn=9781617295249 |url=https://books.google.com/books?id=7-FAtAEACAAJ |língua=en}}</ref><ref>{{citar livro |último1=Freeman |primeiro1=Adam |título=Pro Vue.js 2 |data=2018 |publicado=[[Apress]] |isbn=9781484238059 |url=https://books.google.com/books?id=HQFuDwAAQBAJ |língua=en}}</ref><ref>{{citar livro |último1=Franklin |primeiro1=Jack |último2=Wanyoike |primeiro2=Michael |último3=Bouchefra |primeiro3=Ahmed |último4=Silas |primeiro4=Kingsley |último5=Campbell |primeiro5=Chad A. |último6=Jacques |primeiro6=Nilson |último7=Omole |primeiro7=Olayinka |último8=Mulders |primeiro8=Michiel |título=Working with Vue.js |data=2019 |publicado=[[SitePoint]] |isbn=9781492071440 |url=https://books.google.com/books?id=OKScDwAAQBAJ |língua=en}}</ref><ref>{{Citar web|url = https://vuejs.org/v2/guide/#What-is-Vue-js |título = Introduction — Vue.js |acessodata=11 de março de 2017 |língua = en }}</ref>}}

== 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 Web|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 de software|bibliotecas]] e [[Pacote de software|pacotes]] de suporte mantidos oficialmente,<ref>{{Citar web|url=https://www.patreon.com/evanyou|titulo=Evan is creating Vue.js {{!}} Patreon|obra=Patreon|lingua=en}}</ref> sendo o [[ Nuxt.js |Nuxt.js]] como uma das soluções mais populares.

== História ==
O Vue foi criado pelo desenvolvedor independente [[Chineses|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?".<ref>{{Citar jornal|titulo=Between the Wires {{!}} Evan You|url=https://betweenthewires.org/2016/11/03/evan-you/|urlmorta=yes|jornal=Between the Wires|arquivodata=2017-06-03}}</ref> 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 ===
{| class="wikitable"
!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 Web|componentes]] Vue extendem [[Elemento HTML|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.<ref>{{Citar web|url=https://vuejs.org/v2/guide/components.html|titulo=Components — Vue.js|lingua=en}}</ref> O trecho de código abaixo contém um exemplo de um componente Vue:

<syntaxhighlight lang="HTML">
<script setup>
import { computed, ref } from 'vue'

const { start = 5 } = defineProps({ start: Number })
const count = ref(start)
const disabled = computed(() => count.value === 0)

function decrement() {
  if (count.value > 0) {
    count.value--
  }
}
</script>

<template>
  <div class="host">
    <span v-if="count === 0" class="label">Fim.</span>
    <span v-else-if="count === 1" class="label">Encerra no próximo clique!</span>
    <span v-else class="label">Encerra em {{ count }} cliques.</span>
    <button :disabled @click="decrement">Contar</button>
  </div>
</template>

<style scoped>
.host {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100vh;
}

.label {
  font: 1.125rem Noto, sans-serif;
}
</style>
</syntaxhighlight>

E o uso:

<syntaxhighlight lang="HTML">
<script setup>
  import Counter from './Counter.vue'
</script>

<template>
  <Counter :start="5" />
</template>
</syntaxhighlight>

=== Modelos ===
O Vue usa uma sintaxe de modelo baseada em [[HTML]] que permite vincular o [[Modelo de Objeto de Documentos|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 [[Análise sintática (computação)|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 [[React (JavaScript)|JSX]].<ref>{{Citar web|url=https://vuejs.org/v2/guide/syntax.html|titulo=Template Syntax — Vue.js|lingua=en}}</ref> As funções de renderização permitem que o aplicativo seja construído a partir de [[Engenharia de software baseada em componentes|componentes de software]].<ref>{{Citar web|url=https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#77d9|titulo=Vue 2.0 is Here!|obra=The Vue Point}}</ref>

=== 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.<ref>{{Citar web|url=https://vuejs.org/v2/guide/reactivity.html|titulo=Reactivity in Depth — Vue.js|lingua=en}}</ref>

=== Transições ===
O Vue permite diversas maneiras de aplicar efeitos de transição quando itens são inseridos, atualizados ou removidos do [[Modelo de Objeto de Documentos|DOM]]. Isso inclui ferramentas para:

* Aplicar automaticamente classes para transições e animações [[Cascading Style Sheets|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|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''.<ref>{{Citar web|url=https://vuejs.org/v2/guide/transitions.html|titulo=Transition Effects — Vue.js|lingua=en}}</ref><ref>{{Citar web|url=https://vuejs.org/v2/guide/transitioning-state.html|titulo=Transitioning State — Vue.js|lingua=en}}</ref>

=== Roteamento ===
Uma desvantagem tradicional dos [[Aplicativo de página única|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 [[roteador]]es 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 [[E-mail|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 [[Encaminhamento|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.<ref>{{Citar web|url=https://vuejs.org/v2/guide/routing.html|titulo=Routing — Vue.js|lingua=en}}</ref>

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

O código acima:

# Define uma rota de front-end em <code>websitename.com/user/<id></code> .
# 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: <code>$route.params.id</code>.
# 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 <code>websitename.com/user/1</code> será:

<syntaxhighlight lang="html">
<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>
</syntaxhighlight> <ref>{{Citar web|titulo=Vue Nested Routing (2)|url=https://router.vuejs.org/en/essentials/nested-routes.html|obra=Vue Home Page (subpage)}}</ref>

== 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 ==
{{Portal|Software livre}}

* [[Angular (framework)]]
* [[React (JavaScript)]]
* [[SolidJS]]
* [[Svelte]]

{{Referências}}

== Ligações externas ==
* {{Website oficial}}
* {{GitHub|vuejs/core|vuejs/core}}
* {{Link|en|https://play.vuejs.org/|Vue SFC Playground|Experimente Vue.js online}}

[[Categoria:Bibliotecas JavaScript]]
[[Categoria:Desenvolvimento web]]
[[Categoria:Frameworks de aplicações web]]
[[Categoria:Software usando a licença MIT]]