Bin U. Mastering Vue - Js. A Beginner's Guide 2023-Compactado

Machine Translated by Google
Dominando o Vue.js
Mastering Vue.js ajuda o leitor a dominar a estrutura JavaScript Vue.js para um desenvolvimento
front-end mais rápido e robusto.
Vue é um popular framework front-end JavaScript que está se expandindo rapidamente. É fácil
de usar, pequeno (menos de 24 KB) e muito rápido. É simples incluir em outros aplicativos e
bibliotecas. O Vue.js é fácil de instalar e os iniciantes podem aprender rapidamente como usá-
lo e começar a criar seu design de interface.
O que torna o Vue especial é que ele é diferente da maioria dos outros trabalhos e bibliotecas
de quadros JavaScript. Ao contrário de outras estruturas monolíticas, ela é construída desde o
início para ser adaptável de forma incremental. A biblioteca principal concentra-se principalmente
na camada View e é fácil de usar e combinar com outras bibliotecas ou projetos. Por outro lado,
quando mesclado com pilhas e bibliotecas contemporâneas, ele é perfeitamente capaz de
fornecer poderosos aplicativos da Web de página única.
Trabalhar com Vue.js pode ser divertido. Aproveitar o Vue e seus plug-ins pode ajudar a criar
facilmente excelentes aplicativos compatíveis com a Internet e smartphones. O Vue é
compacto e personalizável, e vem com vários recursos para gerenciamento de estado
inteligente e opções de navegação. Dito e feito, aprender Vue é uma excelente opção de
carreira, especialmente porque está ganhando popularidade rapidamente entre startups e empresas.
O Vue é uma excelente escolha se você deseja criar um aplicativo altamente envolvente,
flexível e baseado em dados. Tem um layout fácil de entender que você pode aprender em minutos.
Ao contrário do Angular ou do React, o Vue.js não tem muitos desafios ou conceitos para
dominar. É uma excelente escolha para programadores que buscam aprender uma nova
tecnologia para seu próximo projeto.
Com o Mastering Vue.js, aprender Vue torna-se muito simples, o que certamente ajudará os
leitores a progredir em suas carreiras.
A série Mastering Computer Science é editada por Sufyan bin Uzayr, um escritor e educador
com mais de uma década de experiência no campo da computação.
Dominar Ciência da Computação

Editor da série: Sufyan bin Uzayr
Dominando o Vue.js: um guia para

iniciantes Lokesh Pancha, Divya Sachdeva e Faruq KC
Dominando o GoLang: um guia para iniciantes

Divya Sachdeva, D Nikitenko e Aruqqa Khateib
Dominando o Ubuntu: um guia para iniciantes

Jaskiran Kaur, Rubina Salafey e Shahryar Raz
Dominando o código do Visual Studio: um guia para iniciantes

Jaskiran Kaur, D Nikitenko e Mathew Rooney
Dominando o NativeScript: um guia para iniciantes

Divya Sachdeva, D Nikitenko e Aruqqa Khateib
Dominando o GNOME: um guia para iniciantes

Jaskiran Kaur, Mathew Rooney e Reza Nafim
Para obter mais informações sobre esta série, visite: https://www.routledge.

com/Mastering-Computer-Science/book-series/MCS
A série de livros “Mastering Computer Science” é de autoria dos

membros da equipe Zeba Academy, liderada por Sufyan bin Uzayr.
A Zeba Academy é um empreendimento EdTech que desenvolve cursos e conteúdo
para alunos principalmente nas áreas STEM e oferece consultoria educacional para
universidades e instituições em todo o mundo. Para mais informações, visite https://
zeba.academy.
Mastering Vue.js
Guia para iniciantes
Editado por
Sufyan bin Ozar

Primeira edição publicada em 2023

pela CRC Press
6000 Broken Sound Parkway NW, Suite 300, Boca Raton, FL 33487-2742
e por CRC Imprensa

4 Park Square, Milton Park, Abingdon, Oxon, OX14 4RN
CRC Press é uma marca da Taylor & Francis Group, LLC
© 2023 Sufyan bin Ozar
Esforços razoáveis foram feitos para publicar dados e informações confiáveis, mas o autor e o editor não podem assumir a
responsabilidade pela validade de todos os materiais ou pelas consequências de seu uso.
Os autores e editores tentaram rastrear os detentores dos direitos autorais de todo o material reproduzido nesta publicação e
pedem desculpas aos detentores dos direitos autorais se a permissão para publicar neste formulário não foi obtida. Se algum
material protegido por direitos autorais não tiver sido reconhecido, por favor, escreva-nos e informe-nos para que possamos
corrigi-lo em qualquer reimpressão futura.
Exceto conforme permitido pela Lei de Direitos Autorais dos EUA, nenhuma parte deste livro pode ser reimpressa, reproduzida,
transmitida ou utilizada de qualquer forma por qualquer meio eletrônico, mecânico ou outro, agora conhecido ou futuramente
inventado, incluindo fotocópia, microfilmagem e gravação, ou em qualquer sistema de armazenamento ou recuperação de
informações, sem permissão por escrito dos editores.
Para obter permissão para fotocopiar ou usar material eletronicamente deste trabalho, acesse www.copyright.com ou contate o
Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. Para obras que não estão
disponíveis no CCC, entre em contato com mpkbookspermissions@tandf. co.uk
Aviso de marca comercial: nomes de produtos ou empresas podem ser marcas comerciais ou marcas registradas e são
usados apenas para identificação e explicação sem a intenção de infringir.
Dados de Catalogação na Publicação da Biblioteca do Congresso
Nomes: Bin Uzayr, Sufyan, editor.

Título: Mastering Vue.js: um guia para iniciantes / editado por Sufyan bin Uzayr.
Descrição: Primeira edição. | Boca Raton: CRC Press, 2023. | Série:
Dominando a ciência da computação | Inclui referências bibliográficas e índice.
Identificadores: LCCN 2022020968 (impressão) | LCCN 2022020969 (ebook) | ISBN
9781032315942 (capa dura) | ISBN 9781032315935 (brochura) | ISBN 9781003310464
(e-book)
Disciplinas: LCSH: Vue.js (Framework de Software) | JavaScript (linguagem de programa de
computador) | Aplicações Web - Desenvolvimento. | Aplicações Web – Programação. | Software aplicativo
- Desenvolvimento.
Classificação: LCC QA76.76.V84 M37 2023 (impressão) | LCC
QA76.76.V84 (ebook) | DDC 005.1/4--dc23/eng/20220812 Registro LC disponível
em https://lccn.loc.gov/2022020968 Registro do ebook LC disponível
em https://lccn.loc.gov/2022020969
ISBN: 9781032315942 (hbk)

ISBN: 9781032315935 (pbk)
ISBN: 9781003310464 (ebk)
DOI: 10.1201/9781003310464
Composto em Minion
por KnowledgeWorks Global Ltd.
Conteúdo
Prefácio, xv
Sobre o autor, xvii
Capítulo 1 ÿ Introdução ao Vue.js O 1

QUE É Vue.js? 1
VANTAGENS E DESVANTAGENS 8
Vantagens 8
Fácil de aprender 8
progressividade 9
Comunidade e suporte 9
Melhor dos Dois Mundos 9
Arquitetura Model-View-ViewModel (MVVM) 10
Leve 10
Acéfalo 10
Seja uma ferramenta 10
Senso comunitário 10
Dominante 10
Duas Caras 11
Dividir e conquistar 11
Ferramentas e bibliotecas 11
Requisitos de baixo armazenamento 12
Simplicidade 12
Documentação 12
Reatividade 12
Componentes e Reutilização 12
em
vi ÿ Conteúdo
Arquitetura Baseada em Componentes (CBA) 13
Flexibilidade 13
Tamanho minúsculo
14
Renderização e desempenho de DOM virtual 14
Ligação de dados bidirecional reativa 14
Componentes de arquivo único e legibilidade 15
Capacidades de Integração e Flexibilidade 15
Ecossistema de ferramentas sólidas 15
Fácil de aprender 16
Documentação Concisa 16
Suporte da comunidade 16
Desvantagens 16
Barreira de língua 16
Complexidade de reatividade 17
Falta de Apoio para Projetos de Grande Escala 17
Risco de excesso de flexibilidade 17
Recursos limitados 17
Falta de desenvolvedores experientes 18
Falta de Escalabilidade 18
Falta de plugins 18
Comunidade pequena 18
Pacote Pobreza 18
Mimado por opções 18
Falta de apoio financeiro para projetos de grande escala 19
BENEFÍCIOS SOBRE OUTROS JS FRAMEWORKS 19
Pequeno 19
Fácil de entender 19
Integração Simples 19
Flexibilidade 20
Comunicação de duas vias 20
ótimas ferramentas 20
Melhor dos Dois Mundos 21
CONCLUSÃO 21
Conteúdo ÿ vii
Capítulo 2 ÿ Noções básicas do Vue.js 23
JSXGenericName
23
Pré-requisitos 24
Configurar Vue para usar JSX 26
Usando JSX no Render 28
Importando componentes Vue JSX 28
Como fazer JSX funcionar com Typescript 28
CONFIGURAR 29
Adereços 30
Contexto 31
ACESSO ÀS PROPRIEDADES DOS COMPONENTES 32
Uso com modelos 32
Uso com funções de renderização 33
Uso deste 34
Primeiro Componente 34
Componentes em Visualização 34
Componente de arquivo único 37
ADEREÇOS 42
Prop Invólucro (camelCase vs. kebab-case) 42
Tipos de Prop 43
Passando Props Estáticos ou Dinâmicos 43
Passando um Número 44
Passando um Booleano 44
Passando um Array 44
Passando um Objeto 44
Passando as Propriedades de um Objeto 45
Fluxo de Dados 45
Unidirecional 46
Validação de 47
Prop Verificações de Tipo Não-Prop 48

viii ÿ Conteúdo
Usando atributos existentes para substituir/mesclar 49
Desativando a Herança de Atributo 49
ESTADO 50
Árvore de estado único 50
Obtendo o estado Vuex nos componentes Vue 51
O auxiliar mapState 52
Operador de Espalhamento de Objetos 53
Os componentes ainda podem ter estado local 53
MÉTODOS 53
CONCLUSÃO 57
Capítulo 3 ÿ Componentes Vue 59

CONDICIONAL 59
Renderização Condicional Vue.js 59
Qual é a diferença entre v-if e v-show? 64
Quando você deve utilizar cada um deles? 64
v-se 65
Grupos condicionais com v-if em <template> 65
v-senão 66
Controlando elementos reutilizáveis com a chave 66
v-show 68
v-if vs. v-mostrar 68
v-if com v-para v- 68
else-if 68
Concluindo 69
ESTILO 70
Estilização CSS de componentes Vue 70
Estilizando com arquivos CSS externos 70
Adicionando estilos globais a componentes de arquivo único 72
No Vue, adicione classes CSS 75
Adicionando estilos com escopo 76
Pré-requisitos 80
Conteúdo ÿ ix
Configure seu projeto Vue 81
Para estilizar no Vue, use a propriedade Scoped 81
Link com um arquivo CSS externo 82
Em Vue.js, Use Estilos Globais 84
Use Estilo Inline 85
Sintaxe de Objeto 85
Sintaxe de Array 87
COMPONENTES DE ESTILO 88
Benefícios de componentes estilizados em Vue.js 88
Crie seus componentes 88
Nenhuma política de 88
classes Design 88
simultâneo Uma enorme comunidade 88
Instalando componentes estilizados em Vue.js 88
Passando os adereços em componentes estilizados 91
Estilizando dinâmico com adereços em Vue.js 92
Aplicando o mesmo estilo a vários componentes Alterando o 94
componente exibido Estendendo estilos dinamicamente 94
94
CONCLUSÃO 95
Capítulo 4 ÿ Trabalhando com Imagens 97

IMPORTANDO IMAGENS 97
CONCLUSÃO 103
Capítulo 5 ÿ Roteamento no Vue 105

ROTEAMENTO 105
Começando 105
Configuração do roteador 108
Roteador-Link 111
Visão do roteador 112
Usando os parâmetros dentro dos roteadores 112
home.vue 116
x ÿ Conteúdo
detalhes.vue 116
detail.vue Componente A 117
Transição 118
App.vue 118
usando animação CSS3 119
Download direto do CDN 120
Adereços para o link do 123
roteador 124
anexar classe ativa 125
classe exata-ativa 125
Roteamento simples a partir do zero 126
ROTEADOR E PARÂMETROS DE CONSULTA 126
Obtenha parâmetros de consulta de uma URL 127
main.js 127
App.vue 128
views/Helloeveryone.vue 128
main.js 129
URLSearchParams 130
main.js 130
App.vue 131
components/Helloeveryone.vue 131
CONCLUSÃO 132
Capítulo 6 ÿ Navegação programática 133

NAVEGAÇÃO PROGRAMÁTICA 133
Rotas programáticas 133
router.push(localização, onComplete?, onAbort?) 133
router.replace(localização, onComplete?, onAbort?) 138
router.go(n) 138
router.push() 140
router.push() exemplo 140

Conteúdo ÿ xi
router.replace(localização, onComplete?, onAbort?) router.go(n) 142
142
CARREGAMENTO LENTO 143
O que é carregamento lento no Vue.js? 143
Por que o carregamento lento é significativo? 143
Exemplo de carregamento lento de 143
Vue.js Iniciando um projeto 144
Vue.js Eu estava adicionando manualmente uma 145
nova rota Como carregar componentes Vue.js 146
lentamente Removendo declarações 147
de importação Função 147
lazyLoad webpack Declaração de 147
importação Quais scripts você pode carregar lentamente? 148
Como adicionar importações 148
dinâmicas de 150
carregamento lento Componentes Vue de 152
carregamento lento Agrupando componentes no mesmo bloco 154
CONCLUSÃO 155
Capítulo 7 ÿ Conceitos avançados de API 157

API de CONTEXTO 157
A API de contexto substituirá o Redux? 157
Nota importante 158
Como faço para utilizar a API de contexto? 158
Aprenda como funciona a API de contexto do React e quando
utilizá-la para evitar o uso de prop-drilling em seu aplicativo

Por que API de 160
contexto? 160
API de contexto 163
criarContexto 163
Fornecedor 163
Consumidor 163
xii ÿ Conteúdo
useContext 164
API de contexto do React e fornecer/injetar no Vue Plugin/ 167
core/util/store-template.js Plugin/core/ 168
index.vue Plugin/ 168
components/nested-component.vue Usando a API 170
de contexto do React fornecer/ 172
injetar no Vue Use com 174
cuidado 175
Visibilidade completa nos aplicativos React de produção 176
Então, como acessamos as propriedades dos componentes? 178
context.attrs 178
context.slots 179
context.emit 181
CONCLUSÃO 182
Capítulo 8 ÿ Biblioteca de teste Vue 183

NOCK 183
Como funciona? 183
Por que executar solicitações HTTP simuladas durante o teste? 184
O que é Nock? 184
Adicionando 185
Nock Usando 185
'nock' Usando 186
'nock.back' Zombando 188
de Ações Zombando 191
de Getters Zombando com Módulos 193
Testando uma loja Vuex 195
Testando getters, mutações e ações separadamente Testando 195
uma loja em execução 196
VUE.JS-TESTING-LIBRARY 198
Teste de unidade 198
Introdução 198
Conteúdo ÿ xiii
Escolhendo sua estrutura 198
Excelente relatório de erros 198
Instalação 199
O que é a biblioteca de testes Vue? 201
Por que usar a biblioteca de testes Vue? 201
Como funciona a biblioteca de testes Vue 201
Introdução à biblioteca de testes Vue Quickstart 201
204
O problema 204
A solução 204
CONCLUSÃO 206
Capítulo 9 ÿ Formulários e Validação 207

BÁSICO DO FORMULÁRIO 207
Formulários de referência 208
Enviando um formulário 208
Acessando Campos de Formulário 210
Junte tudo: formulário de inscrição 211
Como funciona 214
A função showMessage() 214
A função hasValue() 216
A função validEmail() 216
O manipulador de eventos de envio 217
Resumo 218
VALIDAÇÃO DE FORMULÁRIO JAVASCRIPT 218
JavaScript tem a capacidade de validar entradas numéricas 219
Validação automática de formulário HTML 219
Data de validade 219
Validação de restrição de HTML 220
Atributos de entrada HTML de validação de restrição 220
Pseudo seletores CSS de validação de restrição 220
Uso básico 220

xiv ÿ Conteúdo
Opções dinâmicas renderizadas com v-for 223
Ligações de valor 224
Modificadores 225
225
.preguiçoso .número 225
.aparar 226
v-model com componentes 226
O básico 226
Lazy Updates 227
Casting Value as a Number Bind 227
to Expressions Opções 228
de seleção dinâmica Grupos 228
de opções Opções 229
de filtro Estático 230
Opção padrão Debounce 230
de entrada 230
Configurando nossos valores de 231
entrada de vinculação de aplicativo Vue.js com v-model 232
CONCLUSÃO 235
BIBLIOGRAFIA, 237
ÍNDICE, 243
Prefácio
A série Mastering Computer Science abrange uma ampla gama de tópicos, abrangendo
linguagens de programação, bem como estruturas e tecnologias modernas. A série tem
foco especial em conteúdos para iniciantes, e é apresentada de forma de fácil
compreensão, sendo composta por:
• Texto claro, abrangendo vários tópicos classificados por relevância,
• Um foco especial em exercícios práticos, com inúmeras amostras de código e

programas,
• Uma abordagem guiada para programação, com tutoriais passo a passo para
iniciantes,
• Grande ênfase na utilidade das habilidades no mundo real, eliminando assim

conceitos redundantes e raramente usados e focando no paradigma de
codificação predominante na indústria, e
• Uma ampla variedade de referências e recursos para ajudar desenvolvedores

iniciantes e intermediários a obter o máximo dos livros.
A série Mastering Computer Science começa com os conceitos básicos e, em seguida,

passa rapidamente para as práticas de codificação padrão do setor, para ajudar os
alunos a obter habilidades eficientes e cruciais no menor tempo possível. Os livros da
série não assumem nenhum conhecimento prévio de codificação, então mesmo os
programadores novatos absolutos podem se beneficiar deles.
A série Mastering Computer Science é editada por Sufyan bin Uzayr, um escritor e
educador com mais de uma década de experiência no campo da computação.
xv
Sobre o autor
Sufyan bin Uzayr é um escritor, programador e empresário com mais de uma

década de experiência na indústria. Ele é autor de vários livros no passado,
pertencentes a uma ampla gama de tópicos, variando de História a Computadores/TI.
Sufyan é o diretor da Parakozm, uma empresa multinacional de TI
especializada em soluções EdTech. Ele também dirige a Zeba Academy, uma
vertical de aprendizado e ensino online com foco nos campos STEM.
Sufyan é especialista em uma ampla variedade de tecnologias, como
JavaScript, Dart, WordPress, Drupal, Linux e Python. Ele possui vários diplomas,
incluindo os de Administração, TI, Literatura e Ciência Política.
Sufyan é um nômade digital, dividindo seu tempo entre quatro países. Ele
viveu e ensinou em universidades e instituições educacionais em todo o mundo.
Sufyan tem grande interesse em tecnologia, política, literatura, história e
esportes e, em seu tempo livre, gosta de ensinar programação e inglês para
jovens alunos.
Saiba mais em sufyanism.com.
xvii
Capítulo 1
Introdução ao Vue.js
NESTE CAPÍTULO
ÿ O que é Vue.js?
ÿ Vantagens e Desvantagens
ÿ Benefícios sobre outros frameworks JS
É difícil entender o que é Vue.js e seu uso no início deste capítulo. Vamos dar uma olhada
no que é Vue.js.
O QUE É Vue.js?
Evan, você projetou o Vue depois de trabalhar para o Google e utilizar o AngularJS em
vários aplicativos. “Penso, e se eu pudesse simplesmente isolar a parte que realmente
amo no Angular e desenvolver algo incrivelmente leve”, disse ele mais tarde. O primeiro
código-fonte enviado para o projeto foi em julho de 2013 e o Vue foi publicado em fevereiro
do ano seguinte.
Os nomes das versões são frequentemente retirados de mangá e anime, os principais
ity dos quais são ficção científica.
Vue.js é usado principalmente para criar interfaces web e aplicativos de uma página.
No entanto, as extensões HTML e a base JS trabalhando em combinação com uma
estrutura Electron também podem ser usadas para desenvolvimento de aplicativos para
desktop e dispositivos móveis, tornando-a uma ferramenta popular de front-end.
O Vue emprega a arquitetura clássica Model View Controller (MVC) para visualizar a
interface de usuário (UI) de um aplicativo ou site, com sua biblioteca principal servindo como
DOI: 10.1201/9781003310464-1 1
2 ÿ Dominando o Vue.js: um guia para iniciantes
a camada de exibição padrão. É adaptável porque pode trabalhar com Arquitetura

Baseada em Componentes (CBA), exatamente como o React.
Simplificando, é um produto que se concentra na perspectiva do usuário. A view é o
aspecto mais importante de tudo que acontece dentro do sistema, e toda informação só é
verificada se interagir adequadamente com as views. Criar uma única visualização é
simples, e é aqui que reside o maior benefício e motivação para usar o Vue.js – em sua
simplicidade e baixa barreira de entrada. Basta carregar a interface e adicionar JavaScript
para começar.
Os dados são fornecidos diretamente para a visualização usando uma sintaxe simples,
onde o Vue.js desenha os elementos sem script – uma instância que o sistema pode
utilizar para a renderização do elemento.
A ferramenta permite a alteração de seções do código, mantendo as informações no
objeto de dados e afetando outras partes relacionadas em tempo real
tempo.
O Vue.js é anunciado como uma “estrutura progressiva para projetar interfaces de

usuário”. A arquitetura dessa estrutura deve ser gradualmente personalizada, o que a
distingue de outras estruturas de desenvolvimento da Web em JavaScript. A estrutura é
popular entre os ProCoders devido ao seu design leve, tornando extremamente fácil criar
aplicativos rapidamente.
Evan, você construiu o Vue.js enquanto trabalhava como tecnólogo criativo no Google.
O Vue.js, por exemplo, usa o Virtual Document Object Model (DOM) da mesma maneira
que o React, mas usa gerenciamento de dependência automatizado para determinar
quais componentes são renderizados novamente quando o estado muda.
No entanto, visa corrigir os problemas que existiam com Angular e React. Claro, o
Vue.js tem vantagens e desvantagens, mas as últimas superam as primeiras. É de código
aberto e apoiado por doações de patrocinadores e parceiros como Vehikl, Modus Create,
Rangle, Laravel, StoreKit, DevExpress, etc.
Por causa dessa abordagem aberta, a estrutura ganhou popularidade entre os

desenvolvedores e, apesar de ser um projeto independente, sua funcionalidade, suporte
e aceitação rivalizam com os do React do Facebook e do Angular do Google.
No GitHub, o Vue.js atualmente tem quase 200.000 estrelas (186k, em comparação

com 171k do React e 74,7k do Angular), indicando o nível de interesse que os
desenvolvedores encontraram no framework. Desde que a versão inicial foi lançada em
2014 (sete anos atrás), ela cresceu e se tornou uma estrutura crítica de desenvolvimento
web front-end, alimentando milhões de sites em todo o mundo.
Introdução ao Vue.js ÿ 3
O Vue.js é conveniente porque é personalizável e leve, mas isso não diminui seu
potencial, comparável ao de trabalhos de estrutura mais volumosos, como React e
Angular. Qualquer pessoa com conhecimento prévio em programação de front-end deve
ser capaz de aprender em questão de dias.
Basta ter um entendimento básico das “três grandes” tecnologias de desenvolvimento
da Web: JavaScript, HTML e CSS. Outros frameworks, como Angular e React, precisam
que você aprenda outras linguagens para utilizá-los com sucesso; no caso do Angular,
você deve aprender TypeScript, enquanto o Vue.js não.
O quadro é precisamente caracterizado como progressivo, o que indica que pode

ser usado lentamente; gradualmente adiciona marcação extra ao código HTML. Como
resultado, ele se ajusta às demandas do desenvolvedor em vez de forçá-lo a atualizar
um programa existente ou estabelecer um servidor.
O Vue.js pode ser adicionado ao seu código HTML como um elemento de script
básico e se expande gradualmente para atender às suas demandas, eventualmente
gerenciando toda a camada. É por isso que é conhecido como o “novo jQuery” em certos
lugares. Este é um dos maiores benefícios do uso do Vue.js, particularmente ao fazer a
transição de outro framework.
O Google oferece suporte ao Angular e o Facebook oferece suporte ao React, mas o
Vue.js é totalmente patrocinado pela comunidade de código aberto, contando com
contribuições de desenvolvedores locais e dinheiro de patrocinadores para progredir.
No entanto, o último envergonhou o Angular e o React como o framework de
desenvolvimento web favorito.
Os desenvolvedores se beneficiam do suporte excelente e oportuno do Vue.js. A
maioria das consultas da plataforma oficial é resolvida em poucas horas, e o mesmo vale
para os problemas do GitHub.
Vue (pronuncia-se /vju/, como view) é uma estrutura para IUs progressivas.
Ao contrário de outras estruturas monolíticas, o Vue foi projetado desde o início para ser
adotado de forma incremental. A biblioteca principal é restrita à camada de exibição e é
fácil de integrar com outras bibliotecas ou aplicativos existentes.
Por outro lado, o Vue é totalmente capaz de alimentar aplicativos de página única
(SPAs) complicados quando integrado a tecnologias modernas e bibliotecas associadas.
1. Vue.js emprega colchetes duplos {{ }} como espaços reservados para dados.
2. As diretivas Vue.js são propriedades HTML que começam com a letra v-.
3. Vue.js permite estender HTML com propriedades HTML conhecidas como

diretivas.
4. Aplicativos HTML podem se beneficiar dos recursos fornecidos pelas diretivas

Vue.js.
5. O Vue.js possui diretivas integradas e definidas pelo usuário.
O Vue.js tem um design gradualmente flexível e se concentra na renderização

declarativa e na composição de componentes. A biblioteca principal se concentra
apenas na camada de exibição. Bibliotecas e pacotes de suporte mantidos oficialmente
fornecem funcionalidade avançada necessária para aplicativos complicados, como
roteamento, gerenciamento de estado e ferramentas de construção. O Vue.js permite
que você aprimore o HTML por meio de elementos HTML conhecidos como diretivas.
As diretivas fornecem funcionalidade para aplicativos HTML e podem ser incorporadas
ou definidas pelo usuário.
Os componentes Vue são elementos HTML que aumentam os elementos HTML
básicos para conter funcionalidade reutilizável. Em um nível proeminente, os
componentes são elementos personalizados aos quais o compilador Vue atribui
funcionalidade. Um componente no Vue é apenas um objeto Vue com configurações
predefinidas. Um componente Vue é demonstrado no exemplo de código abaixo. O
componente exibe um botão e imprime o número de vezes que foi clicado:
<modelo>
<div id="tuto">
<button-clicked v-bind:initial-count="0"> </buttonclicked>
</div> </template>
<script>
Vue.component('button-clicked', { props:
['initialCount'], data: () => ({ count:
0, }), template:
'<button v-
on:click="onClick ">Clicado {{ count }} vezes</button>', calculado:

{ countTimesTwo() { return this.count *
2;
} }, assista:
{ count(newValue, oldValue) {
console.log('O valor da contagem foi alterado de

${oldValue} para ${newValue}.');
} }, métodos:
{ onClick()
{ this.count += 1;
} }, montado()
{ this.count = this.initialCount;
} });
new Vue({ el:

'#this', }); </script>
O Vue usa uma sintaxe de modelo baseada em HTML que permite que o DOM visível seja
conectado aos dados subjacentes da instância do Vue. Todos os modelos Vue são HTML válidos
que podem ser processados por navegadores e analisadores de HTML que suportam o padrão.
Os modelos são compilados em métodos de renderização Virtual DOM pelo Vue. O Vue usa um
Virtual DOM para renderizar componentes na memória antes de atualizar o navegador. Quando
usado com o sistema de reatividade, o Vue pode identificar o menor número de componentes para
renderizar novamente e o menor número de operações DOM quando o estado do aplicativo muda.
Os usuários do Vue podem utilizar a sintaxe do modelo ou criar funções de renderização

diretamente no hiperscript usando chamadas de função ou extensão de sintaxe JavaScript (JSX).
As funções de renderização permitem a criação de aplicativos a partir de componentes de software.
O Vue tem um mecanismo de reatividade que faz uso de objetos JavaScript simples e re-
renderização eficiente. Durante a renderização, cada componente acompanha suas dependências
reativas para que o sistema entenda quando e quais componentes renderizar novamente.
Vue.js é mais usado para criar interfaces web e aplicativos de uma página. No entanto, devido
às extensões HTML e à base JS trabalhando em combinação com uma estrutura Electron, ela
também pode ser usada para desenvolvimento de aplicativos para desktop e dispositivos móveis,
tornando-a uma ferramenta popular de front-end.
Embora o JavaScript seja uma linguagem completa por si só, seu ecossistema inclui muito
mais do que a própria linguagem. Os frameworks, por exemplo, facilitam a vida de um
desenvolvedor ao estabelecer as bases para uma linguagem mais fluida.
desenvolvimento. Se a linguagem for o alfabeto, a estrutura é o livro de frases, permitindo

que o desenvolvedor forme frases e se comunique.
Quando os recursos são inseridos, alterados ou excluídos do DOM, o Vue fornece várias
opções para aplicar efeitos de transição. Isso cobre recursos para:
• Aplicar classes a transições e animações CSS automaticamente.
• Bibliotecas de animação CSS de terceiros, como Animate.css, devem ser

usado.
• Durante os ganchos de transição, use JavaScript para alterar diretamente o DOM.
• Integre bibliotecas de animação JavaScript de terceiros, como

Velocity.js.
Isso é o que ocorre quando um elemento envolvido em um componente de transição é

introduzido ou removido:
1. O Vue detectará se o elemento de destino está usando transições ou animações CSS.

Se isso ocorrer, as classes de transição CSS serão adicionadas/removidas nos
momentos apropriados.
2. Se o componente de transição incluir ganchos de JavaScript, eles serão invocados nos

momentos apropriados.
3. Se nenhuma transição ou animação CSS for detectada e nenhum gancho JavaScript

for fornecido, as operações de inserção e/ou remoção de DOM serão feitas no próximo
quadro.
A incapacidade de trocar links para a “sub” página específica dentro de uma determinada
página da web tem sido tradicionalmente uma limitação dos SPAs. Como os SPAs fornecem
apenas uma resposta baseada em URL do servidor (index.html ou index.vue), marcar certas
telas ou compartilhar links para partes específicas é difícil, se não impossível. Para resolver
esse problema, vários roteadores do lado do cliente delimitam URLs dinâmicos usando um
“hashbang” (#! ), por exemplo, page.com/#!/.
No entanto, os navegadores mais recentes permitem o roteamento HTML5 sem hashbangs.
O Vue fornece uma interface para modificar o que é exibido na página com base no
caminho da URL atual, independentemente de como foi alterado (seja por link enviado por e-
mail, atualização ou links na página). Além disso, a utilização de um roteador front-end
permite a mudança proposital do caminho do navegador quando ocorrem eventos do
navegador (como cliques em botões ou links). O Vue não inclui roteamento de hash de front-
end. O pacote “vue-router” de código aberto, por outro lado, inclui uma API para atualizar a
URL do aplicativo, um back
botão (para explorar o histórico) e redefinições de senha de e-mail ou links de verificação

de e-mail com parâmetros de URL de autenticação. Ele permite que você mapeie rotas
aninhadas para componentes aninhados e tenha um controle de transição refinado. Os
desenvolvedores já estão construindo aplicativos usando Vue usando blocos de construção
simples para construir componentes maiores. Com o vue-router, os componentes devem
simplesmente ser mapeados para as rotas às quais pertencem, e as rotas pai/raiz devem
indicar onde os filhos devem ser renderizados.
<div id="aplicativo">
<router-view></router-view> </div>
...
<script>
...
const User =
{ template: '<div>User {{ $route.params.id }}</div>' };
roteador const = new VueRouter({

rotas: [ { path:
'/user/:id', componente: User }
] });
...
</script>
O código é o seguinte:
• Estabelece uma rota de front-end em websitename.com/user/id>.
• O que resultará na renderização do componente User descrito

em (usuário const…).
• Permite que o componente User passe o id do usuário que foi colocado na URL
usando o campo params do objeto $route: $route. params.id.
• Este modelo será renderizado em router-view>/router-view> dentro do div#app do

DOM (dependendo dos parâmetros fornecidos no roteador).
• O HTML final criado para alguém que digita: websitename.com/user/1 será:
<div id="app"> <div>
<div>Usuário 1</div> </

div> </
div>
A biblioteca principal inclui ferramentas e bibliotecas criadas e fornecidas pela equipe

principal. Vus.js fez uso de várias ferramentas e bibliotecas oficiais.
Estes são os seguintes:
• Devtools: aplicativos Vue.js podem ser depurados usando um navegador devtools

plugar
• Vue CLI: Padronização das ferramentas de desenvolvimento Vue.js
• Vue Loader: Um carregador de webpack que facilita a criação de componentes Vue

no formato Single-File Components (SFCs)
• Vue Router: O roteador Vue.js oficial
• Vuex: gerenciamento de estado centralizado do Vue.js inspirado no Flux
• Vue Server Renderer: Vue.js Server-Side Rendering
A seguir estão algumas das vantagens e desvantagens de usar o Vue.js.
VANTAGENS E DESVANTAGENS
Vamos começar com as vantagens de utilizar o Vue.js.
Vantagens
Fácil de
aprender O Vue.js é avançado entre os desenvolvedores porque é personalizável e leve,
mas isso não diminui seu potencial, que é comparável ao de estruturas mais volumosas,
como React e Angular. Qualquer pessoa com conhecimento prévio em programação front-
end deve ser capaz de fazer isso em questão de dias.
Basta ter um entendimento básico das “três grandes” tecnologias de desenvolvimento

web: JavaScript, HTML e CSS. Outros quadros, como
Angular e React, precisam que você aprenda outras linguagens para utilizá-las com
sucesso; no caso do Angular, você deve aprender TypeScript, enquanto o Vue.js não.
Progressividade
O quadro é precisamente caracterizado como progressivo, o que indica que pode ser
usado lentamente; gradualmente adiciona marcação extra ao código HTML. Como
resultado, ele se ajusta às demandas do desenvolvedor em vez de forçá-lo a atualizar
um programa existente ou estabelecer um servidor.
O Vue.js pode ser colocado em seu código HTML como um elemento de script
básico e se expande gradualmente para atender às suas demandas, eventualmente
gerenciando toda a camada. É por isso que é conhecido como o “novo jQuery” em
certos lugares. Este é um dos maiores benefícios do uso do Vue.js, particularmente
ao fazer a transição de outro framework.
Comunidade e suporte
Angular é suportado pelo Google, React pelo Facebook, mas Vue.js é totalmente
suportado pela comunidade de código aberto, contando com contribuições de
desenvolvedores locais e doações de patrocinadores para seguir em frente.
No entanto, o último conseguiu desafiar severamente o Angular e o React como o
framework de desenvolvimento web preferido.
É por isso que é referido como “novo jQuery” em certos lugares. Este é um dos
maiores benefícios do uso do Vue.js, particularmente ao fazer a transição de outro
framework. Quando se trata de atualização de conteúdo e manuais de ajuda, a
plataforma também obedece a ciclos de lançamento previsíveis.
O melhor dos dois
mundos Outro benefício do Vue.js é que, por ser influenciado por Angular e React, ele
aprende e combina todos os melhores recursos de cada um enquanto remove os que
não são ideais. O Vue.js, por exemplo, usa o Virtual DOM de forma semelhante ao
React, mas emprega gerenciamento de dependência automatizado para identificar
quais componentes devem ser renderizados novamente quando o estado muda.
Isso não acontece por padrão no React, e você deve aplicar explicitamente a função
ComponentUpdate a cada componente. O Vue.js também usa algum vocabulário de
modelagem semelhante ao Angular, mas sem exigir que os desenvolvedores aprendam
uma nova linguagem (TypeScript). Este ainda é um argumento convincente para
contratar desenvolvedores Vue.js.
Arquitetura Model-View-ViewModel (MVVM) Sem

explicar sua arquitetura, qualquer explicação dos benefícios do Vue estaria
incompleta. O conceito MVVM em Vue.js é útil para melhorar a experiência de
interface do usuário. O MVVM simplifica a programação de IU orientada a
eventos. Isso melhora o desempenho geral do sistema.
Qualquer discussão sobre as vantagens do Vue seria incompleta sem considerar sua
arquitetura. O conceito MVVM no Vue.js é útil para melhorar a experiência da interface do
usuário. O MVVM simplifica a programação de IU orientada a eventos. Isso melhora o
desempenho geral do sistema.
O Lightweight
Vue.js é um framework pequeno, hilariante. São apenas 18 kilobytes – piscar é
mais rápido do que baixar.
Acéfalo
O Vue.js é extremamente simples de aprender e, devido a esse recurso, tem sido o principal
impulsionador de sua popularidade e uso crescente entre os programadores.
Para começar a escrever com Vue, você não precisa de conhecimento especializado em
bibliotecas, JSX ou TypeScript, como em Angular ou React. Tudo o que é necessário é um
conhecimento básico de HTML, CSS e JavaScript.
Seja uma ferramenta
O Vue.js coletou uma coleção abrangente de ferramentas para testes de unidade e de

ponta a ponta, bem como um mecanismo de instalação de plug-in, seis anos após seu
primeiro lançamento. Quando você considera que o Vue.js inclui suas próprias ferramentas
de depuração de navegador, renderizador de servidor e gerenciador de estado, você está
bem equipado e no caminho certo para projetar um front-end.
Senso de comunidade
A comunidade Vue.js online é nada menos que incrível. A estrutura de
financiamento coletivo da plataforma, bem como o fato de não ser suportada
por um Facebook ou Google empresarial, rendeu ao Vue um culto de
seguidores. Como resultado, existem várias instruções para ajudá-lo, bem como
grupos Reddit e Discord extremamente movimentados, onde algum Harry útil
poderá responder corretamente às suas perguntas.
Dominante
Conforme declarado anteriormente, um DOM é uma representação de objeto vinculado de
páginas HTML que compreende estilos, elementos e conteúdo da página. Isso resulta em um
árvore genealógica invertida, com o documento se ramificando em seus vários componentes, ligados
por linhas que mostram os relacionamentos.
O navegador deve atualizar as informações e apresentá-las na tela do usuário quando os objetos
alteram seu estado à medida que o usuário interage com a página da Web baseada em HTML. Essa
é uma abordagem demorada e ineficiente, pois a página inteira deve ser atualizada, mesmo que
apenas um objeto seja alterado. Vue. js faz uma duplicata virtual do DOM original e determina quais
elementos precisam ser atualizados sem renderizar novamente o DOM completo, aumentando
significativamente a eficiência e a velocidade do aplicativo.
A ligação de
dados bidirecional do Two Faced Angular foi passada para o Vue.js. Este link conecta as alterações de
dados do modelo à exibição da interface do usuário. Isso simplifica o processo de atualização dos
componentes conectados e o rastreamento dos dados que são atualizados.
No Vue.js, os dados vinculados são atualizados em tempo real à medida que os objetos DOM
mudam e essa capacidade de resposta torna a atualização de dados mais sucinta e muito mais fácil.
Dividir e conquistar Cada
componente de uma página da web ou aplicativo é expresso como um elemento encapsulado da

interface do usuário no Vue.js. Estes podem ser escritos em HTML, CSS e JavaScript sem a
necessidade de arquivos separados.
Essas seções de código podem ser usadas como modelos para outras partes do sistema.
Por serem salvos em arquivos distintos, o layout é extremamente simples de ler e compreender –
facilitando o gerenciamento e a correção. O teste pode determinar como até mesmo os menores
componentes do programa funcionam por conta própria.
O Vue.js pode interagir com qualquer aplicativo existente devido à sua versatilidade. É baseado
em JavaScript e não requer nenhuma outra ferramenta para funcionar.
Mudar de React ou Angular para Vue.js não oferece problemas porque o Vue é um mashup dos dois e
pode se comunicar com o Model View Controller e o CBA.
Ferramentas e bibliotecas
• CLI oficial do Vue.js: as principais bibliotecas do Vue e plug-ins de terceiros devem ser
desenvolvidos e instalados.
• Ferramentas de desenvolvimento: para solucionar problemas de aplicativos baseados em Vue.js.

• Vue Loader: carregador de pacotes da Web.
• Vue Router: Componentes de Mapeamento e Roteamento.
Baixos requisitos de armazenamento

O Vue, sendo um programa leve (o tamanho do zip baixado é de apenas 18 KB), não apenas
permite um download rápido, mas também melhora seu SEO e UX ao empregar o Virtual DOM.
Como resultado, oferece uma grande vantagem sobre rivais como React e
Angular em termos de seu parâmetro de alta velocidade.
Simplicidade
A sintaxe do Vue.js não é apenas simples e fácil de aprender, mas os desenvolvedores que já
lidaram com JavaScript também podem aprendê-la rapidamente. Sua estrutura é intuitiva e seus
componentes, que são efetivamente uma fusão de recursos HTML e JavaScript, são simples de
instalar.
Sua simplicidade ajuda os desenvolvedores que desejam melhorar a taxa de síntese do
modelo de string enquanto diminuem os erros de código. Também pode ser ativado com uma única
tag de script.
Documentação
Além de sua sintaxe concisa, o framework Vue.js é extremamente amigável. O Vue.js é muito bem
documentado – os cursos de vídeo de documentação e a excelente biblioteca principal, que se
concentra na camada de exibição, facilitam a compreensão e a implementação dos princípios.
Com a ajuda do Vue.js DOM, qualquer pessoa com um conhecimento básico de

HTML e JavaScript podem facilmente criar aplicativos.
Reatividade
Uma das características que distinguem o Vue.js de outros frameworks é seu mecanismo de
reatividade. Sua interação com HTML e JavaScript simplifica a vinculação de dados entre essas
estruturas no Vue.js.
O Vue.js também é mais do que capaz de lidar com uma operação de vinculação de dados
reativa bidirecional, tornando-o uma excelente escolha para um projeto da Web que exige alterações
em tempo real.
Componentes e Reutilização Outro

aspecto que torna o Vue.js atraente é a simplicidade com que seu código pode ser reutilizado.
Partes interativas menores do código de um programa,
como seus componentes e exibições, podem ser facilmente mesclados em um aplicativo

existente.
O uso do Vue.js não tem efeitos negativos na infraestrutura atual.
Devido a esta capacidade, é uma ferramenta ideal para incorporar vários componentes
reativos em um modelo existente.
Além disso, o gerenciamento de estado entre os componentes pode ser vinculado por
meio de um gerenciador de estado conhecido como Vuex. Recursos como Vue-Router e
Views tornam incrivelmente simples criar aplicativos de página única.
Arquitetura Baseada em Componentes (CBA)

Os componentes Vue são seções incluídas na interface do seu aplicativo que podem ser
escritas em HTML, CSS ou JavaScript sem a necessidade de arquivos separados.
Existem várias vantagens em usar essa abordagem arquitetônica e sistema de
componentes:
• Legibilidade do código: Como os componentes do Vue são mantidos

independentemente em arquivos distintos, você pode acessar facilmente uma área
específica do código e corrigi-la se houver algum erro.
• Bom para teste de unidade: A presença de componentes simplifica o teste de

unidade. Seu objetivo é compreender como os menores componentes do aplicativo
funcionam por conta própria.
Flexibilidade
O JavaScript há muito é reconhecido por sua adaptabilidade; é uma estrutura considerada
uma das linguagens de programação mais adaptáveis.
No entanto, com a evolução do front-end do Vue, essa versatilidade agora atingiu novos
patamares. Isso foi permitido, pois requer principalmente Java-Script e nenhum outro plug-
in.
As opções para gerar componentes são ilimitadas; não existe um método “correto”
para realizar as coisas. Os modelos no Vue podem ser escritos em HTML, JavaScript ou
até JSX. A estrutura baseada em componentes e o código leve do Vue facilitam a
integração em qualquer projeto.
Os desenvolvedores familiarizados com as estruturas React ou Angular terão poucos
problemas para migrar para o Vue. É efetivamente um híbrido das características de
ambos os frameworks. Como resultado, usando o Vue, você pode desenvolver seu
aplicativo usando qualquer técnica e estrutura que achar adequada.
Tamanho
minúsculo Este ponto será tão pequeno quanto o próprio Vue: o pacote zip do framework
tem apenas 18 KB de tamanho. Como uma estrutura leve, ele não apenas baixa e instala
rapidamente a biblioteca, mas também aprimora seu SEO e UX.
Renderização e desempenho de DOM virtual Ao

renderizar páginas da Web, você certamente encontrará um DOM.
O DOM é uma representação orientada a objeto de páginas HTML que contém estilos,
elementos e conteúdo da página. Quando uma página é carregada, um navegador gera
os itens armazenados em uma estrutura de árvore.
Quando um usuário interage com um site, os estados dos objetos mudam, exigindo
que um navegador atualize as informações e as apresente na tela.
No entanto, atualizar todo o DOM é demorado. O Vue.js emprega o Virtual DOM em
benefício da velocidade: considere isso uma duplicata de um DOM original que determina
quais itens atualizar sem redesenhar todo o DOM. Esse método acelera a renderização
da página e aumenta o desempenho do aplicativo.
Um dos principais aspectos que podem influenciar a seleção da estrutura é o

desempenho. A página de comparação Vue inclui benchmarks reais. Vue. js, por exemplo,
parece ter mais desempenho do que Angular e React ao testar componentes DOM
vinculados a dados atualizados. Claro, está longe de ser o primeiro lugar onde Vanilla.js
está aninhado, e o benchmark inclui versões mais antigas de frameworks, então tenha
isso em mente. No entanto, o quadro geral é positivo.
Lembre-se de que cada teste de desempenho é específico para cada caso: na prática,
a maior parte do desempenho é derivada da otimização e qualidade do código.
Vinculação de dados bidirecional reativa

Outro benefício na manipulação do DOM que o Vue recebeu do Angular é uma vinculação
de dados bidirecional. As atualizações de dados de modelo e os dados de exibição são
vinculados por meio da vinculação de dados bidirecional. Os dados são armazenados em
componentes vinculados, que podem ser atualizados regularmente. É mais fácil atualizar os
componentes conectados e acompanhar as atualizações de dados com o auxílio da
vinculação de dados bidirecional.
Os dados vinculados do Vue e os objetos DOM são atualizados de forma reativa,
tornando-o excelente para qualquer aplicativo que exija modificações em tempo real. A
capacidade de resposta do Vue tornará a atualização de dados mais clara e fácil de
realizar para os desenvolvedores. Existem várias restrições que devem ser atendidas
para que a reatividade funcione, as quais abordaremos na seção contras.
Componentes de arquivo único e legibilidade

Cada componente de seu futuro aplicativo/página da Web é considerado um
componente no Vue. Componentes são partes fechadas de sua interface.
Os componentes do Vue.js podem ser escritos em HTML, CSS e JavaScript sem serem
divididos em arquivos distintos.
Dividir o código do aplicativo é uma estratégia de arquitetura CBA que também é usada
em Angular e React. Há várias vantagens em usar essa abordagem de arquitetura:
• Reutilização de componentes: componentes encapsulados são blocos de código que

podem ser reutilizados como modelos para elementos de sistema comparáveis.
• Legibilidade do código: Como todos os componentes estão contidos em arquivos

separados (e cada componente é apenas um arquivo), o código é mais fácil de ler e
compreender, facilitando sua manutenção e correção.
• Bom para teste de unidade: O teste de unidade é uma atividade de controle de

qualidade que examina como os menores elementos do software funcionam por conta própria.
Ter componentes torna esse trabalho muito mais fácil.
Capacidades de Integração e Flexibilidade

A capacidade de interagir com as aplicações atuais é um componente chave de
qualquer tecnologia em desenvolvimento. É tão simples quanto usar Vue.js porque
simplesmente usa JavaScript e não requer nenhuma outra ferramenta para funcionar.
O Vue também permite que você crie modelos em qualquer linguagem que você escolher,
incluindo HTML, JS e JSX. O Vue, por causa de seus componentes e natureza leve, pode
ser utilizado em praticamente qualquer projeto. E temos o prazer de informar que a transição
de React ou Angular não será difícil, pois a organização interna do Vue é um híbrido dos dois.
Solid Tooling Ecosystem

Vue.js acumulou uma coleção robusta de ferramentas para trabalhar ao longo de seus
cinco anos de existência. A iminente versão Vue CLI 3 é uma reconstrução completa
que fornecerá uma série de novos recursos. O Vue CLI 3 fornecerá suporte pronto
para uso para Babel e TypeScript, bem como teste de unidade, ferramentas de teste
de ponta a ponta e um mecanismo de instalação de plug-in. O Vue também inclui suas
próprias ferramentas de depuração de navegador, renderizador de servidor e
gerenciador de estado, como se isso não bastasse.
Fácil de
aprender Uma ferramenta só pode ser adotada em massa se for simples de
compreender, o que pode ser o caso do aprendizado do Vue.js. O Vue não precisa
de um conhecimento extensivo de bibliotecas, JSX e TypeScript para começar a
escrever, como normalmente acontece com outras tecnologias de front-end. Tudo o
que você precisa para começar é um conhecimento básico de HTML, CSS e JavaScript.
O Vue é compatível com os editores de código mais populares, incluindo Sublime
Text, Visual Studio e Atom, facilitando a experiência. A comunidade, que responde
regularmente a perguntas no bate-papo e no fórum do Discord, é bastante receptiva
aos recém-chegados. Além disso, vários manuais e cursos estão disponíveis
imediatamente na página inicial do Vue.js.
Documentação Concisa
Devemos dar crédito aos documentos do Vue.js. Se você é um novato aprendendo

o framework ou um especialista em tecnologia procurando uma referência de
problema, a documentação do Vue tem o que você precisa. É bem organizado e
abrange todos os temas disponíveis, detalhando cuidadosamente tudo, desde a
instalação até tópicos mais aprofundados, como reatividade e dimensionamento do
aplicativo. Mais importante, há uma seção que compara o Vue com outros
frameworks JS e identifica recursos comuns (por exemplo, Virtual DOM em Vue e
React, sintaxe de modelo em Vue e Angular).
Suporte da comunidade
Os membros da comunidade são bastante ativos tanto na conversa do Discord quanto
no fórum. Olha só a quantidade de tags Vue.js no Stack Overflow, que já passa de 41
mil. Isso foi tudo sobre os benefícios do Vue. Agora, vamos olhar para as desvantagens,
um por um.
Desvantagens A
adoção do
Language Barrier Vue por empresas como Xiaomi e Alibaba ajudou na popularização
da estrutura e na criação de demanda no mercado de trabalho. Com o Vue.js se
tornando mais popular na China, uma parte substancial de seu material e debates
são, previsivelmente, em chinês.
O Grande Firewall chinês complica as coisas naquele país, já que muitos
recursos populares estão temporariamente indisponíveis. Como resultado, entender
e utilizar React ou Angular se torna mais complexo. Vue é uma opção mais atraente.
Como resultado, se você pesquisar conteúdo Vue, sem dúvida encontrará conversas
em fóruns, descrições de plug-ins e instruções em chinês. Isso pode ser um desafio para
engenheiros que só entendem inglês.
Complexidade de
reatividade Já discutimos como o Vue usa a vinculação de dados bidirecional para
gerenciar alterações de DOM. Embora seja uma ferramenta útil para manter os
componentes coordenados, há um problema em como o sistema de reatividade, como é
conhecido, opera.
Em termos mais simples, o aplicativo Vue.js é construído de componentes com os
quais o usuário pode interagir. Quando um componente é ativado por um usuário, um
observador redesenha os dados. O mecanismo de reatividade apenas redesenha blocos
de dados que foram acionados. O problema é que ele não é muito inteligente e
frequentemente comete erros na leitura dos dados; portanto, requer que os dados sejam simplificados.
No entanto, este é um problema reconhecido e é abordado na documentação do
Vue, que fornece instruções sobre como configurar a reatividade corretamente.
Falta de Suporte para Projetos de Grande

Escala Vue.js é um novo framework. Sua comunidade e equipe de desenvolvimento
ainda são ofuscadas pelo Angular mais estabelecido. Também não recebe ajuda
financeira de grandes empresas. O Vue não tem muitos problemas com isso, e até há
demanda de empresas como IBM e Adobe, ainda é utilizado em pequenos projetos.
Risco de excesso de
flexibilidade Afirmamos flexibilidade, que é uma qualidade controversa no contexto de
um grande projeto. Dar à sua equipe de desenvolvimento muitas alternativas pode
resultar em técnicas de programação ideologicamente opostas em conflito dentro da
mesma equipe. Como resultado, em vez de ser um software funcional, é um anulador
final.
Recursos limitados
Embora o ecossistema seja enorme e todas as ferramentas essenciais estejam acessíveis

para começar a usar o Vue, ele não é tão grande quanto o React ou o Angular. Para ser
mais específico, compare a quantidade de plugins React e Vue acessíveis. A diferença
é medida em centenas de milhares de dólares. Os plug-ins existentes que podem ser
usados com outros frameworks frequentemente não são suportados; no entanto, isso
pode ser uma questão de tempo.
Falta de Desenvolvedores Experientes

Vue.js é uma tecnologia muito moderna que só recentemente ganhou atração. No
entanto, teremos que esperar alguns anos antes que ele se torne amplamente utilizado,
já que o mercado de trabalho está crescendo com desenvolvedores qualificados de
Vue.js. Atualmente, a busca por especialistas pode ser feita por meio de um portal
especializado chamado VueJobs.
Falta de escalabilidade
Agora é usado principalmente para desenvolver programas da Web leves, como
aplicativos de página única e UIs. Falta-lhe a escalabilidade necessária para construir
aplicativos complexos e enormes. Isso pode ocorrer porque o trabalho de estrutura
ainda é um esforço independente, sem o apoio de um gigante tecnológico. Essa
restrição, no entanto, é genuína e deve ser considerada ao selecionar a pilha de
tecnologia para seu aplicativo.
Falta de Plugins
Por não ser tão bem estabelecido quanto Angular e React, contém menos plugins que
os dois últimos. Normalmente, os desenvolvedores devem recorrer a linguagens
alternativas para enfrentar os obstáculos impostos por esse problema.
Pequena comunidade
Existem inúmeras invenções e atividades acontecendo na comunidade, embora a
comunidade seja pequena e composta principalmente por pessoas que não falam
inglês. Mas não se preocupe se você contratar da ProCoders; nossos profissionais são
fluentes em inglês e possuem ampla experiência com o framework.
Poverty Pack
Como resultado, porque o Vue.js é financiado e mantido pela comunidade e carece de
grandes fundos; carece de ajuda para adaptação a aplicações de tamanho generoso.
A tecnologia não é confiável ou bem suportada o suficiente para fornecer soluções
rápidas para bugs que uma grande corporação esperaria – e que podem ser fornecidas
pelo suporte React ou Angular.
Além disso, enquanto novas ferramentas estão sendo construídas, Vue.js ainda tem um longo
caminho a percorrer em comparação com o grande número de ferramentas que React e Angular
têm à sua disposição.
Mimado por opções

Muitos de vocês concordam que ter alternativas dentro de uma estrutura é benéfico. No
entanto, quando o projeto cresce e o número de desenvolvedores trabalhando no
framework cresce, isso pode se tornar um problema.
Como desenvolvedor da equipe, você pode não gostar de um método de programação

específico. O mesmo vale para seus colegas de trabalho. Essas configurações
complicam demais o projeto, resultando em erros adicionais e anormalidades no código.
Isso influencia diretamente e tende a elevar o custo e a duração do projeto.
Falta de suporte financeiro para projetos de grande escala

O Vue está atualmente em seus estágios iniciais de desenvolvimento e não pode
competir com estruturas mais estabelecidas como o Angular. Com isso, não recebe
grande aporte financeiro de organizações que possam financiar uma equipe de
desenvolvimento de aplicativos capaz de solucionar prontamente as dificuldades que
surgirem.
Apesar disso, o Vue está vendo uma demanda crescente de gigantes de TI como
IBM e Adobe, embora em projetos menores.
BENEFÍCIOS SOBRE OUTROS JS FRAMEWORKS Vue.js
tem várias vantagens sobre outros JS frameworks. Alguns deles estão listados abaixo.
Pequeno
A escala da estrutura JavaScript determina seu sucesso. Quanto menor o tamanho, mais
frequentemente ele será utilizado. Uma das vantagens mais significativas do Vue.js é
seu tamanho modesto. Essa estrutura tem 18 a 21 KB de tamanho e não leva tempo
para baixar e usar.
Fácil de entender Esta

estrutura pode ser usada para construir aplicativos da Web de pequena e grande escala,
economizando muito tempo. Por causa de sua estrutura básica, o usuário pode
simplesmente incluir Vue.js em seu projeto web. Ele tem uma arquitetura bem definida
que mantém seus dados, métodos de ciclo de vida e métodos personalizados distintos.
Ele contém alguns recursos fantásticos, como observadores, propriedades computadas
e diretivas que tornam o processo de desenvolvimento de um aplicativo on-line
contemporâneo um piscar de olhos. Essa estrutura pode ser usada para construir
aplicativos da Web de pequena e grande escala, economizando muito tempo.
Integração simples O
Vue.js é popular entre os desenvolvedores da Web, pois facilita a conexão de aplicativos
existentes. Isso ocorre porque ele é construído sobre a base do JavaScript e pode ser
incorporado a outros aplicativos baseados em JavaScript. Agora você pode adicionar Vue.js
CDN e comece a usá-lo. A maioria dos componentes e bibliotecas Vue de terceiros também são
suportados pelo Vue.js CDN. Para começar a usar o Vue.js, você não precisa instalar o node e o npm.
Isso implica que ele pode ser usado para criar novos aplicativos da web, bem como modificar os
existentes. Ele também funciona bem como um substituto do jQuery.
Flexibilidade
Outra característica do Vue.js é seu alto grau de adaptabilidade. Ele permite que o usuário crie seu
modelo em HTML, JavaScript ou JavaScript puro utilizando nós virtuais. Essa versatilidade também
facilita a compreensão para React.js, Angular.js e qualquer outro novo desenvolvedor de estrutura
JavaScript, quando se trata de utilizar o Vue.js. Também é extremamente simples instalar e usar
ferramentas como Templating Engines (por exemplo, pug), pré-processadores CSS (por exemplo,
sass, less, stylus e assim por diante) e ferramentas de verificação de tipo (por exemplo, Typescript).
Comunicação bidirecional Devido ao
seu design MVVM, o Vue.js permite a comunicação bidirecional e simplifica o gerenciamento de

blocos HTML. É semelhante ao Angular.js, que também acelera os blocos HTML. Esse recurso,
também conhecido como ligação de dados bidirecional, significa que todas as alterações feitas em
sua interface do usuário são transmitidas aos seus dados e todas as alterações feitas nos dados são
refletidas na interface do usuário. O Vue.js também é conhecido como Reativo, pois responde às
mudanças nos seus dados. Isso contrasta fortemente com bibliotecas como React.js, que oferece
apenas comunicação unidirecional.
Ótimas ferramentas
O Vue.js tem ferramentas fantásticas. O novo Vue CLI, versão 3.x, é sem dúvida uma das melhores
ferramentas JavaScript Framework disponíveis. Ele permite que você crie um novo projeto com
recursos integrados, como roteamento, linting, teste de unidade, armazenamento de estado, pré-
processadores CSS, Typescript, PWA e assim por diante. Você também pode guardar seus presentes
para uso futuro em outros projetos. Ele também permite que você adicione recursos posteriormente.
O Vue CLI também possui uma interface do usuário para gerenciamento de projetos.
Faça um novo aplicativo:
vue criar nome do aplicativo
Adicione o seguinte recurso a um projeto Vue existente:
vue adicionar pwa

Para gerenciar seus projetos, acesse a IU do Vue:
vue ui
Melhor dos Dois Mundos
O Vue.js, como você deve ter ouvido, é inspirado em dois excelentes frameworks web
existentes, React e Angular. Ele combina os melhores recursos de ambos os frameworks.
Por exemplo, é baseado em componentes e usa Virtual DOM, como React, tornando-o
extremamente rápido. Ele também possui diretivas e ligação de dados bidirecional,
muito parecido com o Angular. Não é uma biblioteca (como o React.js) nem uma
estrutura completa (diferente do Angular). Ele oferece uma boa combinação de
funcionalidades prontas para uso e é simples adicionar mais ao longo do caminho,
como roteamento e gerenciamento de estado.
CONCLUSÃO
Aprendemos sobre Vue.js neste capítulo. Estudamos os benefícios e as desvantagens
do Vue.js e por que devemos usá-lo em vez de outro framework.
No capítulo seguinte, abordaremos os fundamentos do Vue.js, como JSX e como
construir o Primeiro Componente.
Capítulo 2
Noções básicas de Vue.js
NESTE CAPÍTULO
JSX _
ÿ Configuração
ÿ Primeiro componente
ÿ Acessórios
ÿ Estado
ÿ Métodos
Discutimos o Vue.js no Capítulo 1. Agora entendemos as vantagens e

desvantagens dele, bem como porque escolhemos o Vue.js em vez de outro framework.
Este capítulo aborda os fundamentos do Vue.js, como JSX, e como
construir o Primeiro Componente.
JSX
O nome JSX foi inventado pela equipe de engenharia do Facebook. JSX é uma
extensão sintática do tipo JavaScript XML sem semântica especificada. O JSX
NÃO deve ser usado por mecanismos ou navegadores. Em vez disso,
utilizaremos transpilers como Babel para transformar JSX em JavaScript padrão.
// essa linha abaixo é exemplo de JSX

const header = <h1>Bem-vindo ao Scotch</h1>;
DOI: 10.1201/9781003310464-2 23
Em JavaScript, podemos utilizar uma sintaxe semelhante ao HTML graças ao JSX.
Pré-requisitos
Para acompanhar esta lição, você deve ter o seguinte:
• Node.js 10x ou superior e Yarn/npm 5.2 ou superior instalado no PC
• Conhecimento básico dos fundamentos de JavaScript, React e Vue
• Você pode instalar o Vue CLI em seu PC executando o seguinte yarn

comando:
fio global add @vue/CLI
Na maioria dos casos, o Vue aconselha a utilização de modelos para construir seu HTML.
No entanto, há momentos em que você precisa de todos os recursos programáticos do
JavaScript. É aqui que a função render, uma alternativa mais próxima do compilador aos
modelos, é útil.
Vejamos um caso básico em que uma função de renderização pode ser útil.
Suponha que você deseja criar títulos ancorados:
<h1>
<a name="olá-todos" href="#olá-todos">
Olá a todos </a> </h1>
Você decide usar a seguinte interface de componente para o HTML acima:
<anchored-heading:level="1">Olá a todos </anchored-heading>
Quando você começa com um componente que apenas cria uma direção com base no
suporte de nível, você imediatamente se depara com o seguinte:
<script type="text/x-template" id="anchored-

heading-template"> <h1 v-if="level === 1">
<slot></slot> </h1>
<h2 v-else-if="nível === 2">

<slot></slot> </h2>
Noções básicas do Vue.js ÿ 25
<h3 v-else-if="nível === 3">

<slot></slot> </h3>
<h4 v-
else-if="nível === 4">
<slot></slot> </h4>
<h5 v-
else-if="level === 5">
<slot></slot> </h5>
<h6 v-
else-if="nível === 6">
<slot></slot> </h6>
</
script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template', props: { level:
{ type:
Number,
required: true
} })
Esse modelo não combina bem comigo. Além de ser detalhado, estamos duplicando <slot></
slot> para cada nível de título e teremos que fazer isso novamente quando adicionarmos o
elemento âncora.
Embora os modelos sejam úteis para muitos componentes, este claramente não é um
deles. Então, vamos reescrevê-lo usando uma função de renderização:
Vue.component('anchored-heading', { render: function

(createElement) {
return criarElemento(
'h' + this.level, // nome da tag this.$slots.default //
array-crianças
) }, props:
{ level:
{ type: Number,
required: true
}
} })
Muito facil! O código é mais curto, mas também requer uma compreensão mais ampla dos
atributos de instância do Vue. Neste cenário, você deve estar ciente de que quando você passa
filhos para um componente sem uma diretiva v-slot, como o Hello world!, esses filhos são salvos
na instância do componente em $slots dentro do cabeçalho ancorado. Antes de entrar nos
métodos de renderização, é uma ideia inovadora ler a API de propriedades da instância, caso
ainda não o tenha feito.
Configurar Vue para usar JSX Se
você usa Vue-cli 3.0 ou posterior, está com sorte porque JSX é suportado.
Se você tiver uma versão anterior do Vue-cli que não suporta JSX, você pode adicioná-la
instalando babel-preset-Vue-app e adicionando-a ao seu arquivo .babelrc.
Para instalar:
# Usando npm
npm install --save-dev babel-preset-vue-app
# Usando yarn
yarn adicione --dev babel-preset-vue-app
No arquivo .babelrc, tudo o que você deve fazer é:
{
"presets": ["vue-app"]
}
Agora podemos utilizar o JSX no método render do nosso componente.
Pegadinhas da sintaxe JSX do

Vue Existem alguns problemas ao utilizar o JSX com o Vue.
Por exemplo, os atalhos: e @ para ligação e escuta de eventos não estão mais disponíveis. Eles
são sintaxe JSX incorreta e, como resultado, seu código não será compilado.
O prefixo “on” é necessário no JSX para escutar eventos. Por exemplo, para
clique em eventos, use onClick.
render (criarElemento) { return (
<button onClick={this.handleClick}></button>
)
}
Para alterar um evento, use:
render (createElement) { return

( <button
onClick:prevent={this.handleClick}></
botão>
)
}
Para vincular uma variável

( <button
content={this.generatedText}></button>
)
}
Em vez de v-html, use: para definir uma string HTML como o conteúdo de um elemento.
render (criarElemento) { return (
<button domPropsInnerHTML={htmlContent}></button>
)
}
Um objeto grande também pode ser distribuído.

( <button
{...this.largeProps}></button>
)
}
Usando JSX em Render
Voltando ao nosso componente “TextField” original, podemos fazer isso agora que
habilitamos o JSX em nosso aplicativo Vue.
render (criarElemento) {
const inputAttributes = { class: 'input-
field has-outline', //
definição de classe
onClick: this.handleClick // pano de fundo do manipulador de
eventos: false // custom-prop
} const inputMarkup = this.multiline

?<textarea {...inputAttributes}></textarea> : <input
{...inputAttributes}/> return inputMarkup
Importando componentes Vue JSX
Outra vantagem de utilizar o JSX no Vue é que não precisamos mais registrar cada
componente, mas apenas importar e utilizar.
importar {Button} de '../components' export default

{ render (createElement)
{
return <Button primary={true}>Editar</Button>
}
}
Como fazer JSX funcionar com Typescript
TypeScript é uma técnica para adicionar verificação de tipo ao JavaScript.

Tudo o que precisamos fazer para adicionar a funcionalidade JSX ao TypeScript é
alterar tsconfig.json.
Para habilitar o JSX no TypeScript, salve o arquivo como .tsx e edite seu tsconfig .json
para incluir:
{
"opções do compilador": {
....
"jsx": "preservar",
}
}
Quando a opção JSX é definida como “preservar”, o TypeScript não analisará o JSX.
Como o Babel atualmente não oferece suporte ao Vue JSX, isso permite que o Babel assuma o controle de
tudo o que é JSX e TypeScript.
Em seguida, em seu projeto, crie um arquivo jsx.d.ts e inclua o TypeScript

Definições de JSX para Vue.
import Vue, {VNode} de 'vue' declare

global { namespace
JSX { interface
Element extends VNode {} interface
ElementClass extends Vue {} interface
ElementAttributesProperty { $props: {}
} interface IntrinsicElements { [elemName:

string]: qualquer
}
}
}
Verifique se o TypeScript pode abrir o arquivo de declaração. Como alternativa, você pode adicionar o
carregamento automático ao tsconfig.json por meio de:
{
"opções do compilador": {
...
"typesRoot": ["./node_modules/@types", "./types"]
}
}
Isso foi tudo sobre JSX, e agora estamos prontos para passar para a próxima seção de nosso capítulo,
Configuração.
CONFIGURAR
Ao invocar a função de configuração, dois parâmetros são necessários:
1. adereços
2. contexto
Vamos dar uma olhada em como cada argumento pode ser utilizado.
Props
O argumento props é o primeiro argumento na função de configuração. As props dentro
de um método de configuração são reativas e alteradas conforme novas props são
entregues, bem como em um componente regular.
export default { props:

{ title:
String }, setup(props)
{ console.log(props.title)
}
}
Se você precisar desestruturar seus adereços, pode fazê-lo usando os recifes na função
de configuração:
importar { toRefs } de 'valor
setup(props) { const
{ title } = toRefs(props)
console.log(title.value)
}
Se o título for um adereço opcional, pode estar ausente da lista de adereços. Os

passeios não gerarão uma URL para o título neste cenário. Você teria que usar para
Reif em vez disso:
importar { de } de 'vue'
setup(props) { const
title = toRef(props, 'title')
console.log(title.value)
}
Contexto
O contexto é o segundo argumento passado para a função de configuração. O contexto

é um objeto JavaScript padrão que expõe dados adicionais que podem ser benéficos
durante a configuração:
padrão de exportação
{ setup(props, contexto) {
// Atributos (objeto não reativo, equivalente a $attrs)
console.log(context.attrs)
// Slots (objeto não reativo, equivalente a $slots)
console.log(context.slots)
// Emite eventos (Função, equivalente a $emit) console.log(context.emit)
// Expor propriedades públicas (função)

console.log(context.expose)
}
}
O objeto de contexto é um objeto JavaScript regular; não é reativo; portanto, você pode
usar com segurança a desestruturação do ES6 nele.
padrão de exportação {
setup(props, { attrs, slots, emitir, expor }) {
...
}
}
attrs e slots são objetos de estado que são alterados continuamente sempre que o
componente é modificado. Isso implica que você deve evitar desestruturar-los e, em vez
disso, referir-se a eles como attrs. X ou ranhuras. x. Vale ressaltar também que, ao
contrário dos props, attrs e slots não possuem atributos reativos. Se você deseja aplicar
efeitos colaterais dependendo das alterações de atributo ou slot, deve fazê-lo dentro de
um gancho de ciclo de vida onBeforeUpdate.
ACESSO ÀS PROPRIEDADES DOS COMPONENTES
Quando a instalação é executada, a instância do componente ainda não foi gerada.

Como consequência, você só poderá acessar as seguintes propriedades listadas:
• adereços
• atributos
• slots
• emitir
Em outras palavras, você não poderá usar as seguintes opções de componentes:
• dados
• calculado
• métodos
• refs (referências do modelo)
Uso com modelos
Se a configuração retornar um objeto, as propriedades do objeto, bem como as propriedades

dos props fornecidas na configuração, podem ser acessadas no modelo do componente:
<modelo>
<div>{{ nomedacoleção }}: {{ leitoresNumber }}
{{ livro.título }}</div> </
template>
<script>
import { ref, reativo } de 'vue'
export default
{ props:
{ collectionName: String },
setup(props) {
const ReaderNumber = ref(0) const
book = reactive({ title: 'Vue 3 Guide' })
// expõe ao modelo return
{ leitoresNumber, livro
}
}
} </script>
Uso com funções de renderização
A configuração também pode gerar uma função de renderização que pode usar diretamente
o estado reativo definido no mesmo escopo:
importar { h, ref, reativo } de 'vue'
export default { setup()

{ const
ReaderNumber = ref(0) const book =
reactive({ title: 'Vue 3 Guide' })
// Observe que precisamos usar ref explicitamente
valor aqui
return () => h('div', [readersNumber.value, livro .title]) }
Não podemos retornar mais nada se retornarmos uma função render.

Internamente, isso não deve ser um problema, mas pode ser se quisermos expor as funções
desse componente ao componente pai por meio de referências de modelo.
Este problema pode ser resolvido executando a exposição e enviando a ela um objeto
que descreva os atributos que devem estar disponíveis na instância do componente externo:
importar { h, ref } de 'vue'
export default
{ setup(props, { expor }) { const
count = ref(0) const
increment = () => ++count.value
expor({
incremento
})
return () => h('div', contador.valor)

}
}
A função de incremento seria acessível por meio de uma referência de modelo no componente
pai.
Uso de This Isso
não será uma referência à instância atualmente ativa dentro de Setup (). Como Setup () é
chamado antes de outras opções de componentes serem manipuladas, essa opção dentro
de Setup () agirá de maneira bastante diferente das outras opções.
Isso pode causar confusão ao usar Setup () em conjunto com várias APIs de opções.
Primeiro componente
Antes de entrarmos no mundo dos componentes Vue, vamos primeiro definir quais são os
componentes da Web no desenvolvimento de aplicativos.
Por exemplo, minha residência fica próxima a um shopping, onde eu, como todo mundo,
vou regularmente. Este enorme shopping é feito de pequenos pedaços de tijolos que são
colocados e posicionados uns sobre os outros para formar um grande volume que nos
permite fazer compras.
Os componentes em aplicativos da Web podem ser vistos como blocos (pequenas
porções reutilizáveis) meticulosamente construídos juntos para construir um aplicativo ou até
mesmo um componente maior conhecido como componente pai.
A principal distinção entre blocos de shopping centers e componentes da web é que os
componentes da web, ao contrário de granitos e materiais de cimento, são blocos que
abrangem marcação, modelo HTML, CSS e JavaScript.
Componentes em exibição
A documentação oficial do Vue define componentes como elementos personalizados aos
quais o compilador Vue adiciona funcionalidade e que são produzidos usando o
Vue.command (tagName, opções).
Para mostrar isso, criaremos um aplicativo básico que exibe os nomes dos trabalhadores
da ACME INT'L. Faremos três componentes para essa finalidade: componente navbar,
componente de cabeçalho de página e componente de lista de funcionários.
Para começar, vamos construir uma página index.html com o seguinte

contente:

<link rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/
bootstrap/4.0.0-beta.2/css/bootstrap. min.css"><div id="app"> <navbar-
component></navbar-component>
<div class="container">
<componente do título da página>

</page-heading-component>
<staff-list-component>
</staff-list-component> </div>
</div>
 <script
src="https://unpkg.com/vue"></script> <script src="main.js"></script>
Então começamos a definir como esses componentes devem agir e registrá-los no

Vue.
Os componentes não podem funcionar sozinhos. Eles devem ser registrados
com uma instância Vue ou um componente pai.
Lembra como dissemos que o Vue.component é usado para registrar
componentes? (tagName, opções). “Opções” refere-se a um objeto que pode incluir
um modelo, dados, métodos, props e assim por diante.
Em main.js, nossos componentes registrados agora devem ficar assim:
vue.component('navbar-component', {
template: '<nav class="navbar navbar-expand-md
navbar-dark bg-dark mb-4"> <a class="navbar-brand" href="#">ACME INTL</
a><button class="navbar-toggler" type="button" data-toggle= "collapse" data
target="#navbarCollapse" aria controls="navbarCollapse" aria-
expanded="false" aria-label="Toggle
navigation"> <span class="navbar toggler-icon"> </button > </nav>', })
//Register-Page header component

Vue.component('page-heading-component', { template: '<h1
class="text-center">{{heading}}</h1>', data: function() { return { título: 'Lista de
funcionários da ACME'
} }); //Registrar o componente da lista de

funcionários Vue.component('componente da lista de funcionários', {
template: '<table class="table table-bordered"> <tbody>' +
'
<tr v-for="staff in staffs"> <td>{{staff. nome}}</td>
<td>{{staff.email}}</td> <td>{{staff.email} função}}</td></tr>' + '</tbody></
table>',
data: function() { return

{ staffs:
[{ name: 'Johny
Doe', email:
'johny.doe@acme.org', função: 'Central
Executive Officer' }, { name: 'Ribbecca Dan',
email: 'ribbecca.dan@acme.org',
função: 'Desenvolvedor Backend' }, { nome:
'Mope Joshua', e-mail:
'mope.joshua@acme.org',
função: 'Analista Financeiro' }, { nome: ' Flima
Fatima', email: 'flima.fatima@acme.org',
cargo: 'Deputy CTO' }, { nome:

'Pikiru Oluwaseun', email:
'pikiru.oluwaseun@acme.org',
cargo: 'Gerente de Projeto' }, { nome:

'Garry Greg', e-mail: 'garry.greg@acme.org', função:
'Desenvolvedor Sênior'
},
{ nome: 'Hnna Brown', e-
mail: 'hnna.brown@acme.org', função:
'Gerente da comunidade' }, { nome:
'Runde Ogundipe', e-mail:

'runde.ogundipe@acme.org', função: 'Diretor
de Tecnologia' }, { nome: 'Landy Kuma', e-
mail:
'landy.kuma@acme.org',
função: 'Recursos Humanos' }, { nome:
'Raman Aduragbemi', e-mail:
'raman. aduragbemi@acme.org',
função: 'Administrador do sistema' }, ]
} },
});
//Root-Instance new
Vue({ el:
'#app', data:
{}, })
Você deve ter notado que fornecemos um modelo (elementos HTML) e dados que
seriam renderizados nesses elementos HTML na lista de funcionários
componente, permitindo que você especifique seus elementos HTML uma vez e os
reutilize em várias páginas. Sim! Essas são as partes de código reutilizáveis que
estávamos tentando ilustrar na comparação anterior.
Construir grandes projetos dessa maneira seria uma dor. Não seria maravilhoso
se cada componente permanecesse em seu próprio arquivo, de modo que os
elementos HTML pudessem ser separados do JavaScript com um pouco de código
CSS? Sim claro! Um componente de arquivo único é como é chamado.
Componente de arquivo
único Um componente de arquivo único é um arquivo com a extensão .vue criado com
browserify ou webpack.
Os componentes em um único arquivo podem ter até três seções:
<template>  </
template><script> //JavaScript
</script><style> /
**style**/ </style>
Vamos agora recriar o aplicativo da ACME usando este método. Para construir
nosso aplicativo, utilizaremos o webpack-simple.
Antes de prosseguir, certifique-se de ter o npm e o node instalados.
Começamos executando o seguinte:
$ npm install -g Vue-CLI $ valor init

webpack-simple acme-app $ cd acme-app $ npm install
$ npm run dev
Se você foi bem-sucedido, sua pasta raiz agora deve incluir arquivos e pastas.
Vamos criar três arquivos na pasta src, nomeando-os NavbarComponent. vue,
PageHeadingComponent.vue e StaffListComponent.vue, nessa ordem.
Altere o conteúdo NavbarComponent.vue para este:
<template> <nav
class="navbar navbar-expand-md navbar-dark
bg-dark mb-4">
<a class="navbar-brand" href="#">ACME INTL</a> <button class="navbar-
toggler" type="button" data-toggle="collapse" data-
target="#navbarCollapse" aria-controls="navbarCollapse" aria expandido="false"
aria-label="Alternar navegação"> <span class="navbar-
toggler-icon"> </button> </nav> </template>
<script>
module.exports = { data()
{ return {}
} </script>
<escopo do estilo>
</estilo>
PageHeadingComponent.vue é convertido em:
<template>
<h1 class="text-center">{{title}}</h1> </template> <script>
module.exports=
{ name:"PageHeadingComponent", data ()
{ return
{ title:"ACME's Lista de Funcionários" } } }
</script>
<style scoped> </
style>
Finalmente, editamos StaffListComponent.vue com o seguinte:
<modelo>
<table class="table table-bordered">
<tbody>
<tr v-for="staff in staffs"> <td>{{staff.name}}
</td> <td>{{staff.email}}</td>
<td>{{staff. função}}</td> </tr> </
tbody> </table> </template>
<script>
module.exports = { name:
"StaffListComponent", data (){ return
{ staffs:
[ {name:
'Johny Doe',
email: 'johny. doe@acme.org', função: 'Central
Executive Officer'}, {nome: 'Ribbecca Dan', e-mail:
'rebbecca.dan@acme.org', função: 'Desenvolvedor Backend'}, {nome:

'Mope Joshua', e-mail:
'mope.joshua@acme.org', função: 'Analista Financeiro'},
{nome: 'Flima Fatima', e-mail:
'filma.fatima@acme.org', função: 'Deputy CTO'}, {nome: 'Pikiru
Oluwaseun', e-mail: 'pikiru.oluwaseun@acme.org',
função: 'Gerente de Projeto'}, {nome: 'Garry Greg', e-mail:
'garry.greg@acme.org', função: 'Desenvolvedor Sênior'}, {nome:

'hnna Brown', e-mail: 'hnna.
brown@acme.org', função: 'Gerente da comunidade'}, {nome:
'Runde Ogundipe', e-mail:
'runde.ogundipe@acme.org', função: 'Diretor de tecnologia'},
{nome: 'Landy Kuma', e-mail:

'landy.kuma@acme.org', função: 'Recursos Humanos'},
{nome: 'Raman Aduragbemi', e-mail:
'raman.aduragbemi@acme.org', função: 'Administrador do
sistema'}, ]
}
}
}
</script>
<estilo com escopo>

</estilo>
Na segunda vez que verificamos a pasta src, notamos o App.vue, que

foi produzido durante a fase de scaffolding. Este será nosso
componente pai, com todos os outros componentes
(PageHeadingComponent, NavbarComponent e StaffListComponent) registrados co
Você notou que alocamos nosso código para um módulo de objeto específico.
Isso revela a lógica do nosso componente. Funções e variáveis declaradas em
componentes de arquivo único são acessíveis apenas dentro do escopo de sua
definição. Devemos exportá-los porque eles devem ser registrados com um componente
pai (App.vue).
Vamos agora mudar nosso App.vue para:
<template> <div id="app"> <navbar-

component></navbar-
component> <div class="container">
<page-heading-component></
componente-cabeçalho-da-página>
<staff-list-component></
staff-list-component> </div> </
div> </
template>
<script> importar
PageHeadingComponent de './
PageHeadingComponent.vue' importa
StaffListComponent de './
StaffListComponent.vue'
importar NavbarComponent de './NavbarComponent. padrão de exportação
visto' { nome: 'aplicativo',
componentes:
{NavbarComponent,
PageHeadingComponent, StaffListComponent}, //Registro
outros elementos
} </script>
<estilo com escopo> </

estilo>
Atualmente, registramos três componentes no App.vue, mas o aplicativo em si ainda não

foi notado. Passamos a associá-lo à instância raiz declarada em src/main.js.
Vamos fazer algumas modificações em src/main.js.
//src/main.jsimport Vue de 'vue' importar App de './

App.vue'
new Vue({ el:

'app',
components:{App} })
Por fim, altere index.html para:
<!DOCTYPE html>
<html lang="en">
<cabeça>
<meta charset="utf-8">
<title>acme-app</title> <link
rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/bootstrap/
4.0.0-beta.2/css/bootstrap .min.css">
</head>
<body>
<app></app>
<script src="/dist/build.js"></script> </body> </html>
Se você olhar para o seu navegador agora, deverá ver algo assim.
Os componentes são um elemento-chave do Vue porque permitem que você escreva
um código extremamente reutilizável e independente.
PROPS
Prop Invólucro (camelCase vs. kebab-case)

Como os nomes de atributo HTML não diferenciam maiúsculas de minúsculas, os
navegadores tratarão todos os caracteres maiúsculos como minúsculos. Isso implica
que, ao utilizar modelos in-DOM, os nomes de propriedade camelCased devem ser
substituídos por seus equivalentes kebab-case (delimitados por hífen):
Vue.component('blog-post', {
// camelCase nas props do JavaScript:
['postTitle'], template:
'<h3>{{ postTitle }}</h3>' })


<blog-post post-title="olá"></blog-post>
Essa restrição não se aplica se você usar modelos de string.

Tipos de adereços
Até agora, vimos apenas propriedades listadas como uma matriz de strings:
props: ['title', 'likes', 'isPublished', 'commentIds',

'autor']
Normalmente, você deseja que cada prop tenha um certo tipo de valor. Em certas circunstâncias, você
pode listar props como um objeto, com os nomes e valores das propriedades, incluindo os nomes e
tipos de prop, respectivamente:
props: { title:
String, likes: Number,
isPublished: Boolean,
commentIds: Array, author:

Object, callback:
Function, contactsPromise:
Promise // ou qualquer construtor
}
Isso não apenas documentará seu componente, mas também notificará os usuários no console
JavaScript do navegador, se eles fornecerem o tipo incorreto.
Passando adereços estáticos ou dinâmicos

Até agora, as props receberam um valor estático, como em:
<blog-post title="Minha jornada com o Vue"> </blog-post>
Você também viu props alocados dinamicamente usando v-bind, como em:
 <blog-post v-

bind:title="post.title"></blog-post>
 <blog-post v-

bind:title="post.title
+ ' por ' + post.autor.
nome"
></blog-post>
Nas duas instâncias acima, enviamos valores de string, mas qualquer valor pode ser passado para um
prop.
Passando um Número


<blog-post v-bind:likes="42"></blog-post>
 <blog-post v-bind:likes="post.likes"></

blog-post>
Passando um Booleano

<blog-post is-published></blog-post>

 <blog-post v-bind:is-
published="false"></blog-post>
 <blog-post v-bind:is-

published="post.isPublished"> </blog-post>
Passando um Array
que -->
 <blog-post v-bind:comment-
ids="[234, 266, 273]"> </blog-post>
 <blog-post v-bind:comment-

ids="post.commentIds"> </blog-post>
Passando um Objeto
que -->
<blog-

post v-bind:author="{
nome: 'Reronica',
empresa: 'Reridian Dynamics' }" ></blog-
post>
 <blog-post v-

bind:author="post.author"></blog-post>
Passando as Propriedades de um
Objeto Se você quiser passar todas as propriedades de um objeto como props,
use v-bind sem um argumento (v-bind ao invés de v-bind:prop-name). Dado um
objeto post, por exemplo:
post: { id:
1, título:
'Minha Jornada com o Vue'
}
O modelo é o seguinte:
<blog-post v-bind="post"></blog-post>
Será igual a:
<blog-post v-
bind:id="post.id" v-
bind:title="post.title"
></blog-post>
Fluxo de dados
unidirecional Todos os props constituem uma ligação unidirecional entre as
propriedades filho e pai: quando a propriedade pai é atualizada, ela flui para o filho,
mas não o contrário. Isso evita que os componentes filhos alterem erroneamente o
estado do pai, o que pode complicar o fluxo de dados do seu aplicativo.
Além disso, quando o componente pai é modificado, o valor mais atual
é aplicado a todos os atributos do componente filho. Isso implica que você
nunca deve tentar alterar um prop dentro de um componente filho. Se o
fizer, o Vue irá notificá-lo através do console.
Normalmente, existem duas situações em que é atraente modificar um adereço:
1. O prop é usado para fornecer um valor inicial; o componente filho irá utilizá-lo
posteriormente como uma propriedade de dados local. Nesse cenário, é
aconselhável estabelecer uma propriedade de dados local que comece com o prop:
props: ['initialCounter'], data: function

() { return {
contador: this.initialCounter
}
}
2. O prop é entregue como um valor bruto que deve ser convertido. Neste caso, é
aconselhável definir uma propriedade calculada com base no valor do prop:
props: ['size'], calculado:

{ normalizedSize:
function () {
return this.size.trim().toLowerCase() }
Componentes de
validação de prop, como os que você já viu, podem atender às necessidades de prop.
Se um critério não for satisfeito, o Vue notificará você no console JavaScript do
navegador. Isso é extremamente benéfico ao criar um componente que será utilizado
por outros.
Em vez de uma matriz de strings, você pode passar um objeto contendo valida
critérios de atribuição ao valor de props para fornecer validações de prop.
Exemplo:
Vue.component('my-component', { props: { //
Verificação
de tipo básico (os valores 'null' e 'undefined' passarão por
qualquer validação de tipo) propA: Number, // Múltiplos
tipos possíveis
propB: [String, Number ],
// String necessária propC:

{ type:
String, required:
true },
// Número com valor padrão propD: {

tipo: número,
padrão: 110
},
// Objeto com valor padrão propE: { type:
Object,
// Os padrões do objeto ou array devem retornar de // padrão da

função de fábrica: function ()
{ return { message: 'hello' }
} },
// Validator-function customizado propF:
{ validator:
function (value) {
// O valor deve corresponder a uma dessas strings
return ['sucesso', 'aviso', 'perigo'].
indexOf(valor) !== -1
}
}
} })
O Vue emitirá um aviso de console se a validação do prop falhar (se estiver usando a compilação
de desenvolvimento).
Verificações de tipo
O tipo pode ser um dos construtores nativos listados abaixo:
• Corda
• Número
• Variedade
• Boleano
• Objeto
• Símbolo
• Data
• Função
Além disso, type pode ser uma função de construtor personalizada e a asserção será
executada por meio de uma instância de check. Por exemplo, suponha que exista a
seguinte função construtora:
function Pessoa (primeiroNome, sobrenome) {

this.firstName = firstName
this.lastName = lastName
}
Você pode tentar:
Vue.component('blog-post', { props: {
autor: pessoa
} })
Para verificar se o valor da propriedade author foi gerado usando um novo Person.
Atributos Non-Prop Um
atributo non-prop é aquele que é fornecido para um componente, mas não possui um
prop correspondente.
Embora props claramente declarados sejam recomendados para enviar informações
a um componente filho, os desenvolvedores de bibliotecas de componentes nem sempre
podem prever os cenários em que seus componentes serão usados. Como resultado, os
componentes podem receber atributos arbitrários, que são adicionados ao elemento raiz
do componente.
Suponha que estamos utilizando um componente bootstrap-date-input de terceiros
com um plug-in Bootstrap que precisa da entrada para ter uma propriedade data-date-
picker. Este atributo pode ser adicionado à nossa instância do componente:
<bootstrap-date-input data-date-picker="activated"></ bootstrap-date-input>
E a propriedade data-date-picker=“activated” será aplicada ao elemento raiz de bootstrap-

date-input automaticamente.
Usando atributos existentes para substituir/mesclar
Suponha que este seja o modelo bootstrap-date-input:
<input type="date" class="form-control">
Para definir um tema para nosso plug-in seletor de data, talvez seja necessário criar uma
classe, como esta:
<bootstrap-date-input data-date-
picker="activated" class="date-picker-theme-
dark" ></bootstrap-date-input>
Nesta situação, a classe tem dois valores distintos:
• form-control, que é definido no template do componente.
• date-picker-theme-dark, que é fornecido pelo pai do componente.
Para a maioria dos atributos, o valor fornecido ao componente substituirá o valor definido
pelo componente. Passar type=“text” irá, por exemplo, substituir type=“date” e quebrá-lo!
Felizmente, as características de classe e estilo são um pouco mais criativas, então ambos
os valores são combinados, gerando o valor final: form-control date-picker-theme-dark.
Desativando a herança de atributos Se
você não deseja que o elemento raiz de um componente herde atributos, especifique
inheritAttrs: false nas opções do componente. Como um exemplo:
Vue.component('meu componente, { inheritAttrs:

false, // ... })
Isso é especialmente útil quando usado em conjunto com a propriedade de instância $attrs,
que contém os nomes e valores de atributos fornecidos a um componente, como:
{
obrigatório: verdadeiro,
espaço reservado: 'Digite o nome de usuário.'
}
Você pode escolher manualmente o elemento para encaminhar o atributo usando

itAttrs: false e $attrs inerentes, o que é desejável para componentes base:
Vue.component('base-input', { inheritAttrs:
false, props: ['label', 'value'],
template: '
<rótulo>
{{ label }} <input
v-
bind="$attrs" v-
bind:value="value"
v-on:input="$emit('input', $event.target .value)"
>
</label>
'
})
Essa técnica permite que você utilize componentes básicos mais como elementos
HTML brutos, sem se preocupar com qual elemento está na raiz:
<base-input
label="Nome de usuário:"
v-model="nome de usuário"
espaço
reservado obrigatório="Digite o nome de usuário"
></base-input>
STATE
Single-State Tree O
Vuex emprega uma árvore de estado único, que contém todos os estados do seu
aplicativo e atua como a “única fonte de verdade”. Isso também implica que você
geralmente terá apenas uma loja para cada aplicativo. Uma árvore de estado único
simplifica o processo de localizar um determinado estado e tirar instantâneos
facilmente do estado atual do aplicativo por motivos de depuração.
A árvore de estado único não entra em conflito com a modularidade nos próximos
capítulos, e abordaremos maneiras de dividir seu estado e mutações em submódulos.
Os dados que você coloca no Vuex estão em conformidade com as mesmas restrições que os dados em um
A instância Vue, ou seja, o objeto de estado deve ser simples.
Obtendo o estado Vuex nos componentes Vue Então,

como mostramos o estado da loja em nossos componentes Vue? Como as lojas
Vuex são reativas, a abordagem mais direta para “obter” o estado delas é
simplesmente retornar algum estado da loja de dentro de uma propriedade computada
(abre uma nova janela):
// cria um componente Counter const Counter

={
modelo: '<div>{{ contagem }}</div>', calculado:
{ contagem () {
return loja.estado.contagem
}
}
}
Quando o store.state.count muda, a propriedade calculada é reavaliada, acionando

as modificações DOM relacionadas.
Esse design, no entanto, força o componente a depender do singleton da loja
global. Ao utilizar um sistema de módulo, é necessário importar a loja em cada
componente que precisa do estado da loja, assim como simular ao testar o
componente.
Com a opção store, o Vuex oferece uma técnica para “injetar” store em todos os
componentes filhos do componente raiz:
const app = new Vue({ el:

'#app', // fornece
a loja usando a opção "store". // isso injetará a instância da loja
em todos os filhos
componentes.
store,
components: { Counter }, template: '
<div class="app">
<counter></counter> </
div>
'
})
Ao passar a opção store para a instância raiz, o store é injetado em todos

os componentes filhos do root e fica disponível para eles como this.$store.
Vamos atualizar nossa implementação do Counter:
contador const = {
template: '<div>{{ count }}</div>', computado: { count ()
{ return this.
$store.state.count
}
}
}
O ajudante mapState
Quando um componente deve acessar muitas propriedades de estado de
armazenamento ou getters, declarar todas essas propriedades calculadas
pode se tornar tedioso e demorado. Para resolver isso, podemos usar o
ajudante mapState, que fornece métodos getter calculados para nós e nos
poupa alguns toques de tecla:
// nas compilações completas, os helpers são expostos como Vuex. mapState

importar
{ mapState } de 'vuex'
export default { // ...

computad:
mapState({ // as funções de
seta podem tornar o código muito sucinto! count: state => state.count,
// passar o valor da string 'count' é o mesmo que 'state

=> estado.contagem'
contagemAlias: 'contagem',
// para acessar o estado local com 'this', um normal

função deve ser usada
countPlusLocalState (estado) { return

state.count + this.localCount
} })
}
Quando o nome de uma propriedade computada mapeada é o mesmo que o

nome de uma subárvore de estado, também podemos passar um array de strings para mapState.
calculado: mapState([
// mapeia this.count para store.state.count
'contar'
])
Operador Object Spread

Deve-se observar que mapState retorna um objeto. Como podemos combiná-lo
com outras propriedades calculadas localmente? Normalmente, teríamos que usar
um utilitário para combinar vários objetos em um antes de passar o objeto final
para calcular. No entanto, podemos reduzir a sintaxe usando o operador de
dispersão de objetos (abre uma nova janela):
computado:
{ localComputed () { /* ... */ }, // mistura isso no
objeto externo com a dispersão do objeto
operador ...mapState({ // ... })
Componentes ainda podem ter estado local

Usar o Vuex não implica que você deva incluir todos os estados no Vuex.
Embora adicionar mais condições ao Vuex torne as modificações de estado mais
aparentes e depuráveis, também pode tornar o código mais detalhado e indireto.
Pode ser suficiente deixar uma parte do estado como o estado local se ele
pertencer firmemente a um único componente. Você deve avaliar as compensações
e fazer as opções apropriadas para as necessidades de desenvolvimento do seu aplicativo.
MÉTODOS
Um método Vue é um objeto vinculado a uma instância Vue. O objeto de métodos
contém as definições de funções. Os métodos são úteis quando você precisa
executar alguma ação em um elemento usando a diretiva v-on para gerenciar
eventos. As funções especificadas no objeto de métodos podem ser invocadas
novamente para realizar ações.
Sintaxe:
métodos: {
// Podemos adicionar funções aqui
}
Sintaxe para os componentes de arquivo único:
exportar padrão
{ métodos: {
// Podemos adicionar funções aqui
}
}
O Vue.js é usado nos exemplos a seguir para demonstrar a operação dos métodos.
<!DOCTYPE html>
<html>
<cabeça>
<fonte do script=
"https://unpkg.com/vue"> </script> </
head> <body>
<div style="text-align: center;" id = "casa">

 <h1
style="color: green;">{{title}}</h1> <h2>Título: {{name}}</h2>
<h2>Tópico : {{topic}}</h2> 
<h2>{{show()}}</h2>
</div> </
body>
<script type="text/javascript">
// Criando a Instância Vue var vm = new
Vue({
// Atribuindo id de DOM no parâmetro el: '#home',
// Atribuindo valores dos dados do parâmetro: { title:

"Beep for
Beep",
nome: "Vue.js", tópico:

"Instâncias"
},
// Criando os métodos method: {
// Criando a função show: function()

{ return "Bem-vindo a isso
seção sobre "

+ this.name + " - "
+ este.tópico;
}
}
});
</script> </
html>
<!DOCTYPE html>
<html>
<cabeça>
<fonte do script=
"https://unpkg.com/vue"> </script> </
head> <body>
<div style="text-align: center;" id = "home">  <h1 style="color: green;">{{title}}
</h1> <h2>Título: {{name}}</h2 >  <button
@click="show()">Clique aqui</
botão>
<h2 id="view"></h2>
</div> </
body>
<script type="text/javascript">
// Criando a Instância Vue var vm = new
Vue({
// Atribuindo id de DOM no parâmetro el: '#home',
// Atribuindo valores dos dados do parâmetro: { title:

"Beep for
Beep",
nome: "Vue.js | Métodos",

},
// Criando os métodos method: {
// Criando a função show: function(){
// Configurando o texto em
o elemento
documento.
getElementById("exibir")
.innerHTML = "Olá,
Isso é Vue"
// Escondendo o texto
após os 2 segundos
setTimeout(() => { documento
.getElementById("exibir")
.innerHTML = ""
}, 2000);
}
}
});
</script> </
html>
A opção de métodos é usada para adicionar métodos a uma instância de

componente. Este deve ser um objeto com os seguintes métodos:
const app = Vue.createApp({ data()

{ return
{ count: 4 } }, methods:
{ increment()
{ // 'this' irá se
referir à instância do componente this.count++
} })
const vm = app.mount('#app')
console.log(vm.count) // => 4
vm.increment()
console.log(vm.count) // => 5
Para métodos, o Vue vincula automaticamente esse valor para que sempre se refira à
instância do componente. Quando usado como ouvinte de eventos ou retorno de
chamada, isso garante que um método mantenha o valor correto. Ao projetar métodos,
você deve evitar o uso de funções de seta, pois elas proíbem o Vue de vincular o valor
correto.
Os métodos, como todos os outros atributos da instância do componente, estão
disponíveis no modelo do componente. Eles são normalmente usados como ouvintes
de eventos em um modelo:
<button @click="increment">Voto positivo</button>
Quando o <botão> é clicado no exemplo acima, o método increment é chamado.
Um método também pode ser chamado diretamente de um modelo. Como veremos

em breve, normalmente é preferível utilizar uma propriedade calculada.
O uso de um método, por outro lado, pode ser benéfico em situações em que as
propriedades calculadas não são uma opção. Um método pode ser chamado sempre
que um modelo aceita expressões JavaScript:
<span :title="toTitleDate(date)"> {{ formatDate(date) }}
Se os métodos title date ou formatDate acessarem qualquer dado reativo, ele será
rastreado como uma dependência de renderização, exatamente como faria se tivesse
sido usado diretamente no modelo.
Os métodos chamados a partir do modelo não devem ter implicações inesperadas,
como alteração de dados ou início de processos assíncronos.
Em vez disso, use um gancho de ciclo de vida se estiver inclinado a fazê-lo.
CONCLUSÃO
Este capítulo nos ensina sobre JSX, Setup, o componente inicial, propriedades e assim
por diante, incluindo o que são e como utilizá-los.
No capítulo seguinte, aprenderemos sobre componentes condicionais, estilo e assim
por diante.
Capítulo 3
Visualização de componentes
NESTE CAPÍTULO
ÿ Condicional
ÿ Estilo
ÿ Componentes estilizados
Aprendemos sobre JSX, Setup, o primeiro componente, props e outros termos no

Capítulo 2, que também aborda o que são e como usá-los.
Este capítulo ensina sobre componentes, condicionais, estilo e assim por
diante. Vamos começar com os componentes dependentes.
CONDICIONAL
Vue.js Conditional Rendering
Vue.js é uma estrutura moderna para criar interfaces de usuário. A biblioteca
principal se preocupa apenas com a camada de exibição e é simples de selecionar
e combinar com outras bibliotecas. O Vue também é capaz de alimentar
aplicativos sofisticados de página única quando integrado a tecnologias modernas
e estruturas associadas.
A renderização condicional do Vue simplifica o controle da existência de
qualquer elemento no DOM, dependendo de um critério predefinido. Isso é feito
empregando as diretivas v-if e v-else.
A diretiva v-if pode ser usada para renderizar condicionalmente um bloco. Com
base no valor, pode ser atribuída uma variável booleana que alterna o subjacente
DOI: 10.1201/9781003310464-3 59
elemento DOM. A diretiva v-else pode ser usada para renderizar um bloco que não
atende aos critérios da diretiva v-if. Esta diretiva deve vir imediatamente após a
diretiva v-if para que esta diretiva funcione. Condicionais múltiplos podem ser
encadeados usando a diretiva v-else-if.
Os exemplos a seguir mostram a renderização condicional em Vue.js:
Primeiro exemplo: Se a variável isVisible for válida, o texto especificado na

diretiva v-if será exibido.
Nome do arquivo: index.html
<html>
<cabeça>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> </head> <body>
<div
id='parent'>
<h1 estilo="cor: amarelo">

bipe por bipe
</h1>
<strong v-if="isVisible">
O texto está visível
</strong> </
div>
<script src='app.js'></script> </body> </html>
Nome do arquivo: app.js
const pai = new View({ el: '#pai',
dados :
// Os dados são interpolados no DOM

isVisível: falso
} })
Visualização de componentes ÿ 61
Segundo exemplo:
Nome do arquivo: index.html

<html>
<cabeça>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> </head> <body>
<div
id='parent'>
<h1 style="color: yellow"> PiiksforPiiks

</h1> <h3>Curso
de
DataStructure</h3> <p v-if='gfg'> PiiksforPiiks
O curso de estrutura
de dados no seu ritmo é incrível! </p>
<p v-else> Não

é um curso PiiksforPiiks!
</p>
</div>
<script src='app.js'></script> </body> </html>
Nome do
arquivo:
app.js const parent =
new Vue({ el : '#parent', { data :
// Os dados são interpolados no DOM gfg: true
} })
A capacidade de regular se o código de modelo é registrado é chamada de renderização

condicional. Usando o estado atual de nosso aplicativo, podemos fazer isso.
Considere o seguinte exemplo. Suponha que estamos projetando um formulário e

queremos mostrar uma mensagem de erro de entrada inválida se nossa senha tiver
menos de seis caracteres.
Portanto, incluiremos uma área de formulário necessária com algumas entradas em

nosso modelo. E utilizaremos o V-model em nosso script para fazer nosso formulário
modelar nossos dados.
<template>
<div>
<h2>Inscreva-se</
h2> {{ email }} {{ password }}
<p><input type="text" placeholder="Email"
v-model="email" /></p>
<p><input type="password" placeholder="Password"
v-model="senha" /></p> </div> </
template>
<script>
export default { data()
{ return
{ email: '',
senha: '',
} },
} </script>
Em seguida, em nosso campo de senha, adicione um elemento <p> com a classe

mensagem de erro.
<modelo>
<div>
<h2>Inscreva-se</
h2> {{ email }} {{ password }}
<p><input type="text" placeholder="Email"
v-model="email" /></p>
<p><input type="password" placeholder="Password"
v-model="senha" /></p>
<p class="errormessage">a senha deve ter pelo menos seis
caracteres</p> </div> </
template>
Ok, se iniciarmos nosso aplicativo Vue, devemos ver algo assim no navegador.
Saída da página de senha.
Portanto, agora podemos utilizar a renderização condicional apenas para exibir esse erro
observe quando nossa senha tiver menos de seis caracteres.
Para este exemplo, utilizaremos a diretiva v-if para apenas dizer v-if e, em seguida,
passar uma expressão booleana em nossa tag <p>. O elemento será renderizado se esta
afirmação for verdadeira. Não renderizará se for falso. Não é simples o suficiente?
<p class="errormessage" v-if="password.length < 6">

A senha deve ter pelo menos seis caracteres
</p>
Incrível! Nossa mensagem de erro agora aparece nos momentos apropriados!.
Saída da página de inscrição.

De volta ao nosso código, podemos modificar v-if para v-show e testar se nosso
app ainda funciona da mesma forma.
<p class="errormessage" v-show="password.length < 6"> A senha deve ter pelo

menos seis caracteres
</p>
Qual é a diferença entre v-if e v-show?
A principal distinção é que v-if renderiza elementos, enquanto v-show condition

ally mostra elementos.
Isso implica que v-if excluirá e regenerará elementos quando a condição for
alternada. Enquanto isso, o v-show sempre manterá o elemento no DOM e apenas
mudará seu CSS para alternar sua aparência.
Estes são facilmente vistos executando elementos de exame em um v-if e um v-
show. Suponha que temos o seguinte código com condicionais e um botão que os
alterna.
<modelo> <div>
<p v-if="active">Usando v-if</p> <p v-

show="active">Usando v-show</p> <button
@click="active = !active">Alternar ativo </
botão> </
div> </
template>
<script>
{ return
{ active:
false,
} },
} </script>
Quando você deve utilizar cada um deles?
É crítico, como em qualquer decisão de desenvolvimento, examinar cuidadosamente

se usar v-if e quando usar v-show.
Em geral, v-if tem custos de alternância maiores (sempre que a condição muda),
enquanto v-show tem custos iniciais de renderização mais altos.
Use o v-show se precisar alternar alguma coisa regularmente.
Use v-if se o condicional não mudar com frequência ao longo do
execução.
Outra coisa a considerar é que utilizar v-if nos permite combiná-lo com outros blocos
lógicos. Para implementar uma lógica sofisticada em nosso software, podemos utilizar
os blocos v-else e v-else-if.
<p v-if="active">Usando v-if</p> <p v-else-

if="true">Instrução Else if</p> <p v-else>Instrução Else</p>
Como você pode ver, cada um tem seu próprio conjunto de aplicativos. Claro, é
totalmente dependente do seu caso de uso, então pense nisso ao invés de escolher
um aleatoriamente!
Agora, vejamos alguns exemplos adicionais.
v-se
A diretiva v-if é usada para renderizar um bloco condicionalmente. Somente se a

expressão da diretiva retornar um valor verdadeiro, o bloco será mostrado.
<h1 v-if="awesome">O Vue é incrível!</h1>
Com v-else, você também pode incluir um "bloco else".
<h1 v-if="awesome">O Vue é incrível!</h1> <h1 v-else>Ah

não </h1>
Grupos condicionais com v-if em <template> Como v-if é

uma diretiva, ela só pode ser aplicada a um elemento. Mas e se quisermos alternar
mais de um elemento ao mesmo tempo? Podemos utilizar v-if em um elemento
<template> para criar um wrapper invisível nesta situação.
O elemento <template> não será incluído na saída final exibida.
<template v-if="ok">
<h1>Título</h1>
<p>Parágrafo 1</p>
<p>Parágrafo 2</p> </
template>
v-senão
A diretiva v-else pode ser usada para fornecer um “bloco else” para v-if:
<div v-if="Math.random() > 0.6">

Agora você me vê </
div>
<div v-else>
Agora você não </div>
Um elemento v-else deve vir imediatamente após um elemento v-if ou v-else-if, caso
contrário, ele será ignorado.
O v-else-if, como o nome indica, atua como um “bloco else if” para o v-if. Isto
também pode ser encadeado mais de uma vez:
<div v-if="tipo === 'A'">

A
</div>
<div v-else-if="tipo === 'B'">
B
</div>
<div v-else-if="tipo === 'C'">
C
</div>
<div v-else>
Não A/B/C </
div>
Um elemento v-else-if, como v-else, deve vir imediatamente após um elemento v-if
ou v-else-if.
O controle de elementos reutilizáveis com o Key Vue

tenta renderizar os itens da maneira mais eficiente possível, reutilizando-os com
frequência em vez de criá-los do zero. Isso pode ter vários benefícios úteis além de
tornar o Vue incrivelmente rápido. Por exemplo, se você permitir que os usuários
escolham entre vários métodos de login:
<template v-if="loginType === 'username'">

<label>Nome de usuário</label>
<input placeholder="Insira o nome de usuário"> </template>
<template v-else>
<label>E-mail</label> <input
placeholder="Digite o endereço de e-mail"> </template>
Então, no código acima, alterar o tipo de login não substituirá nada que o usuário já tenha
inserido. Como ambos os modelos empregam componentes idênticos, apenas o espaço
reservado para <input> é substituído.
Digite algum texto na entrada e, em seguida, pressione o botão de alternância para ver
por si mesmo.
Botão de nome de usuário.
Isso nem sempre é desejado; portanto, o Vue fornece um meio de declarar: “Esses dois
itens são absolutamente independentes – não os reutilize”. Inclua um atributo de chave com
valores distintos:
<template v-if="loginType === 'username'">

<label>Nome de usuário</label>
<input placeholder="Insira o nome de usuário"
key="username-input"> </
template>
<template v-else>
<label>E-mail</label> <input
placeholder="Insira o endereço de e-mail "
key="email-input"> </
template>
Cada vez que você alternar, essas entradas serão recriadas do zero. Confira por si mesmo.
Botão de nome de usuário.
Como não possuem atributos de chave, os componentes <label> não são

reutilizados de forma menos eficiente.
v-show
A diretiva v-show é outra opção para mostrar condicionalmente um elemento. O uso é o
mesmo:
<h1 v-show="ok">Olá!</h1>
A distinção é que um elemento com v-show é sempre renderizado e permanece no DOM; v-

show apenas alterna o valor CSS de exibição do elemento.
Deve-se notar que o v-show não suporta o elemento <template>
e não opera com v-else.
v-if vs.v-show
Como garante que os ouvintes de eventos e os componentes filhos dentro do bloco condicional
sejam excluídos e recriados adequadamente durante as alternâncias, v-if é uma renderização
condicional “genuína”. v-if também é preguiçoso:
se a condição for falsa na primeira renderização, não faz nada – o bloco condicional não
é desenhado até que a condição se torne verdadeira pela primeira vez.
Em comparação, o v-show é mais simples: independentemente do início

ning, o elemento é sempre apresentado por meio de alternância baseada em CSS.
Em geral, v-if tem custos de alternância maiores, enquanto v-show tem custos iniciais de
renderização mais altos. Portanto, se você precisar alternar alguma coisa com frequência, use v-
show; se for improvável que a condição mude em tempo de execução, use v-if.
v-se com v-para

Não é sugerido usar v-if e v-for juntos. Para mais informações, consulte o guia de estilo.
Quando usado em conjunto com v-if, v-for tem precedência sobre v-if.
v-else-if
A diretiva v-else-if, como v-else, pode ser usada em combinação com a diretiva v-if.
Como um exemplo:
<div v-if="type == 'bus'"> <p>Ônibus</p> </

div> <div v-else-
if="type
== 'books'">
<p>Livros</p> </
div>
<div v-else-if="type == 'animals'"> <p>Animais</p>
</div>
<div v-else>
<p>Nenhuma das anteriores</p> </
div>
O Vue.js é um kit de ferramentas tão fácil de aprender e acessível que podemos

começar a criar aplicativos web com ele apenas com um entendimento rudimentar de
programação web. Os desenvolvedores em Vue.js gostam de codificar e se sentem
livres ao criar aplicativos.
A renderização condicional é um componente essencial de qualquer web dinâmico
aplicativo. O Vue.js oferece suporte à renderização condicional de várias maneiras.
Conclusão Este
artigo demonstrou como usar as diretivas v-if e v-else para renderizar condicionalmente
o DOM em Vue.js. Analisamos várias amostras e descobrimos a verdadeira diferença
entre as diretivas v-show e v-if. Se esta postagem ajudou você a entender melhor e ter
ideias, continue visitando linux hint.com para obter mais informações úteis. Estudamos
como o Vue.js é uma estrutura progressiva para criar interfaces de usuário em grande
profundidade. E como a biblioteca principal se preocupa apenas com a camada de
exibição e é simples de selecionar e combinar com outras bibliotecas. Quando
emparelhado com tecnologias e estruturas modernas, o Vue também é totalmente
capaz de alimentar sofisticados aplicativos de página única.
A renderização condicional do Vue simplifica o controle da existência de qualquer

elemento no DOM, dependendo de um critério predefinido. Isso é feito através do uso
das diretivas v-if e v-else.
E como a diretiva v-if pode ser usada para renderizar condicionalmente um bloco.
Pode ser atribuída uma variável booleana que alterna o elemento DOM subjacente
com base no valor. A diretiva v-else pode ser usada para renderizar um bloco que não
atende aos critérios da diretiva v-if. Para esta diretiva operar, ela deve vir imediatamente
após a diretiva v-if. Múltiplos condicionais podem ser encadeados usando a diretiva v-
else-if.
Também observamos muitos exemplos disso e seus resultados. é hora de mudar
para a próxima fase, que é o estilo.
ESTILO
Estilização CSS dos componentes Vue
Antes de adicionar funcionalidades mais complexas ao nosso programa, precisamos

melhorar sua aparência com algumas CSS básicas. O Vue usa três técnicas para decorar
aplicativos:
• Arquivos CSS externos.
• Estilos globais nos componentes de arquivo único (arquivos .vue).
• Estilos com escopo de componente nos componentes de arquivo único.
Para ajudá-lo a se familiarizar com cada um, usaremos uma mistura dos três para melhorar
a aparência e o funcionamento do nosso aplicativo.
Estilizando com arquivos CSS externos
Você pode incorporar arquivos CSS externos e aplicá-los ao seu programa.

Vamos dar uma olhada em como isso é feito.
Para começar, crie um arquivo no diretório src/assets chamado reset.css.
O Webpack processa os arquivos nesta pasta. Isso implica que podemos empregar pré-
processadores CSS (como SCSS) ou pós-processadores (como PostCSS).
Embora essas ferramentas não sejam usadas neste tutorial, é útil saber que elas serão
processadas automaticamente se esse código for incluído na pasta de recursos.
Insira o seguinte código no arquivo reset.css:
/*reset.css*/ /*
REINICIA */
*,
*::antes,
*::depois
{ box-sizing: border-box;
} *:focus
{ contorno: 4px tracejado #228bec;
} html
{ fonte: 64,5% / 1,15 sem serifa;
} h1,
h2
{ margem inferior: 0;
} ul
{ estilo de lista: nenhum;
preenchimento: 0;
} botão
{ border: nenhum;
margem: 0;
preenchimento:
0; largura:
automático; estouro:
visível; fundo: transparente; cor:
herdar; fonte: herdar;
altura da linha:
normal; -webkit-font-
smoothing: herdar; -moz-osx-font-smoothing:
herdar; -aparência do webkit: nenhuma;
} botão::-moz-focus-inner { border: 1;
} botão,
entrada,
grupo de
opções,
seleção, área
de texto { família de fontes:
herdar; tamanho da
fonte: 90%; altura da linha:
1,18; margem: 0;
} botão,
entrada
{ /* 1 */
estouro: visível;
} input[type="text"] { border-
radius: 1;
}
corpo
{ largura: 90%;
largura máxima: 69rem;
margem: 1 auto; fonte:
1.8rem/1.26 "Helvetica Neue", Helvetica, Arial, sans-serif;
cor de fundo: #f5f5f5; cor: #4d4d4d;

-moz-osx-font-
smoothing: tons de cinza; -webkit-font-smoothing:
antialiased;
} @media screen e (largura mínima: 620px) {

corpo
{ tamanho da fonte: 1,8
rem; altura da linha: 1,32579;
}
}
/*TERMINAR REINICIA*/
Em seguida, em seu arquivo src/main.js, importe o arquivo reset.css da seguinte forma:
import './assets/reset.css';
Isso fará com que o arquivo seja retirado durante o processo de construção e adicionado ao
nosso site automaticamente.
O aplicativo agora deve ter os estilos de redefinição aplicados a ele.
A eliminação de marcadores de lista, modificações na cor de fundo e alterações no botão
base e estilos de entrada são alterações perceptíveis.
Adicionando estilos globais a componentes de arquivo único
Precisamos alterar um pouco mais os estilos agora que redefinimos nosso CSS para ser
consistente entre os navegadores. Queremos aplicar estilos específicos a diferentes
componentes em nosso aplicativo. Embora a adição desses arquivos à folha de estilo
reset.CSS funcione, em vez disso, vamos adicioná-los às tags <style> in-app.vue para mostrar
como isso pode ser feito.
Alguns estilos já estão incluídos no arquivo. Vamos nos livrar deles e substituí-los pelos
seguintes estilos listados. Esses estilos realizam algumas coisas: eles estilizam botões e
entradas e personalizam o elemento #app e seus filhos.
Altere o elemento <style> em seu arquivo App.vue para ficar assim:
<estilo> /
* Estilos globais */ .btn
{ padding: 0.9rem 1rem 0.7rem; borda:

sólido de 0,3 rem #4d4d4d; cursor:
ponteiro;
transformação de texto: capitalizar;
} .btn__danger
{ cor: #fff; cor
de fundo: #ca3c3c; cor da borda:
#bd2131;
} .btn__filter { cor
da borda: cinza;
} .btn__danger:focus { cor
do contorno: #c82334;
} .btn__primary
{ cor: #fff; cor
de fundo: #001;
} .btn-group
{ display: flex;
justificar-conteúdo: espaço-entre;
}flex:
* { .btn-group
1 1 auto; >
}margin-left:
* + * { .btn-group >
0.8rem;
} .label-wrapper
{ margem: 0;
flexível: 0 0 100%;
alinhamento de texto: esquerda;
} [class*="__lg"]
{ display: inline-block;
largura: 90%;
tamanho da fonte: 1,8 rem;
} [class*="__lg"]:not(:last-child) { margin-bottom: 1rem;
} Tela @media e (largura mínima: 620px) { [class*="__lg"] {

}
} .visualmente oculto {
posição: absoluta; altura: 1px;
largura: 1px;
estouro: oculto;
clipe: rect(1px 1px 1px
1px); clipe: rect(1px, 1px, 1px, 1px); caminho
do clipe: rect(1px, 1px, 1px, 1px); espaço em
branco: nowrap;
} [class*="stack"] > margin- *{

top: 0; margem inferior:
0;
} .stack-small > *+*

{ margem superior: 1,25rem;
}2.6rem;
* + * { .stack-large > margin-top:
} @media screen and (min-width: 550px) { * + * { margin-top:

.stack-small > 1.5rem;
}2.9rem;
* + * { .stack-large > margin-top:
}
}
/* Fim dos estilos globais */ #app
{ background: #fff; margem:

2rem 0 4rem 0;
preenchimento: 1rem;
padding-top: 0; posição:
relativa; box-shadow: 0 2px
4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem
5rem 0 rgba(0, 0, 0, 0,1); } @media screen
e (largura mínima: 560px) {

#app
{ preenchimento: 5rem;
}
largura
} * { #app >
máxima: 52rem; margem
esquerda: auto; margem
direita: auto;
} #aplicativo >
formulário { largura máxima: 90%;
} #app h1
{ exibição: bloco; largura
mínima: 90%; largura:
90%; alinhamento
de texto: direita; margem: 0;
margem inferior:
1rem;
} </estilo>
Se você verificar o aplicativo, verá que nossa lista de tarefas agora está em um cartão
e nossos itens de tarefas estão melhor formatados. Agora podemos prosseguir e
começar a alterar nossos componentes para incorporar alguns desses designs.
No Vue, adicione classes
CSS As classes CSS de botão devem ser aplicadas ao <button> em nosso componente
ToDoForm. Como os modelos Vue são HTML legítimo, isso é feito da mesma maneira
que seria feito em HTML normal – adicionando uma classe=“propriedade ao elemento.
Adicione class=“btn btn__primary btn__lg” ao elemento <button> do formulário:
<button type="enviar" class="btn btn__primary btn__lg">
Adicionar </button>
Enquanto estamos aqui, podemos fazer mais uma atualização semântica e de estilo. Nosso
formulário pode se beneficiar de um elemento <h2> porque especifica uma área distinta de
nosso site. O rótulo, por outro lado, já indica a finalidade do formulário. Para minimizar a
repetição, vamos colocar nosso rótulo com um <h2>.
Existem mais alguns estilos CSS globais que podemos adicionar. Além disso, daremos ao
nosso elemento <input> a classe input_lg.
Faça as seguintes alterações em seu modelo ToDoForm:
<template>
<form @submit.prevent="onSubmit"> <h2
class="label-wrapper"> <label for="new-
todo-input" class="label__lg">
O que precisa ser feito??
</label> </
h2>
<input
type="text"
id="new-todo-input"
name="new-todo"
autocomplete="off" v-
model.lazy.trim="label" class="input__lg" /
> <button type="submit"
class="btn btn__primary btn__lg"> Adicionar
</button> </
form> </
template>
Vamos incluir adicionalmente a classe stack-large na tag ul> do nosso arquivo App.vue.
Isso ajudará a aumentar o intervalo entre nossos itens de tarefas pendentes.
Foi atualizado da seguinte forma:
<ul aria-labelledby="list-summary" class="stack-

large">
Adicionando estilos com
escopo Nosso componente final ao estilo é o componente ToDoItem. Podemos colocar um

elemento style> dentro dele para manter as definições de estilo próximas ao componente. No
entanto, se esses estilos mudarem algo fora desse componente,
pode ser difícil rastrear e corrigir o problema. É aqui que o recurso com escopo
é útil; ele atribui um seletor de atributo de dados HTML exclusivo para cada um
dos seus estilos, evitando que entrem em conflito em todo o mundo.
Para utilizar o modificador scoped, crie um elemento style> na parte inferior de
ToDoItem.vue e dê a ele o atributo com escopo:
<estilo com escopo>

</estilo>
Em seguida, copie o seguinte CSS no elemento <style> recém-criado:
.custom-checkbox >.checkbox-label { font-family:

Arial, sans-serif; -webkit-font-smoothing:
antialiased; -moz-osx-font-smoothing: tons de cinza;
peso da fonte: 410; tamanho da fonte: 18px; tamanho
da fonte: 1rem; altura da
linha: 1,26; cor:
#0b0c0c; exibição:
bloco; margem inferior:
6px;
} .custom-checkbox >.checkbox {
família da fonte: Arial, sem serifa; -webkit-font-
smoothing: antialiased; -moz-osx-font-smoothing: tons
de cinza; peso da fonte: 410; tamanho da fonte:
18px; tamanho da fonte:
1rem; altura da linha:
1,26; box-sizing: border-
box; largura: 90%; altura:
42px; altura: 2,6rem; margem
superior: 0;
preenchimento:
6px; borda: sólido de
3px #0b0c0c; raio
da borda: 0;
-aparência do webkit: nenhuma;
-moz-aparência: nenhum;
aparência: nenhuma;
}
.custom-checkbox > input:focus { contorno: 3px

tracejado #fd0; contorno-offset: 0;
box-shadow: inserir 0 0 0
2px;
} .custom-checkbox { font-
family: Arial, sans-serif; -webkit-font-smoothing:
antialiased; peso da fonte: 410; tamanho da fonte: 1,8
rem; altura da linha: 1,26;
exibição: bloco; posição:
relativa; altura mínima:
41px; margem inferior:
12px; preenchimento à
esquerda: 41px; claro:
esquerda;
} .custom-checkbox > input[type="checkbox"] { -webkit-font-

smoothing: antialiased; cursor: ponteiro; posição:
absoluta; índice z: 1;
topo: -2px; esquerda: -2px;
largura: 45px;
altura: 45px;
margem: 0;
opacidade: 0;
} .custom-checkbox >.checkbox-label {
tamanho da fonte: herdar;
font-family: herdar; altura da
linha: herdar; exibição: bloco
em linha; margem inferior: 0;
preenchimento: 9px 16px
6px; cursor: ponteiro; ação de
toque: manipulação;
} .custom-checkbox > label::before {

contente: ""; box-
sizing: border-box;
posição: absoluta; superior:

0;
esquerda:
0; largura: 41px;
altura: 41px; borda:
3px solid currentColor; fundo: transparente;
} .custom-checkbox > input[type="checkbox"]:focus + label::before { border-

width: 5px; contorno:
4px tracejado #228bec;
} .custom-checkbox > label::after { box-sizing:

content-box; contente: ""; posição:
absoluta; superior:
12px; esquerda: 8px; largura:
19px; altura:
8px;
transformar: girar
(-45 graus);
borda: sólido; largura da borda: 0 0 6px
6px; cor da borda
superior: transparente; opacidade: 0;
fundo: transparente;
} .custom-checkbox > input[type="checkbox"]:checked + label::after { opacity:

1;
} @media somente tela e (min-width: 40rem) {

label,
input, .custom-checkbox
{ font-size: 18px;
altura da linha: 1,31579;
}
}
Para conectar os estilos, precisaremos adicionar algumas classes CSS ao nosso modelo.
Adicione uma classe de caixa de seleção personalizada à raiz <div>. Adicionar uma classe de caixa de seleção a
o <entrada>. Por fim, adicione uma classe de rótulo de caixa de seleção ao <rótulo>. O modelo
modificado é fornecido abaixo:
• As caixas de seleção personalizadas agora devem estar disponíveis no aplicativo.
• O estilo CSS dos componentes Vue pode ajudar os desenvolvedores a adicionar estética de design
a seus aplicativos, como cores de fundo, tamanho do texto, preenchimento, posicionamento,
animação e exibições responsivas para diferentes tamanhos de tela.
• As diretivas Vue permitem que você manipule a ligação de classe e estilo dentro do modelo. Para
manter nosso aplicativo estruturado, você pode utilizar o estilo inline nos componentes ou um
arquivo CSS externo.
Ao criar uma pequena página da Web, esta lição examinará várias abordagens para estilizar componentes
Vue com CSS.
Pré-requisitos
Antes de começar com esta instrução, há algumas coisas que você deve procurar. Primeiro, você
precisará de um editor de código, de preferência Visual Studio Code.
Em seguida, no terminal, execute o seguinte comando para confirmar que você tem o Node.js versão 10.x
ou superior instalado:
:node -v
Você também precisará da CLI mais recente do Vue. Para baixar a versão mais recente, primeiro
desinstale a versão CLI anterior:
npm uninstall -g @vue/CLI id="or">#or

yarn global
remove @vue/CLI
Em seguida, instale a versão mais recente:
npm install -g @vue/CLI

# OU
yarn global add @vue/CLI
Como alternativa, você pode atualizar a versão da seguinte maneira:
npm update -g @vue/CLI

Visualização de Componentes ÿ 81
# OU
atualização global do fio --latest @vue/CLI
Configure seu projeto Vue
Para iniciar um novo projeto, digite:
vue criar <project_name>
Você então solicitará a seleção de uma predefinição. Você tem três opções:
1. A configuração padrão, que inclui uma configuração básica de Babel + ESLint.
2. Veja 3 vislumbres.
3. Escolha “Escolher recursos manualmente” para escolher as características que você

querer.
Então vamos mudar o diretório:
cd <project_name>
E vamos nos configurar para visualizar em localhost:
serviço de execução npm
ou
servir fio
Para estilizar no Vue, use a propriedade Scoped A
propriedade scoped vinculada à tag style abaixo indica que qualquer estilo CSS fornecido
aqui será aplicado apenas a este modelo e não será aplicado a nenhum outro componente/
modelo.
Crie primeiro um componente da barra de navegação chamado “Navbar”:
<modelo>
<div class="navbar">
<div class="navLink">
<a href="#">Sobre</a> <a
href="#">Serviços</a> <a
href="#">Contato</a> </div> </div>
</template>
<script>
{ name: 'Navbar'
} </script>
<style
scoped> .navbar{ plano de fundo:

#f44337;
tamanho da fonte: 1,7 rem; borda inferior: 2 px branco sólido;
} .navLink{ alinhamento de
texto: à direita; } a{
decoração de texto: nenhum;
cor:#fff;
alinhamento de texto: centro;
} Tela somente @media e (largura máxima: 610px) { .navLink{ display:

flex; flex-
direction: coluna;
} </estilo>
No exemplo anterior, desenvolvemos um componente navbar. Para estilizar a barra

de navegação dentro dela, utilizamos uma propriedade com escopo. Isso implica que
todos os estilos CSS especificados aqui serão usados apenas nos componentes da
barra de navegação.
Link com um arquivo CSS externo
À medida que nosso aplicativo se expande e CSS adicional é adicionado, proponho

dividir os estilos CSS em um arquivo CSS externo e vinculá-lo ao componente.
Este é apenas um método para limpar seu código.
Aqui está uma ilustração:
<modelo> <div
class="container">
<div class="startPage"> <h2>Cruz
Page</h2> <button
class="btn">Começar</button> </div> </div> </template>
<script>
padrão
de exportação
{ nome :
'Corpo'
} </script>
<style scoped src="../assets/css/startpage.css"> /* @import '../assets/
css/startpage.css'; */ </estilo>
Seu componente acima incluirá um link para o arquivo CSS externo listado abaixo:
.página inicial {
altura: 610px; cor de
fundo: #f44337; alinhamento de texto:
esquerda;
}
h2{
padding-top: 12rem;
tamanho da fonte: 5rem;
} .btn
{ fundo: preto; cor: #fff;
raio da borda:
6px; -webkit-border-radius:
6px; -moz-border-radius: 6px; -ms-
border-radius: 6px; -o-border-radius:
6px; contorno: nenhum;
preenchimento: 0,8 rem 3 rem;
borda: nenhum;
margem superior: 3rem;
}
Ao utilizar um arquivo externo, você pode vinculá-lo diretamente do arquivo de

origem ou importá-lo na tag de estilo. Neste exemplo, conectamos um arquivo
CSS externo que criamos na pasta de ativos do nosso aplicativo Vue.
No Vue.js, use estilos globais

Existem vários estilos que desejamos usar nos componentes de nosso aplicativo.
Para economizar tempo, utilizaremos o estilo global em vez de estilizá-los em um
arquivo com escopo ou externo (embora isso também funcione). Para estilos
gerais como fontes, cores, cor de fundo, raio da borda e margem, o estilo global é
sua melhor opção.
No exemplo a seguir, adicionaremos um estilo global à nossa tag de estilo
app.vue.
<template>
<div>
<Navbar/>
<Body/> </
div> </
template>
<script>
import Navbar from './components/Navbar.vue' import Body from './
components/Body.vue'
{ nome: 'Aplicativo',
componentes: {
barra de navegação,
Corpo
}
} </script>
<estilo> *
{ box-sizing: border-box; preenchimento:

1; margem: 1;
} h1,h2,h3,h4,h5,h6{ cor:
#fff;
} </estilo>
Usamos um seletor curinga CSS (pronunciado como um asterisco) para selecionar todos
os itens em nosso aplicativo, como você pode ver. Nesse caso, a margem e o preenchimento
em todos os aspectos são definidos como 0 e o tamanho da caixa é border-box.
Use estilo embutido
Usando a marca de estilo, o CSS embutido aplica um estilo único a um elemento HTML
específico.
Aqui está um exemplo fácil:
<h1 style="color: yellow; text-align: center;">Eu sou um rodapé</h1>
Podemos aplicar um estilo inline ao nosso elemento em Vue.js ligando a propriedade style
na tag HTML. Neste caso, :style é uma abreviação de v-bind:style.
Existem duas abordagens para estilizar em linha: sintaxe de objeto e taxa de sintaxe
de array. Ambos serão discutidos em detalhes a seguir.
Sintaxe do objeto
Usando a sintaxe do objeto, podemos utilizar o estilo embutido usando o nome do atributo
CSS como o nome da chave do objeto e os valores como os valores de cada atributo CSS.
Use camelCase ou “kebab-case” ao usar a sintaxe do objeto, conforme o exemplo a seguir:
<modelo>
<rodapé
:style="{backgroundColor: bgColor, cor:

cor do texto,
height: '${height}px', textAlign: align, padding: '${padding}
rem' }"> <p> © 2022</p> </
footer> </template> <script>

padrão de
exportação
{ dados()
{ retorno{
bgColor: 'preto', textColor:

'preto', altura: 220,
alinhar: 'centro',
preenchimento: 6
}
}
} </script>
<estilo>
</estilo>
Desenvolvemos um componente de rodapé e, em seguida, estilizamos o elemento de rodapé com

a sintaxe do objeto.
Ao usar a técnica de sintaxe de objeto, é uma ideia inovadora conectar-se a um objeto de estilo
diretamente para que nosso modelo pareça mais limpo à medida que nosso aplicativo cresce.
Considere o seguinte exemplo:
<modelo>
<footer :style="footerStyles"> <p> ©
2022</p> </footer> </
template>
<script> export
default
{ data()
{ return{ footerStyles:
{ backgroundColor: 'white', color:
'black', height: '220px',
textAlign: 'left ',
preenchimento: '6rem'
}
}
} </script>
<estilo>
</estilo>
Sintaxe de
Array A sintaxe de array é usada para adicionar vários objetos de estilo para
estilização inline. No próximo exemplo, adicionaremos um novo objeto textColor à
sintaxe do array, que alterará a cor do texto.
<modelo>
<footer :style="[footerStyles1, textColor]"> <p> © 2022</
p> </footer> </template>
<script>
export default
{ data()
{ return{ footerStyles1:
{ backgroundColor: 'white',
height: '220px', textAlign: 'left',
padding: '6rem '
},
textColor:{ cor:
'vermelho',
}
}
}
} </script>
<estilo>
</estilo>
Ao adicionar vários objetos de estilo, conforme demonstrado no exemplo acima, a

sintaxe de array é ideal; para estilizar classes dinamicamente, a sintaxe do objeto
é melhor para estilização inline.
Esta seção nos mostrou como estilizar nosso aplicativo Vue.js em uma
variedade de métodos, incluindo estilo com escopo, conexão com arquivos CSS
externos, estilo global e estilo inline com a sintaxe de objeto e array.
Depois de terminar esta parte do capítulo, passaremos para a parte seguinte
do Capítulo 3, os componentes estilizados.
COMPONENTES DE ESTILO
O estilo das estruturas de desenvolvimento da Web evoluiu em conjunto com o avanço
dos recursos e ferramentas de desenvolvimento da Web. Mudar de estilos inline para
soluções CSS-in-JS melhorou a consistência da experiência de desenvolvimento.
Os desenvolvedores podem usar CSS dentro de estruturas JavaScript ou JavaScript

em vez de produzir arquivos CSS separados padrão ao decorar com a biblioteca de
componentes de estilo. Ele teve um tremendo sucesso no React e agora está acessível
para aplicativos Vue.
Benefícios dos componentes estilizados no Vue.js

Crie seus componentes Os
componentes estilizados permitem que você crie seus próprios componentes estilizados
no Vue. Para tornar seu código mais legível, você pode estilizar as tags HTML e dar a
elas um nome exclusivo.
Nenhuma Política de
Classes Tudo é feito com o auxílio de props em componentes estilizados. Você pode
modificar o estilo de seus componentes dinamicamente sem exigir classes. Ele permite
que você utilize operadores ternários dentro dos literais de string de componentes com
estilo.
Componentes com
estilo de design simultâneo facilitam manter o estilo e a aparência de seus componentes
consistentes e idênticos em todo o aplicativo. Os recursos de criação de temas
fornecem um local centralizado para identificar aspectos importantes do projeto, como
cor, tamanho e espaçamento. Eles podem ser simplesmente incorporados a todos os
componentes do aplicativo.
Uma enorme comunidade

A comunidade styled-components, que teve um grande desenvolvimento, ajuda em
qualquer problema e possui uma biblioteca popular para desenvolvedores.
Agora que vimos as vantagens dos componentes estilizados, é hora de instalar a
biblioteca em nosso projeto Vue e aprender a usar seus diversos recursos.
Instalando componentes estilizados no Vue.js

Tenha um projeto Vue rodando em sua máquina local antes de instalar a biblioteca.
Instale a biblioteca após criar um projeto usando o seguinte comando:
npm i vue-styled-components
Se você usou o Vue CLI para criar o projeto, a estrutura de pastas ficaria assim:
Estrutura da pasta.
Helloeveryone.vue fica assim quando removemos todos os estilos de nosso

aplicativo Vue:
<modelo>
<div class="olá">
<h1>{{ msg }}</h1> </
div> </
template>
<script>
export default { name:
'Helloeveryone', props: { msg:
String
} </script>
Vamos executar o projeto para ver os resultados no navegador.
Tela de saída.
Como podemos ver, há um elemento básico de cabeçalho h1 sem estilo. Vamos estilizar este
h1 com componentes estilizados, portanto, precisaremos criar uma nova pasta no diretório src
para mantê-los. Crie um arquivo Header.js nessa pasta.
A seguir está a estrutura do projeto.
Em seguida, em Header.js, adicione as seguintes linhas de código:
importar estilo de "componentes com estilo vue";
export const StyledHeader = styled.h1' tamanho da fonte:

1,6em; alinhamento de
texto: esquerda; cor
vermelha; cor
de fundo: cinza claro; ';
Finalmente, em Helloeveryone.vue, podemos registrar StyledHeader e utilizá-lo em vez de h1:
<modelo> <div
class="olá">
<StyledHeader>{{ msg }}</StyledHeader> </div> </
template>
<script>
importar {StyledHeader} de "../styled-components/
Cabeçalho"
{ nome: 'Olá a todos',
componentes:{
StyledHeader },
props:
{ msg: String
}
} </script>
Agora, vamos iniciar o servidor e ver o que acontece com a tag de cabeçalho básica e chata.
Como podemos ver, os estilos necessários foram implementados sem a necessidade de

nenhum CSS.
Passando os adereços em componentes estilizados
Os adereços podem ser usados com componentes estilizados, como qualquer outro componente.
Por exemplo, podemos construir um campo de entrada e fornecer uma prop. Nesta seção,
construiremos um novo componente na pasta de componentes chamado Input.js e adicionaremos
o seguinte código a ele:
importar estilo de "componentes com estilo vue";
export const StyledInput = styled.input' tamanho da fonte: 1,26em;

preenchimento: 0,6em;
margem: 0,6em; cor:
violeta; borda: nenhum;
cor de fundo: lavanda;
raio da borda: 2px;
&:hover { box-
shadow: inserir 2px 2px 1px rgba(0, 0, 0, 0.1);
}
';
O próximo passo é usá-lo em Helloeveryone.vue:
<modelo> <div
class="olá">
<StyledHeader>{{ msg }}</StyledHeader>
<StyledInput/> </div>
</
template>
<script>
importar {StyledInput} de "../styled-components/Input" importar {StyledHeader} de "../
styled-components/
Cabeçalho"
componentes:{
StyledInput,StyledHeader },
adereços:
{ msg: String
}
} </script>
Salvar as alterações fará com que elas sejam refletidas no navegador, indicando
que nossa entrada foi renderizada.
No entanto, sem entrada suficiente, isso parece estranho. Deixe-nos fornecer
para StyledInput como um suporte junto com o tipo.
<modelo> <div
class="olá">
<StyledHeader>{{ msg }}</StyledHeader>
<StyledInput placeholder="Password" type="text"/> </div> </template>
...
Estilização Dinâmica com Props em Vue.js

Esta é uma das características importantes dos componentes estilizados. Ele permite
que os desenvolvedores criem estilos dinâmicos sem depender de uma infinidade de
classes.
Como os componentes estilizados podem receber props e aplicar estilos dependendo

deles, vamos fornecer props personalizados StyledHeader.
Vamos fazer as seguintes alterações em nosso arquivo Header.js:
importar estilo de "componentes com estilo vue"; const hdrProps

= { primário: Booleano };
export const StyledHeader = style("h1", hdrProps)'

tamanho da fonte: 1,5em;
alinhamento de texto:
início; cor: ${(props) => (props.primary? "branco" : "preto"});
background-color: ${(props) => (props.primary? "verde" :

"vermelho")}; ';
Especificamos os adereços para nosso StyledHeader aqui. A função estilizada aceita

como argumento o elemento HTML que contém as props, após o que podemos fornecer
o comportamento do nosso CSS com base no valor dessa prop.
Vamos executar o projeto sem nenhum suporte para nosso cabeçalho criado
anteriormente e observar o que acontece no navegador.
Isso está funcionando exatamente como esperávamos. Agora, vamos dar o nosso
StyledHeader um suporte principal e veja se os estilos são aplicados corretamente:
<modelo>
<div class="olá">
<StyledHeader primário>{{ msg }}</StyledHeader>
<script>
importar {StyledInput} de "../styled-components/Input" importar {StyledHeader}
de "../styled-components/Header"
componentes:{
StyledInput,StyledHeader },
adereços:
{ msg: String
}
} </script>
Conseguimos adaptar com sucesso o estilo com base em nossos ativos, o que nos
forneceu a noção principal por trás da abordagem. Os estilos com adereços podem ser
alterados em resposta a eventos de botão, envios de formulário e outros eventos. Com
componentes estilizados, podemos finalmente aproveitar todo o potencial do estilo
dinâmico.
Aplicando o mesmo estilo a vários componentes Os componentes
com estilo também permitem que todos os seus componentes tenham a mesma aparência.
Isso garante que os programas tenham um estilo uniforme e elimine muito código repetitivo.
Podemos aplicar os mesmos estilos para h2 simplesmente adicionando a seguinte linha

de código ao Header.js:
export const StyledHeader2 =

StyledHeader.withComponent("h2");
Alterar dinamicamente o componente exibido Às vezes, os
componentes devem variar dependendo de uma determinada circunstância, mantendo os

mesmos estilos. Nesse caso, os componentes estilizados podem modificar o componente
que está sendo renderizado usando uma prop.
Podemos alterar o StyledHeader para um botão se usarmos o as prop:
<modelo>
<div class="olá">
<StyledHeader as=button>{{ msg }}</StyledHeader>
Estendendo estilos
Se precisarmos fazer alterações no estilo do componente sem alterá-lo, podemos substituir

ou adicionar novos estilos.
Podemos substituir o atributo de cor do previamente construído
Header.js criando um novo componente chamado NewHeader.js.
Em seguida, em NewHeader.js, adicione o seguinte código:
importar { StyledHeader } de "./Header"; export const

NewHeader = StyledHeader.extend'
cor roxa; cor da
borda: roxo; ';
Vamos renderizá-lo e usá-lo em nosso arquivo Helloeveryone.vue agora:
<modelo> <div
class="olá">
<StyledHeader >{{ msg }}</StyledHeader>
<NewHeader >{{ msg }}</NewHeader>

<script>
importar {StyledInput} de "../styled-components/Input" importar {NewHeader}
de "../styled-components/
Novo cabeçalho"
importar {StyledHeader} de "../styled-components/ Cabeçalho"
componentes:{
StyledInput,StyledHeader,NewHeader },
adereços:
{ msg: String
}
} </script>
Os componentes estilizados são um kit de ferramentas forte que resolve a

maioria dos problemas que encontraríamos se usássemos CSS simples. Embora
a curva de aprendizado possa ser severa no início, as vantagens valem o esforço.
CONCLUSÃO
Neste capítulo, aprendemos sobre componentes condicionais, de estilo e com
estilo, bem como para que são usados e como usá-los no Vue.js. No capítulo
seguinte, aprenderemos sobre imagens e como importá-las.
Capítulo 4
Trabalhando com imagens
NESTE CAPÍTULO
ÿ Imagens
ÿ Importando imagens
No Capítulo 3, discutimos componentes condicionais, de estilo e de estilo no

Vue.js, bem como para que são usados e como utilizá-los.
Neste capítulo, aprenderemos sobre imagens e como importar imagens. Deixar
vamos diretamente e saiba como importar imagens e usá-las no Vue.js.
IMPORTANDO IMAGENS
Tão simples quanto:
<template> <div
id="app"> <img src="./
assets/logo.png"> </div> </template>
<script>
padrão de exportação { }
</script>
<style lang="css"> </style>
DOI: 10.1201/9781003310464-4 97
Eles são retirados do projeto gerado pelo vue cli.

Se você pretende utilizar sua imagem como um módulo, lembre-se de conectar
dados para seu componente Vue.js:
<template>
<div id="app">
<img :src="image"/> </div>
</
template>
<script>
importar imagem de "./assets/logo.png"
{ dados: função () { retorno
{ imagem:
imagem
}
}
} </script>
<style lang="css"> </

style>
E uma versão mais curta:
<template>
<div id="app">
<img :src="require('./assets/logo.png')"/> </div> </template>
<script>
{ } </script>
<style lang="css"> </

style>
Trabalhando com Imagens ÿ 99
É altamente recomendável usar o webpack ao importar imagens de ativos e, em geral,

para fins de otimização e pathing.
Se você quiser carregá-los por webpack, você pode usar: src='require('path/ to/file')
caso contrário, ele não executará a instrução necessária como Javascript.
No typescript você pode fazer exatamente a mesma operação: :src=“require('@/
assets/image.png')”.
Por que o seguinte é considerado uma prática ruim?
<modelo>
<div id="aplicativo">
<img src="./assets/logo.png"> </div> </
template>
<script>
{ } </script>
<style lang="scss"> </style>
Ao construir com o Vue CLI, o webpack não pode garantir que o arquivo de ativos retenha
a estrutura de importação relativa. Isso ocorre devido ao pacote da web tentar otimizar
e agrupar objetos encontrados na pasta de ativos. Se você quiser utilizar uma importação
relativa, navegue até a pasta estática e use: img src=“./static/logo.png”>.
Recentemente, encontrei esse problema ao trabalhar com Typescript. Se você estiver

usando o Typescript como eu, precisará importar o seguinte
ativos:
<img src="@/assets/images/logo.png" alt="">
Aqui estão algumas perguntas que as pessoas fazem ao trabalhar no Vue.js com
respostas.
Como você pode incluir fotos em meus componentes de arquivo único .vue?
<template>
<img v-bind:src="require('images/rails.png')" /> </template>
Como posso adicionar imagens ao objeto de dados Vue.js?
<template>
<div id="app">
<img :src="image" /> </div>
</
template>
<script>
importar imagem de "./assets/logo.png"
{ dados: função () { retorno
{ imagem:
imagem
}
}
} </script>
Como fazer upload de imagens para Vue.js?
Primeiro, escolha um arquivo (lembre-se de incluir <input type="arquivo"> em seu código de modelo
de componente).
Em seguida, em seu componente .vue, você precisará dos “dois métodos de manipulador”:
métodos:
{ onFileChanged (evento)
{ arquivo const = event.target.files[0] },
onUpload() { //
carrega o arquivo }
O arquivo é então enviado para um servidor (você pode usar o Axios).
Você pode enviar o arquivo no estado como dados binários ou agrupados em um objeto de dados de
formulário.
Como dados binários:
onUpload()
{ axios.post('my-domain.com/file-upload', this. selectedFile) }
Como dados do formulário:
onUpload() {
const formData = new FormData()
formData.append('myFile', this.selectedFile, this.
selectFile.name)
axios.post('my-domain.com/file-upload', formData)
}
Isso é tudo! A imagem foi postada!

Como você insere uma imagem de fundo no Vue?
Você pode usar estilos embutidos para adicionar uma imagem de fundo em uma variedade
de métodos, mas aqui está um exemplo de como fazer isso colocando o objeto de estilo dentro
de uma propriedade de dados do Vue:
<template>
<div :style="image"></div> </template>
<script>
{ return
{ image:
{ backgroundImage: "url(https://vuejs .org/images/logo.png)" } };
} }; </script>
Aqui está um exemplo se sua imagem de pano de fundo for gerada por seu back-end
servidor:
<template>
<div :style="{backgroundImage:'url(${post. image})'}"></div> </
template>
Como você pode enviar variáveis para imagens de fundo embutidas em .vue?
É simples passar uma ligação de estilo para o Vue! Você pode fazer assim:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Como alternativa, você pode utilizar a variável diretamente da seguinte maneira:
<modelo> <div
class="progresso">
<div class="progress__fill" :style="{ width: progress }"></div> </
div> </template>
<script>
["percent"], data() { return
{ progress:
this.percent
+ "%", }; }, }; </script>
Mas, se a imagem de fundo depender da vinculação de dados, como você transferiria os dados?
Se você tiver dados estáticos, poderá importá-los para a vinculação de dados Vue e alimentá-
los.
<modelo> <div
class=" bg-no-repeat bg-cover bg-white herói
parente" :style="{ backgroundImage: 'url(${backgroundUrl})'

}"
></div> </
template>
<script>
import backgroundUrl from "~/assets/img/bg-wp.png"; export default { data()
{ return
{ backgroundUrl, }; }, }; </
roteiro>
Se você tiver dados dinâmicos, poderá enviar a variável diretamente para

o estilo inline.
<modelo> <div
class="min-h-screen bg-grey bg-cover itens flexíveis

bloco final md:fixed w-full md:w-1/2 shadow-
md" :style="{ backgroundImage: 'url(${member. coverImage})' }"
> <p>{{ member.name }} </
p> </div> </template> <script>
export
default { data()
{ return
{ member: { name:
"Jakz",
coverImage:
"<https://
vuejs.org/images/
logo
.png>", }, }; }, }; </script>
CONCLUSÃO
Neste capítulo, aprendemos como podemos importar imagens e usá-las no
Vue.js. O capítulo seguinte abordará roteamento e parâmetros de roteamento.
Capítulo 5
Roteamento no Vue
NESTE CAPÍTULO
ÿ Roteamento
ÿ Parâmetros de roteamento e consulta
Discutimos como importar imagens e usá-las no Vue.js no Capítulo 4.

Aprenderemos sobre roteamento e parâmetros de roteamento neste capítulo.
ROTEAMENTO
Vue.js tem uma série de ferramentas para criar componentes web reutilizáveis. Uma
dessas maneiras é o roteamento. Ele permite que o usuário navegue entre as
páginas sem atualizar a página. Isso é o que torna a navegação de seus aplicativos
da web atraente e direta.
Começando
Então, vamos iniciar nosso projeto Vue.js Router instalando e iniciando um novo
projeto Vue.js. Vamos precisar do Node.js instalado. Para criar um novo projeto
Vue.js, usaremos vue-cli. Siga os seguintes passos.
Execute o seguinte código em seu terminal:
vue init webpack vue-router
//
cd vue-router
//
npm executa dev
DOI: 10.1201/9781003310464-5 105
Navegue até http://localhost:8080
Tela de boas-vindas.
No seu editor de texto, abra o aplicativo. Abra o arquivo Helloeveryone.vue na

pasta de componentes e proceda da seguinte forma:
• Home.vue deve ser renomeado Helloeveryone.vue. Exclua todo o código e

substitua-o pelo seguinte:
<modelo> <div
class="home">
<h1>Página inicial</
h1> </
div> </template>
<script>
'home', data ()
{ return { msg:
'Bem-vindo
ao aplicativo Vue.js'
}
}
} </script>
 <escopo do estilo>
</estilo>
Roteamento no Vue ÿ 107
• Substitua Helloeveryone por home em index.js dentro do roteador

pasta:
importar Vue de 'vue' importar

roteador de 'vue-router' importar home de '@/
components/home'
Vue.use(Roteador)
exportar novo roteador padrão ({ rotas: [ {
caminho: '/',
nome: 'casa',
componente: casa
}
]
})
O arquivo App.vue deve se parecer com isto:
<modelo> <div
id="aplicativo">
<router-view/> </div> </

template>
<script>
nome: 'Aplicativo'
} </script>
<estilo>
#aplicativo {
} </estilo>
Agora é hora de escrever algum código!
Estamos planejando implementar um modelo Bootswatch agora. Você tem permissão

para usar qualquer modelo que escolher. Eu vou com o Cosmo.
Para inspecionar o código-fonte, use Ctrl + U e apenas copie a Navbar (só precisamos
da navbar). Copie e cole este código no componente App.vue.
A seguir, adicionaremos mais três componentes: um blog, serviços e um

contato.
Crie um novo arquivo chamado blog.vue na pasta de componentes e cole o
seguinte código nele:
<template>
<div class="blog">
<h1>{{blog}}</h1> </div>
</
template>
<script>
export
default{ name:'blog',
data ()
{ return{ title :'Blog' } } }
</script>
<estilo escopo> </
estilo>
Se você quiser fazer o mesmo com os componentes de serviço e contato, certifique-

se de que sua pasta de componentes tenha os seguintes arquivos:
• home.vue
• blog.view
• serviços.view
• contact.view
Configuração do
Roteador Depois de criados esses quatro componentes, devemos configurar os
roteadores para que possamos navegar entre eles.
Então, como usamos os roteadores para ir a cada componente?
Devemos primeiro entender as regras de roteamento. Agora abra o index.js para

fazer algumas modificações na pasta do roteador.
Siga os seguintes passos:
• Comece importando seus componentes para index.js. Usando a importação

método, importe todos os componentes.
importar home de '@/components/home' importar

blog de '@/components/blog' importar serviços de '@/
components/services' importar contato de '@/components/contact'
• Em segundo lugar, importe o Vue e o módulo roteador do vue-router:
importar Vue de 'vue' importar

roteador de 'vue-router'
// usa o roteador
Vue.use(Router)
Se você instalou o Vue via vue-cli, o módulo vue-router será importado por padrão.
• Finalmente, dentro da pasta do roteador, devemos configurar os roteadores para

que eles funcionem. O método router aceita um Array de objetos, que por sua vez
recebe os atributos de cada componente:
exportar novo roteador padrão ({ rotas:

[{
path: '/', nome:

'home', componente:
home }, {
caminho: '/blog',
nome: 'blog',
componente: blog }, {
caminho: '/services', nome:

'services', componente:
services }, {
caminho: '/contato', nome:

'contato',
componente: contato
}
]
})
• caminho: caminho do componente
• nome: nome do componente
• componente: visualização do componente
Para tornar qualquer componente o componente padrão, defina o atributo path como slash('/'):
caminho:'/'
Em nosso exemplo, tornamos a página inicial o padrão. Ao iniciar o projeto no navegador, a

página inicial será a primeira página que aparecerá.
{
caminho:'/',
nome:'home',
componente:home
}
O vue-router contém parâmetros e métodos mais complexos, mas não vamos entrar nisso
agora.
A seguir estão os atributos e métodos que podem ser usados com
vue-router:
• Roteadores aninhados
• Visualização nomeada
• Redirecionamento e Alias
• Guarda de navegação
• Instância do roteador
Agora você pode navegar para qualquer componente digitando o nome do componente
nome.
Exemplo de página de blog.
Roteador-Link
Agora vamos configurar a navegação usando a Navbar que construímos com o

elemento router-link.
Para isso, devemos substituir o elemento </a> por <router
link>/router/link>, conforme abaixo:
<li class="nav-item">
<router-link class="nav-link" to="/blog">Blog</
roteador-link>
</li>
<router-link class="nav-link" to="/
serviços">Serviços</router-link>
</li>
<router-link class="nav-link" to="/
contato">contato</router-link>
</li>
O roteador-link aceita a propriedade to='path', que aceita o caminho do componente

como um valor.
Visão do roteador
A tag <router-view> pode ser encontrada no arquivo App.vue. É a perspectiva em que os componentes
são renderizados. É como o div principal, que inclui todos os componentes, e retorna o componente
correspondente à rota atual. Falaremos sobre visualização de rota quando usarmos a transição de
animação na seção futura.
Usando os parâmetros dentro dos roteadores Neste
estágio, iremos para componentes individuais usando parâmetros. Os parâmetros permitem que o
roteamento seja dinâmico.
Faremos uma lista de produtos e um array de dados para tratar dos parâmetros. Ao clicar no link
de um produto, ele nos levará às informações da página por meio de um parâmetro.
Nesse caso, não utilizaremos um banco de dados ou uma API para obter os dados do produto.
Então precisamos estabelecer um Array de itens que servirá como banco de dados.
Dentro de home, coloque o Array na função data() do componente Vue da seguinte forma:

'home', data ()
{ return
{ title:
'Home', products:[ {
productTitle:"ABC", :
require('../assets/images/ image
product1.png'),
productId:1 }, {
productTitle:"KARA",
imagem : require('../assets/images/ product2.png'),
productId:2 }, {
productTitle:"Tin", :
product3.png'),
productId:3 }, {
productTitle:"EFGH", :
product4.png'),
productId:4 }, {
productTitle:"MLIT", imagem:
require('../assets/images/ product5.png'), productId:5 }, {
productTitle:"Banana", imagem
: require('../assets/images/
product6.png'),
productId:6
}]
}
}
}
Em seguida, usando a diretiva v-for, busque e percorra a matriz de produtos.
<div class="linha">
<div class="col-md-4 col-lg4" v-
for="(data,index) in products" :key="index">
<img :src="data.image" class="img-fluid">
<h3>{{data.productTitle}}</h3> </div> </div>
Para chegar ao componente de detalhes, devemos primeiro adicionar um evento de clique:
<h3 @click="goTodetail()" >{{data.productTitle}} </h3>

Em seguida, inclua os seguintes métodos:
métodos:
{ goTodetail() { this.
$router.push({name:'details'})
}
Se você clicar no título, ele retornará indefinido, pois o componente de detalhes ainda não foi
criado. Então, vamos fazer um:
detalhes.vue
<modelo>
<div class="detalhes">
<h1 class="text-primary text-center">{{title}}</h1> </div> </div> </template>
<script>
padrão
de exportação{
nome:'detalhes', data()
{ return{
titulo:"detalhes"
} } } </script>
Como podemos navegar para a página de detalhes e recuperar os dados correspondentes

se não tivermos um banco de dados?
A mesma matriz de produtos será usada no componente de detalhes. Como resultado,

podemos extrair o id da URL:
produtos:[ {
productTitle:"ABC", :
product1.png'),
productId:1 }, {
productTitle:"KARA", :
product2.png'),
productId:2 }, {
productTitle:"Lata", image :
productTitle:"EFGH", image :
productTitle:"MLIT", : require('../
assets/images/ image product5.png'),
productId:5 }, {
productTitle:"Banana", imagem
: require('../assets/images/
product6.png'),
productId:6
}]
Primeiramente, devemos passar o id como parâmetro para o método goTodetail():
<h3 @click="goTodetail(data.productId)" >{{data. productTitle}}</h3>
Então, para o método do roteador, adicione um segundo argumento.

A função $router aceita dois parâmetros: o nome do componente ao qual queremos ir e o
parâmetro id (ou qualquer outro parâmetro).
this.$router.push({name:'details',params:{Pid:proId}})
Insira Pid como parâmetro em index.js na pasta do roteador:
{
caminho: '/details/:Pid', nome:
'detalhes', componente:
detalhes }
home.vue
métodos:
{ goTodetail(prodId) { this.
$router.push({name:'details',params:{Pid: proId}}) } }
Use o seguinte código para obter o parâmetro correspondente:
this.$route.params.Pid
detalhes.vue
<h2>o ID do produto é:{{this.$route.params.Pid}}</h2>
Em seguida, em detalils.vue, percorra o array products e encontre o item que

corresponde ao parâmetro Pid e forneça seus dados:
<div class="col-md-12" v-for="(product,index) in products" :key="index">

<div v-if="proId == product.productId">
<h1>{ {product.productTitle}}</h1> <img :src="product.image"
class="img-fluid"> </div> </div>
///
padrão de exportação{
nome:'detalhes', data()
{ return{ proId:this.$route.params.Pid,
titulo:"detalhes"
}
}
componente detail.vue
<modelo>
<div class="detalhes">
<div class="linha">
<div class="col-md-12" v-for="(produto,índice) em
produtos" :key="index"> <div v-
if="proId == product.productId"> <h1>{{product.productTitle}}
</h1> <img :src="product.image" class= "img-
fluid"> </div> </div> </div> </div> </div> </template> <script>
padrão
de
exportação{
name:'details', data()
{ return{ proId:this.$route.params.Pid,
title:"details", products:
[ { productTitle:"ABC",
imagem : require('../assets/images/product1.
png'),
productId:1 },
{ productTitle:"KARA",
png'),
productId:2 }, {
productTitle:"Lata", imagem
png'), : require('../assets/images/product3.
productId:3 },
{ productTitle:"EFGH",
png'),
productId:4 },
{ productTitle:"MLIT", imagem
png'), : require('../assets/images/product5.
productId:5 },
{ productTitle:"Banana", :
require('../assets/images/product6. image png'),
productId:6 } ]
} } } </script>
A transição
Nesta seção, adicionaremos uma transição de animação ao componente
animado. Vamos animar a transição do componente. Melhora a navegação e
oferece um melhor UX e UI.
Para criar uma transição de animação, coloque o elemento “router-view>”
dentro da tag “<transition/>” e dê a ele um nome de classe.
app.vue
<transition name="moveInUp">
<router-view/> </
transition>
Adicione enter-active ao nome da tag de transição para animar a transição do componente

quando ele entrar na exibição. Em seguida, adicione leave-active e forneça as configurações
de transição CSS conforme mostrado abaixo:
.moveInUp-enter-active{
opacidade: 0;
transição: opacidade 1s facilidade;
}
Usando Animação CSS3
Agora vamos animar com @keyframes em CSS3.

Adicione um efeito de esmaecimento à vista quando o componente entrar nela.
.moveInUp-enter-active{ animação:
fadeIn 1s facilidade de entrada;
} @keyframes fadeIn{ 0%
{ opacidade: 0;
} 60%
{ opacidade: 0,5;
} 90%
{ opacidade: 1;
}
}
Quando o componente sair da exibição, adicione outro efeito de esmaecimento.

Quando o componente sair da vista, faremos com que ele entre e suba.
.moveInUp-deixar-ativo{
animação: facilidade de movimento moveInUp .3s;
} @keyframes moveInUp{ 0%
{ transform: translateY(0); } 100%
{ transform: translateY(-410px); } }
Agora você pode personalizar as animações e transições para seus componentes.
O Vue.js não possui um recurso de roteador integrado. Para instalá-lo, precisaremos executar
algumas etapas adicionais.
Download direto do CDN
A versão mais recente do vue-router pode ser encontrada em https://unpkg.com/

vue router/dist/vue-router.js.
Unpkg.com fornece links cdn baseados em npm. A URL acima está sempre
atualizada com a versão mais recente. Como visto abaixo, podemos baixá-lo e
hospedá-lo e, em seguida, utilizá-lo com uma tag de script e vue.js.
<script src = "/path/to/vue.js"></script> <script src = "/path/to/

vue-router.js"></script>
• Usando o NPM: Para instalar o vue-router, use o seguinte

comando:
npm instalar vue-router
• Usando o GitHub: Podemos clonar o repositório do GitHub fazendo o seguinte:
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm instalar
npm run build
Vamos começar com um exemplo básico que usa vue-router.js.
<html>
<head>
<title>Instância VueJs</title> <script type =
"text/javascript" src = "js/vue. js"></script> <script type = "text/javascript"
src = "js/ vue
-router.js"></script> </head> <body>
<div id = "aplicativo">
<h1>Exemplo de roteamento</h1>
<p>
<link do roteador para = "/route1">Link do roteador
1</router-link>
<router-link to = "/route2">Link do roteador
2</router-link> </p>

 <router-view></
router-view> </div> <script type = "text/
javascript"> const Route1 = { template: '<div style

=
"border-radius:21px;background-color:cyan;width:210px; height:50px;margin:12px;font
size:26px;padding:12px;">Este é o
roteador 1</div>' } const Route2 = { modelo: '<estilo div =
"border-radius:21px;background-color:green;width:210px ;height:50px;margin:12px;font
size:26px;padding:12px;">Este é o roteador
2</div>' } const routes = [
{ path: '/route1', componente: Route1 }, { path: '/route2',

componente: Route2 }
];
const router = new VueRouter({rotas //
abreviação de 'rotas: rotas' }); var vm = new Vue({ el:
'#app',
roteador
});
</script> </
body> </
html>
Para começar com o roteamento, devemos incluir o arquivo vue-router.js.

Salve o código de https://unpkg.com/vue-router/dist/vue-router.js para o
arquivo vue router.js. O script vem depois de vue. J da seguinte forma:
<script type = "text/javascript" src = "js/vue.js"></ script> <script type = "text/javascript"

src = "js/
vue-router. js"></script>
Um link de roteador é definido na seção do corpo da seguinte maneira:
<p>
<router-link to = "/route1">Router Link 1</ router-link>
<link do roteador to = "/route2">Link do roteador 2</

roteador-link>
</p>
O componente <router-link> é usado para navegar até o conteúdo HTML que será mostrado ao
usuário. A “propriedade to” especifica o destino, ou seja, o arquivo de origem a partir do qual o
conteúdo exibido será selecionado.
Criamos duas conexões de roteador no código anterior.
Examine a área de script onde o roteador está configurado. As duas constantes a seguir são
criadas:
const Route1 = { template: '<div style = "border radius:21px;background-

color:cyan;width:210px;height:6 0px;margin:12px;font-size:26px;padding:12px;">Isto é
roteador 1</div>' }; const Route2 = { template: '<div style = "border radius:21px;background-
color:green;width:210px;height:
60px;margin:12px;font-size:26px;padding:12px;">Este é o roteador 2</div>' }
Eles possuem modelos que devem ser exibidos quando o link do roteador é clicado.
Em seguida vem a const das rotas, que determina o caminho que será apresentado na URL.
rotas const = [
{ path: '/route1', componente: Route1 }, { path: '/route2',
componente: Route2 }
];
As rotas especificam a rota e o componente. Quando o usuário clicar no link do

roteador, o caminho, /route1, será mostrado na URL (“VueJS - Routing - Tutorialspoint”).
Os nomes dos modelos são enviados para o componente a ser mostrado. O caminho
das rotas deve corresponder ao caminho do roteador até a propriedade.
Por exemplo, <router-link to = “path here”></router-link> A instância do
VueRouter é então criada usando o seguinte código.
const router = new VueRouter({rotas //

abreviação de 'rotas: rotas' });
As rotas são passadas como parâmetros para o construtor VueRouter. O objeto roteador
é alocado para a instância principal do Vue usando o código abaixo.
var vm = new Vue({ el:

'#app',
roteador
});
Execute o exemplo para visualizar o resultado no navegador. Quando inspecionamos e

testamos o link do roteador, descobrimos que ele adiciona classe ao elemento ativo.
class = “router-link-exact-active router-link-active” foi adicionado.
Conforme demonstrado no exemplo acima, o link ativo recebe a classe.

Outra coisa a ter em mente é que o <router-link> é produzido como uma tag.
Props para Router Link
Vamos dar uma olhada em algumas outras características que podem ser dadas para
<router-link>.
Este é o caminho para o destino <router-link>. Quando clicado, o valor de to é enviado

internamente para router.push(). O valor deve ser uma string ou um objeto de localização.
Quando usamos um objeto, devemos vinculá-lo, conforme demonstrado no segundo
exemplo.
Primeiro exemplo:
<router-link to = "/route1">Router Link 1</ router-link>
renderiza
como <a href = "#/route">Router Link </a>
Segundo exemplo:
<router-link v-bind:to = "{path:'/route1'}">Roteador

Link 1</router-link>
Terceiro exemplo:
<router-link v-bind:to = "{path:'/

route1', query: { name: 'Tery'
}}">Link do roteador 1</router-link>//link do roteador com string de
consulta.
A string de consulta name = Tery aparece na rota de URL. Por exemplo, http://
localhost/vueexamples/vue router.html#/route1?name = Tery
Quando você adiciona replace a um link de roteador, ele chamará router.replace()
de router.push(). O histórico de navegação não é salvo ao usar substituir.
Exemplo:
"<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"

replace>Router Link 1</ router-link>" ("VueJS - Routing -
Tutorialspoint ")
anexar
Ao anexar ao link do roteador>link do roteador>, o caminho se torna relativo.
Se quisermos ir do link do roteador com path /route1 para o link do roteador
com path /route2, o caminho no navegador será /route1/route2.
Exemplo:
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link

1</router-link> tag
<router-link> é atualmente renderizado como uma tag. Se quisermos renderizá-lo

como outra tag, devemos especificá-lo usando tag = “tagname”;
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag =
"span">Link do roteador 1</router-link>
"span">Link do roteador 2</router-link> </p>
A tag span foi definida e é isso que é exibido no navegador.

A tag que agora é mostrada é uma tag span. Ainda perceberemos o clique
quando formos clicar no link do roteador.
classe ativa
Quando o link do roteador está ativo, a classe ativa adicionada é o link do roteador
ativo por padrão. Podemos substituir a classe definindo-a como visto no código a
seguir.
<estilo> ._active{ cor

de fundo : preto;
} </estilo>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class =
"_active">Router Link 1</router-link>
A classe utilizada é active_class = “_active”. Esta é a saída exibida no navegador.
classe exata-ativa
A classe exata-ativa do link do roteador é usada por padrão. Podemos substituí-lo
por classe exata-ativa.
<p>
<router-link v-bind:to = "{ path: '/route1'}"
exact-active-class = "_active">Router Link 1</
roteador-link>
O evento padrão para o link do roteador é atualmente o evento click. Usando a

propriedade event, podemos ajustar isso.
Exemplo:
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router

Link 1</router-link>
Roteamento Simples do Zero

Se você simplesmente precisa de roteamento básico e não deseja usar um pacote de
roteador completo, pode fazê-lo exibindo dinamicamente um componente de nível de
página como este:
const NotFound = { template: '<p>Página não encontrada</p>' } const Home

= { template: '<p>página inicial</p>' } const About = { template:
'<p>about page< /p>' }
rotas const = {
'/': Casa, '/
sobre': Sobre
}
new Vue({ el:

'#app', data:
{ currentRoute: window.location.pathname }, calculado:
{ ViewComponent
() { return
routes[this.currentRoute] || NotFound
} }, renderizar (h) { return h(this.ViewComponent) } })
Quando usado com a API de histórico do HTML5, você pode criar um roteador do lado
do cliente simples, mas totalmente funcional.
ROTEADOR E PARÂMETROS DE CONSULTA Ao
utilizar rotas com parâmetros, lembre-se de que a mesma instância do componente

será reutilizada quando o usuário navegar de /user/foo para /user/bar. Como ambos os
métodos produzem o mesmo componente, isso é mais eficiente do que excluir a
instância anterior e recriá-la. No entanto, isso também implica que os ganchos do ciclo
de vida do componente não serão invocados.
Para responder a mudanças nos parâmetros do mesmo componente, basta observar
o objeto $route:
const Usuário =
{ modelo: '...',
watch:
{ $route(to, from) { // reage
a mudanças de rota
}
}
}
Alternativamente, utilize o protetor de navegação beforeRouteUpdate, que foi adicionado

em 2.2:
const User =
{ template: '...',
beforeRouteUpdate(to, from, next) { // reage às
alterações de rota... // não se esqueça de
chamar next()
}
}
Obter parâmetros de consulta de uma URL é algo que devemos fazer com bastante
frequência em nossos projetos Vue.js.
Veremos como obter parâmetros de consulta de uma URL no Vue.js
na seção seguinte.
Obter parâmetros de consulta de uma URL
Podemos simplesmente obter um parâmetro de consulta na URL de um componente de

rota usando o Vue Router.
Por exemplo, poderíamos escrever:
main.js
importar Vue de "vue"; importar
App de "./App.vue"; importar Helloeveryone
de "./views/Helloeveryone.vue"; importar VueRouter de "vue-router";
rotas const = [{ path: "/hello", componente:

Olá pessoal }];
Vue.config.productionTip = false;
Vue.use(VueRouter);

rotas
});
new
Vue({ render: (h) => h(Aplicativo),
roteador
}).$mount("#app");
app.vue
<modelo> <div
id="aplicativo">
<router-view></router-view> </div> </
template>
<script>
{ nome:
"Aplicativo", }; </script>
views/ Olá a todos.vue
<template>
<div class="hello"> <h1>oi,
{{ name }}</h1> </div> </template>
<script>
"Olá a todos", data() { return
{ name:
"", }; },
mount()
{ this.name = this.
$route.query.name; }, }; </script>
Em main.js, definimos o array de rotas, que contém as rotas que

pode ser carregado usando o Vue Router.
Em seguida, chamamos Vue.use(VueRouter) para adicionar dependências como roteador
visualização e atributos adicionais para componentes.
Em seguida, construímos um objeto VueRouter com as rotas.
Para registrar as rotas, alimentamos o roteador no objeto de instância Vue.
Adquirimos o nome do parâmetro de consulta da mesma forma que fizemos em views/

Helloeveryone.vue. this.
$router.query.name contém o valor do parâmetro de consulta
nome.
Como resultado, quando navegamos para /#/hello?

Vemos “hello, jamy” exibido desde que o atribuímos a this.name.
Outra opção é enviar o texto da consulta como props.
Para isso, escrevemos:
main.js
importar Vue de "vue"; importar App

de "./App.vue"; importar Olá a todos de "./
views/Olá a todos. vue"; importar VueRouter de "vue-router";
rotas const = [
{
path: "/hello", component:
Helloeveryone, props: (route) => ({ name:
route.query.name })
} ]; Vue.config.productionTip = false; Vue.use(VueRouter);

roteador const = new
VueRouter({
rotas
});
new
Vue({ render: (h) => h(Aplicativo),
roteador
}).$mount("#app");
Em seguida, alteramos views/Helloeveryone.vue para:
<modelo>
<div class="olá">
<h1>oi, {{ nome }}</h1> </div>
</
template>
<script>
"Helloeveryone", props:
{ name:
String, }, }; </
script>
E App.vue permanece inalterado.

A propriedade props foi definida para uma função que aceita o parâmetro de rota.
E retornamos um objeto com o conjunto de atributos route.query.name.

Registramos a propriedade name com a propriedade props em Helloeveryone.
vue e mostre o nome diretamente no modelo.
Como resultado, quando vamos para /#/hello?name=jamy, vemos “hey, jamy” uma vez
mais.
URLSearchParams
Se não quisermos utilizar o Vue Router, podemos usar o construtor URLSearchParams

para acessar o parâmetro de consulta.
Por exemplo, poderíamos escrever:
main.js
importar Vue de "vue";
importar App de "./App.vue";
Vue.config.productionTip = false; new
Vue({ render:
(h) => h(App) }).
$mount("#app");
app.vue
<modelo> <div
id="aplicativo">
<Olá a todos /> </div> </
template>
<script>
import Helloeveryone from "./components/ Helloeveryone";
{ nome:
"Aplicativo", componentes: {
Olá pessoal, }, }; </
script>
componentes/ Olátodos.vue
<modelo>
<div class="olá">
<h1>oi, {{ nome }}</h1> </div> </
template>
<script>
"Olá a todos", data() { return
{ name:
"", }; },
mount()
{ const urlParams
= new URLSearchParams(window.
localização.pesquisa);
this.name = urlParams.get("nome"); }, }; </script>
A string de consulta é enviada ao construtor URLSearchParams por meio de

window.location.search.
Em seguida, usando urlParams.get, podemos recuperar o parâmetro de consulta com

a chave especificada.
Demos a ele o nome this.name para que pudéssemos usá-lo no modelo.
Então, se formos para /?name=jamy, veremos “hi, jamy”.
CONCLUSÃO
Neste capítulo, aprendemos sobre roteamento em Vue.js, bem como quais roteadores e
parâmetros são e como eles são utilizados. O capítulo seguinte nos ensinará sobre
navegação programática.
Capítulo 6
Programática
Navegação
NESTE CAPÍTULO
ÿ Navegação programática
ÿ Carregamento lento
No Capítulo 5, estudamos sobre roteamento em Vue.js, bem como o que são roteadores
e parâmetros e como eles são utilizados. Este capítulo nos ensinará sobre navegação
programática e carregamento lento.
NAVEGAÇÃO PROGRAMÁTICA
Vue.js é uma estrutura básica de aplicativo da web para desenvolver projetos front-end
interativos.
Esta peça irá ver como percorrer as rotas do Vue Router dinamicamente.
Rotas programáticas
Podemos explorar as rotas programaticamente e usar um link de roteador para gerar um

link que permite aos usuários navegar pelas rotas.
roteador.push(localização, onComplete?, onAbort?)

Para fazer isso, podemos usar o objeto $router de um componente para navegar pelas
rotas programaticamente.
DOI: 10.1201/9781003310464-6 133

Quando um link de roteador é clicado, Router. Push (...) é chamado. Nós podemos usá-lo
para ir para as rotas programaticamente.
Por exemplo, podemos construir e percorrer programaticamente

rotas da seguinte forma:
src/index.js : const
Foo = { template: "<p>foo</p>" }; const Bar = { template:
"<p>bar</p>" };const routes = [
{
caminho: "/foo",
componente: Foo }, {
path: "/bar",
componente: Bar
}
];const router = new VueRouter({
rotas
});nova Visualização({
el: "#app",
roteador,
métodos:
{ goTo(route) {
this.$router.push(rota);
}
} });
index.html:
<!DOCTYPE html>
<html>
<cabeça>
<title>Aplicativo</title>
<meta charset="UTF-8" /> <script
src="https://unpkg.com/vue/dist/vue.js"></ script> <script src=" https://unpkg.com/
vue-router/
dist/
vue-router.js"></script> </head>
<body>
<div
id="app">
<div>
Navegação programática ÿ 135
<a href="#" @click='goTo("foo")'>Foo</a> <a href="#"

@click='goTo("bar")'>Barra</a> </ div> <router-view></router-
view> </
div> <script src="src/index.js"></script> </
body> </
html>
A função goTo no código acima aceita uma string que representa o caminho que
desejamos seguir.
No método, usamos this.$router.push(route); no método.
Assim, vemos Foo quando clicamos nele e Bar quando clicamos nele.
Também podemos enviar um objeto da seguinte forma:
this.$router.push({ caminho: rota });
Além disso, quando $ router.Push, podemos viajar para rotas designadas. Para fazer isso,
nós escrevemos:
{
nome: "foo",
caminho: "/foo",
nome: "bar",
caminho: "/bar",
componente: Bar
}
rotas
el: "#app",
roteador,
métodos:
{ goTo(nome) { this.
$router.push({ nome });
}
} });
index.html:
<!DOCTYPE html>
<html>
<cabeça>
src="https://unpkg.com/vue/dist/vue.js"></ script> <script src="https://unpkg.com/
vue-router/
dist/
<body>
<div
id="app"> <div>
<a href="#" @click='goTo("foo")'>Foo</a> <a href="#"

@click='goTo("bar")'>Barra</a> </ div> <router-view></router-
view>
</div>
<script src="src/index.js"></script> </body> </html>
Definimos rotas nomeadas no código anterior adicionando o atributo name às nossas

rotas e escrevendo:
rotas const = [ { nome:
"foo", caminho: "/

foo", componente:
Foo }, { nome: "bar",
caminho: "/bar",
componente: Bar } ];
Então, no método goTo, podemos ir para uma rota pelo nome da seguinte forma:
this.$router.push({ nome });

Podemos incluir os seguintes parâmetros de rota:
router.push({ name: 'user', params: { userId: '123' } })
Os seguintes métodos não funcionarão:
router.push({ path: 'user', params: { userId: '123' } })
Podemos usar as seguintes strings de consulta para acessar as rotas:
router.push({ path: 'user', query: { userId: '123' } })
ou:
router.push({ name: 'user', query: { userId: '123' } })
Também podemos seguir um caminho com um parâmetro de rota da seguinte maneira:
router.push({ path: '/user/123' });
Podemos utilizá-los das seguintes maneiras, por exemplo:
const Foo = { template: "<p>foo {{$route.query.id}}</ p>" }; const Bar = { template:

"<p>bar</
p>" };const routes = [
{
caminho: "/foo",
path: "/bar",
componente: Bar
}
rotas
el: "#app",
roteador,
métodos:
{ goTo(path, query) { this.
$router.push({ path, query });
} });
Quando clicamos em Foo, vemos foo 1, pois usamos uma string de consulta com id como chave.
É o mesmo que digitar /#/foo?id=1 em seu navegador.

As mesmas regras se aplicam à propriedade do componente do link do roteador.
Podemos fornecer um retorno de chamada onComplete e onAbort para o roteador com Vue
Router 2.2.0 ou posterior. Empurre ou roteador. Substitua pelo segundo e terceiro parâmetros.
No Vue Router 3.1.0 ou posterior. Roteador e push. Como replace retorna promessas, não
precisamos passar o segundo e o terceiro parâmetros para lidar com esses cenários.
Se nosso destino for o mesmo que a rota atual, mas apenas os parâmetros mudarem,
como /users/1 para /users/2, devemos utilizar o hook beforeRoute Update para responder às
mudanças.
router.replace(location, onComplete?, onAbort?) router.replace

atua como router.push, exceto que nenhuma nova entrada de histórico é adicionada.
router.replace(…) é o mesmo que <router-link :to=”…” replace> .
router.go(n)
Podemos fazer uso do roteador.vá para frente ou para trás especificando o número de passos
para avançar ou retroceder. O positivo está à frente e o negativo está para trás.
Podemos utilizá-lo das seguintes maneiras, por exemplo:
{
path: "/foo",
componente: Foo },
{
path: "/bar",
componente: Bar
}

rotas
});new Vue({ el:
"#app", roteador,
métodos:
{ forward() { this.
$router.go(-1); },
back() { this.$router.go(1);
} });
index.html:
<!DOCTYPE html>
<html>
<cabeça>
src="https://unpkg.com/vue/dist/vue.js"></ script> <script src="https://unpkg.com/
vue-router/
dist/
<body>
<div
id="app">
<div>
<router-link to="foo">Foo</router-link> <router-link
to="bar">Barra</router-link> <a href="#"
@click="forward">Avançar< /a> <a href="#" @click="back">Voltar</
a> </div> <router-view></router-view> </div> <script
src="src/
index. js"></script> </body> </html>
Para avançar e retroceder, devemos usar os procedimentos de avanço e reverso, respectivamente.
Se esse registro de histórico não existir, o router.go falhará silenciosamente.

Para navegar para um caminho com nomes alternativos, caminhos, strings de consulta,
ou argumentos, usamos a função router.push.
Podemos fazer a mesma coisa com o roteador. Substitua, mas não crie um novo item
de histórico.
Ambos aceitam uma string ou objeto para a rota, bem como manipuladores para
onComplete e onAbort.
Router.go nos permite percorrer o histórico do navegador. Para avançar ou retroceder,
uma série de passos deve ser realizada.
router.push()
Você pode utilizar a função router.push() da instância do roteador. Considere os seguintes
exemplos:
// caminho da string literal

router.push('home')
// objeto
router.push({ path: 'home' })
// rota nomeada
router.push({ name: 'user', params: { userId: '123' } })
// com consulta, resultando em /register?plan=private router.push({ path:

'register', query: { plan: 'private' } })
router.push() exemplo
Suponha que o usuário acabou de preencher um formulário. Se nenhuma falha for
encontrada, o usuário deve ser direcionado para a página inicial. Podemos fazer isso
primeiro validando o formulário e, em seguida, navegando o usuário até a página inicial
usando o roteador. função push(). Considere o seguinte exemplo:
métodos:
{ submit() { if
(this.$refs.form.validate()) { router.push({ path:
'home' }) } } }
Além de utilizar <router-link> para construir tags de âncora para navegação declarativa,
também podemos usar as funções de instância do roteador programaticamente.
roteador.push(localização, onComplete?, onAbort?)
Vale a pena notar que você pode acessar a instância do roteador de dentro de uma
instância do Vue digitando $ router. Como resultado, você pode executar this.$router.push.
Usar roteador. Pressione para navegar para um URL diferente. Essa técnica adiciona
um item adicionado à pilha de histórico, para que, quando o usuário clicar no botão Voltar
do navegador, ele retorne à URL anterior.
Como esse é o método chamado internamente quando você clica em um <link do
roteador>, clicar em um <link do roteador: para=“...”> é igual a chamar router.push (…).
Declarativo Roteador
<router-link :to="..."> programático.push (...)
O argumento pode ser um caminho de string ou um objeto descritor de localização.

Exemplos:
// caminho da string literal

router.push('home')
// objeto
router.push({ path: 'home' })
// roteador de rota
nomeada.push({ name: 'user', params: { userId: '123' } })
// com a consulta, resultando em /register?plan=private router.push({ path: 'register',

query: { plan: 'private' } })
Observe que, se um caminho for especificado, os parâmetros serão ignorados, o que não
é o caso da consulta, conforme visto no exemplo anterior. Em vez disso, você deve fornecer
o nome da rota ou definir explicitamente todo o caminho com qualquer parâmetro:
const userId = '123'

router.push({ name: 'user', params: { userId } }) // -> /user/123
router.push({ path: '/user/${userId}' }) // -> /user/123 // Isso NÃO funcionará

router.push({ path: '/user',
params: { userId } } ) // -> /usuário
As mesmas regras se aplicam à propriedade do componente do link do roteador.

Forneça retornos de chamada onComplete e onAbort para router.push ou roteador em
2.2.0+. Substitua pelo segundo e terceiro parâmetros. Esses retornos de chamada serão
acionados quando a navegação for concluída (após todos os ganchos assíncronos terem sido
manipulados) ou abortada (navegado para a mesma rota ou para uma rota diferente antes do
término da navegação atual). Na versão 3.1.0+ e posterior, você pode pular o segundo e o
terceiro argumentos, bem como o roteador. Push/roteador. Se houver suporte para promessas,
replace retornará uma promessa.
Observação: Se o destino for o mesmo da rota atual e apenas os parâmetros mudarem (por
exemplo, /users/1 -> /users/2), você deve usar a data beforeRouteUp para reagir às alterações
(por exemplo, buscar as informações do usuário).
router.replace(local, onComplete?, onAbort?)

Ele funciona de forma semelhante ao router.push, com a exceção de que navega sem enviar
um novo item do histórico, como o nome indica – em vez disso, ele substitui a entrada existente.
Declarativo Programática
<router-link :to="..." substituir> roteador.substituir(...)
router.go(n)
Esta função aceita um único inteiro como um argumento que define quantos passos percorrer
para frente ou para trás na pilha de histórico, comparável a uma janela. history.go(n).
Exemplo:
// avança um registro, igual ao histórico. forward() router.go(1)
// volta um registro, o mesmo que history.back() router.go(-1)
// avança três registros router.go(3)

// falha silenciosamente se não houver tantos

registros.
roteador.go(-100)
roteador.go(100)
CARREGAMENTO LENTO
O que é carregamento lento no Vue.js?
Lazy loading é uma abordagem de design que adia a inicialização de componentes e objetos
até que sejam necessários. O carregamento lento indica que um elemento DOM de destino é
carregado e se torna visível (quando há uma interseção entre duas seções, com base em um
determinado valor limite) somente quando um usuário rola em uma página da web.
Para compreender o carregamento lento, você deve primeiro compreender o carregamento

rápido. O método padrão para carregar o código JavaScript no DOM é o carregamento antecipado.
A declaração de importação no Vue.js é usada para introduzir um componente no aplicativo.
arquivo vue. O carregamento lento é uma técnica na qual todos os scripts não são carregados no
DOM assim que o programa é iniciado. Em vez disso, eles são carregados apenas quando
solicitados, resultando em um tamanho mínimo de pacote JavaScript no carregamento inicial.
O Vue.js lida com o carregamento de componentes preguiçosamente com rotas, então você
pode carregar componentes somente quando necessário no DOM por meio de rotas. Isso é
feito separando os componentes de cada rota em pedaços distintos do pedaço principal carregado
durante a configuração. Isso evita que o tamanho do pacote entregue ao DOM fique
excessivamente grande. Para carregar lentamente os componentes da rota, o Vue.js utiliza a
capacidade do componente assíncrono com o recurso de divisão de código do pacote da web.
Por que o carregamento lento é significativo?
A estratégia de carregamento rápido torna o pacote JS bastante oneroso como seu Vue. js se
desenvolve em tamanho e complexidade. Isso pode ser um problema para seus consumidores
finais, que podem estar usando um dispositivo móvel ou não estão conectados a uma conexão
de Internet de alta velocidade.
O carregamento lento garante que seu pacote JavaScript seja fornecido para que os
componentes DOM sejam listados em termos de hierarquia, do mais importante ao menos importante.
Este método garante que você tenha controle total sobre a experiência do usuário, incluindo o
período de espera inicial enquanto os recursos são carregados no DOM.
Exemplo de carregamento lento do
Vue.js Para exibir o carregamento lento no Vue.js, usaremos o Vue CLI para criar um aplicativo
Vue.js de exemplo e adicionar roteamento durante a etapa de configuração.
Também construiremos manualmente uma terceira rota para demonstrar o procedimento

para desenvolvedores que não estão familiarizados com o Vue CLI. No entanto, é sempre
recomendável utilizar o Vue CLI porque as rotas secundárias já estão definidas para
serem carregadas lentamente por padrão.
Iniciando um projeto Vue.js
Abra um terminal em um diretório de sua escolha e execute o seguinte comando para criar
um novo projeto:
vue criar test_project
Um questionário de acompanhamento será mais ou menos assim:
? Escolha uma predefinição: Selecionar recursos manualmente? Confira

as funcionalidades necessárias para o seu projeto:
ÿ Babel •
TypeScript •
Suporte para Progressive Web App (PWA) >ÿ Roteador
• Vuex
• Pré-processadores CSS ÿ
Linter / Formatador • Teste de
unidade • Teste E2E
Certifique-se de usar a barra de espaço para escolher a opção de roteador conforme

mostrado acima. Então, para minimizar o espaço, você pode manter todas as configurações
no arquivo package.json. Você receberá uma mensagem de sucesso após o
estabelecimento do projeto. Altere o local para a nova pasta do projeto e execute o
programa no ambiente de desenvolvimento neste ponto:
cd test_project
Tela de boas vindas.

import Vue from 'vue' import

Router from 'vue-router' import Home from
'./views/Home.vue' import About from './views/
About.vue'
Vue.use(Router)
exporta padrão novo Roteador({ rotas:
[{
caminho: '/',
nome: 'casa',
componente: Home },
{
path: '/about', nome:

'about', componente:
About
}
] })
Como o Vue CLI permite carregamento lento para rotas secundárias, como o componente
sobre em nosso exemplo, isso pode parecer diferente para a parte do componente sobre.
Eu estava adicionando manualmente uma nova

rota Agora você tem duas rotas: uma rota inicial que leva à exibição inicial e uma rota
sobre que leva à exibição sobre. Vamos adicionar uma terceira visão e, em seguida,
atribuí-lo a um curso.
Crie um novo arquivo em sua pasta de exibições, chame extra.vue. Depois disso,
coloque o conteúdo do arquivo about.vue no arquivo extra.vue. É assim que deve parecer:
<template>
<div class="about">
<h1>Esta é uma página extra</h1> </div>
</
template>
Para adicionar a rota, abra seu arquivo router.js e adicione o seguinte bloco de código ao
array de rotas:
exportar novo roteador padrão ({ rotas: [

{
caminho: '/',
nome: 'casa',
componente: Home }, {
caminho: '/sobre', nome:

'sobre', componente:
Sobre }, {
caminho: '/extra',
nome: 'extra',
componente: Extra
}
]
})
A última etapa para torná-lo visível no DOM é adicioná-lo ao arquivo App .vue principal por
meio de um link de roteador.
Altere a seção de modelo em seu arquivo app.vue para o bloco de código abaixo:
<template> <div
id="app"> <div id="nav">
<router-link to="/">Página inicial</router-link> | <router-link to="/

about">Sobre</router-link> | <router-link to="/extra">Extra</router-link> </
div> <router-view/> </div> </template>
Como carregar lentamente componentes Vue.js
Agora que configuramos todas as rotas em nosso exemplo de projeto Vue.js, é hora de
configurar todas as suas rotas para serem carregadas lentamente mediante solicitação.
Abra seu arquivo router.js e cole o seguinte bloco de código nele:
import Vue from 'vue' import

Router from 'vue-router.'
Vue.use(Router) function
lazyLoad(view){ return() => import('@/
views/${view}.vue')
}
exportar novo roteador padrão ({ mode:

'history', base:
process.env.BASE_URL, rotas: [ {
caminho: '/',
nome: 'home',
componente: lazyLoad('Home') }, {
caminho: '/sobre', nome:

'sobre', componente:
lazyLoad('Sobre') }, {
caminho: '/extra', nome:

'extra', componente:
lazyLoad('extra')
}
]
})
Veja a seguir um detalhamento do que foi feito para fazer com que essas exibições sejam carregadas
mais lentamente.
Removendo instruções de importação
Você deve ter visto instruções de importação para Vue.js, Router, Home, About e outras coisas no
início. Como essas instruções são responsáveis pelo carregamento antecipado de componentes,
você deve excluí-las quando mudar para a estratégia de carregamento lento.
Função lazyLoad O
método Vue lazyLoad foi projetado para organizar a instrução de importação.

Cada componente teria uma instrução de importação longa se essa função não existisse. Você pode
apenas invocar o processo e passar o caminho como args.
Instrução de importação do webpack A
instrução de importação que instrui o webpack a carregar os componentes de forma assíncrona deve
ser incluída na seção de rotas em vez da seção de importação no início do script.
Execute novamente o programa em desenvolvimento para testar a estratégia de carregamento:
Em seu navegador, navegue até http://localhost:8080/ e inicie as ferramentas de desenvolvimento.

Selecione a guia JS na seção de rede.
Os pedaços de JavaScript carregados no DOM são divididos em números, com o primeiro (0.js)
representando a visualização inicial, o segundo (1.js) representando a visualização about, que só é
adicionada ao DOM ao clicar, e o terceiro (2.js) representando a visão diferente, que também é
adicionada ao DOM mediante solicitação.
Você também pode testar se o carregamento lento funcionou criando o aplicativo para produção
usando o comando:
npm run build
O Webpack representará esses três blocos como blocos independentes e carregados lentamente.
Quais scripts você pode carregar preguiçosamente?
Claro, você escreve muito código de script em projetos Vue – afinal, você está trabalhando com
muitos componentes (e contexto, ganchos, etc.).
Existem dois tipos de código que podem ser carregados lentamente no componente
projetos web focados como os que você está criando com Vue:
• Componentes: Carregue o código do componente (e qualquer código relacionado) somente

quando um componente for exibido na tela.
• Rotas: Quando um usuário acessa uma rota, apenas o código do componente da rota (e todo o
código relacionado) é carregado.
Como adicionar Lazy Loading Ambos
são construídos da mesma forma: com componentes assíncronos.

Aqui está como declarar um componente como “lazy-loaded”:
{
componentes:
{ 'perfil de usuário': () => import('./perfil de usuário/
Perfil de usuário');
}
}
Você usa este componente carregado lentamente como qualquer outro componente:
<div v-if="someCondition">
<perfil de usuário></perfil de usuário> </
div>
Para roteamento, é bastante semelhante:

rotas: [ {
path: '/user-profile', component: ()

=> import('./user-profile/ UserProfile'),
},
],
});
O Vue e a ferramenta de processo de construção subjacente (por exemplo, Webpack) lidam com
todo o resto; Você não precisa fazer mais nada.
Carregamento preguiçoso, como o nome indica, é o ato de carregar bits (pedaços) do seu
programa de maneira aleatória. Em outras palavras, você só os carrega quando precisamos deles. A
técnica de dividir o aplicativo nessas partes carregadas lentamente é conhecida como divisão de
código.
Quando um visitante visualiza seu site, nem sempre você precisa de todo o código
do seu pacote JavaScript imediatamente.
Por exemplo, não precisamos gastar recursos vitais carregando a parte “Minha página” de nosso
site para usuários iniciantes. Modais, dicas de ferramentas e outras seções e componentes que não
são necessários em todas as páginas também podem ser incluídos.
Na melhor das hipóteses, baixar, analisar e executar o pacote completo em cada carregamento
de página é ineficiente quando apenas alguns bits são necessários.
O carregamento lento nos permite separar o pacote e entregar apenas os bits necessários,
evitando que os usuários percam tempo baixando e processando códigos que não serão utilizados.
Para examinar quanto código JavaScript é realmente utilizado em nosso site; vá para ferramentas
de desenvolvimento -> cmd+shift+p -> digite cobertura -> hit'record.' Deveríamos
agora poderá observar quanto do código baixado foi realmente utilizado.
Tudo em vermelho é desnecessário no caminho atual e pode ser carregado lentamente. Se você
estiver utilizando mapas de origem, poderá visualizar quais partes não foram invocadas clicando em
qualquer arquivo desta lista. Até o vuejs.org, como podemos ver, tem muito espaço para
desenvolvimento.
Conseguimos reduzir o tamanho do pacote do Vue Storefront em 60%, carregando lentamente
componentes e bibliotecas adequados. Essa é a técnica mais simples para melhorar o desempenho.
Ok, sabemos o que é carregamento lento e como ele é benéfico. Agora deixe-nos
veja como podemos aproveitar o carregamento lento em nossos aplicativos Vue.js.
Importações dinâmicas
Com as importações dinâmicas do webpack, podemos carregar rapidamente componentes específicos

de nosso aplicativo de maneira preguiçosa. Vamos dar uma olhada em como eles funcionam e como
eles variam das importações padrão.
Se importarmos um módulo JavaScript no método convencional, ele ficará assim:
// cat.js const
Cat = { { miau:
console.log("Meowwwww!")
function ()
} exportar gato padrão
// main.js importa
Cat de './cat.js'
Gato.miau()
Ele será adicionado ao gráfico de dependência como um nó de main.js e empacotado com ele.
Mas e se precisarmos do nosso módulo Cat apenas em situações particulares, como em reação
à interação do usuário? Este módulo não deve ser incluído em nosso primeiro pacote porque nem
sempre é necessário. Precisamos de um método para informar nosso programa quando baixar este
pedaço de código.
É aqui que as importações dinâmicas são úteis! Considere o seguinte exemplo:
// main.js
const getCat = () => import('./cat.js') //
posteriormente no código como resposta a alguma interação do usuário
como clique ou mudança de rota
getCat() .then({ miau } = > miau())
Vejamos rapidamente o que ocorreu aqui: Em vez

de importar o módulo Cat diretamente, construímos um método que retorna a função
import(). O conteúdo do módulo importado dinamicamente agora será agrupado em um
arquivo separado pelo webpack. O método que representa um módulo importado
dinamicamente retorna uma Promise que nos dá acesso aos membros exportados do módulo
enquanto ele é resolvido.
Podemos então baixar esta parte opcional conforme necessário no futuro, para
por exemplo, devido a interações específicas do usuário (como mudança de rota ou clique).
Ao usar uma importação dinâmica, isolamos o nó especificado (neste exemplo, Cat) que
será adicionado à árvore de dependências e baixamos essa parte quando determinamos que
é necessário (o que implica que também estamos cortando módulos importados dentro do
Cat .js).
Vejamos outro exemplo para entender melhor essa técnica.
Suponha que temos uma pequena loja virtual com quatro arquivos:
• main.js como nosso pacote principal
• product.js para scripts na página do produto
• productGallery.js para galeria de produtos na página do produto
• category.js para mãos na página da categoria
Sem nos aprofundarmos muito, vejamos como esses arquivos estão dispersos pelo aplicativo:
// categoria.js
const categoria = { init
() { ... } } categoria
// product.js
importa galeria de ('./productGallery.js')
produto const = { init ()

{ ... } } exportar
produto padrão
// main.js
const getProduct = () => import('./product.js') const getCategory =
() => import('./category.js')
if (route === "/product")
{ getProduct() .then({init} => init()) // executa scripts para o produto

page }
if (route === "/category")
{ getCategory() .then({init} => init()) // executa scripts para a categoria

página
}
Dependendo do caminho atual, importamos dinamicamente os módulos de produto ou categoria

e, em seguida, executamos o método init exposto por ambos.
Sabendo como funcionam as importações dinâmicas, sabemos que produto e categoria vão
ficar em bundles distintos, mas e o módulo productGallery, que não foi importado dinamicamente?
Como sabemos, ao importar o módulo dinamicamente, estamos removendo uma parte da rede
de dependências.
Tudo importado dentro deste componente será combinado; portanto, productGallery será incluído
no mesmo pacote que o módulo de produto.
Em outras palavras, estamos simplesmente adicionando um novo ponto de entrada ao gráfico
de dependência.
Lazy Loading Vue Components Agora
entendemos o que é lazy loading e por que precisamos dele. É hora de ver como podemos usá-lo
em nossos aplicativos Vue.
A boa notícia é que é incrivelmente simples e podemos carregar o componente de arquivo
único completo, incluindo seu CSS e HTML, usando a mesma sintaxe de antes.
const lazyComponent = () => import('Component.vue')

... e isso é tudo que você precisa! O componente agora só será baixado quando for
solicitado. A seguir estão os métodos mais frequentes para invocar o carregamento
dinâmico de um componente Vue:
• a função com a importação é invocada
const lazyComponent = () => import('Component. vue') lazyComponent()
• A renderização de um componente é solicitada.
<template>
<div>
<lazy-component /> </
div> </
template>
<script>
const lazyComponent = () => import('Component.vue') export default
{ components:
{ lazyComponent }
}
// Outro padrão de
exportação de sintaxe
{ components:
{ lazyComponent: () => import('Component.vue')
}
} </script>
Lembre-se de que o método lazyComponent só é chamado quando o componente

é solicitado a renderizar em um modelo. Por exemplo, considere o seguinte
código:
<lazy-component v-if="false" />
Quando o valor v-if mudar para true, o componente não será carregado até que seja
necessário no DOM.
Ao usar um empacotador para desenvolver aplicativos, o pacote JavaScript pode
ficar muito grande, afetando o tempo de carregamento da página. Seria mais eficiente
se pudéssemos dividir os componentes de cada rota em blocos discretos e carregá-los
apenas quando a rota fosse visitada.
É uma tarefa simples carregar lentamente componentes de rota usando o recurso de

componente assíncrono do Vue (abre uma nova janela) e a funcionalidade de divisão de código
do webpack (abre uma nova janela).
Para começar, um componente assíncrono é uma função de fábrica que retorna um
Promessa (que deve resolver para o próprio componente):
const Foo = () =>

Promise.resolve({ /* definição
do componente */ })
Em segundo lugar, podemos utilizar a terminologia de importação dinâmica (abre uma nova
janela) no webpack 2 para identificar um ponto de divisão de código:
import('./Foo.vue') // retorna uma promessa
Combinando os dois, é assim que você constrói um componente assíncrono que será dividido
automaticamente pelo webpack:
const Foo = () => import('./Foo.vue')
Nada deve ser alterado na configuração da rota; simplesmente use Foo como de costume:
const router = new VueRouter({ rotas: [{ caminho:

'/foo', componente: Foo }] })
Agrupando componentes no mesmo bloco Às vezes,
podemos agrupar todos os componentes contidos na mesma rota no mesmo bloco assíncrono.
Para fazer isso, devemos utilizar chunks nomeados (abre uma nova janela) especificando um
nome de chunk usando a sintaxe de comentário (webpack > 2.4 obrigatório):
const Foo = () => import(/* webpackChunkName: "group foo" */ './Foo.vue') const Bar =
() => import(/* webpackChunkName:
"group foo" */ './Bar .vue') const Baz = () => import(/* webpackChunkName: "grupo foo"
*/ './Baz.vue')
Qualquer módulo assíncrono com o mesmo nome de chunk será agrupado no

mesmo chunk assíncrono pelo webpack.
CONCLUSÃO
Discutimos navegação programática e carregamento lento neste capítulo, incluindo
o que são e como são utilizados. Aprenderemos sobre a API de contexto sofisticada
no próximo capítulo.
Capítulo 7
Conceitos avançados de API
NESTE CAPÍTULO
ÿ API de Contexto
No Capítulo 6, aprendemos sobre navegação programática e carregamento lento, o que são e

como são usados. Neste capítulo, aprenderemos sobre a API de contexto avançada.
API de CONTEXTO
A API React Context permite que um projeto React gere variáveis globais que podem
efetivamente passar. Esta é uma alternativa à “perfuração de adereços”, na qual os adereços
são passados dos avós para os filhos, para os pais e assim por diante.
“O contexto também é anunciado como uma abordagem mais simples e leve para lidar com o
estado do Redux.” (“React – API de Contexto – Comunidade DEV”).
A API de contexto é um novo recurso introduzido no React 16.3 que permite que você
comunique o estado de maneira fácil e leve em todo o projeto (ou parte dele).
A API de contexto substituirá o Redux?
O Redux é fantástico e ideal para os requisitos de gerenciamento de estado. Ele atendeu a

essa demanda de forma tão eficaz que se tornou amplamente aceito que você não pode se
considerar um desenvolvedor React “real” se não conhecer seu
DOI: 10.1201/9781003310464-7 157

maneira em torno de Redux. No entanto, o Redux tem desvantagens, e é por isso que é
crucial entender o que a Context API fornece que o Redux não oferece:
• Simplicidade: quando os indivíduos usam o Redux, eles tendem a manter todo o seu
estado no Redux, o que apresenta dois problemas:
1. Overhead: Por que devo criar/atualizar três arquivos para introduzir um

único recurso menor?
2. Um dos benefícios mais notáveis da vinculação de dados unidirecional do React é

sua simplicidade – um componente fornece estado a seus descendentes.
Quando utilizamos o Redux, ele é tirado de nós.
• Usando a API de contexto, podemos estabelecer vários contextos (armazenamentos)

não conectados e utilizar cada um em sua localização correta dentro do programa.
Nota importante
Redux é apenas uma ideia. Suponha que você se sinta confortável com redutores e ações
e não os considere um obstáculo. Nessa situação, como o inventor do Redux, Dan Abramov,
destacou em seu artigo médio sobre se o Redux é sempre necessário, você também pode
projetar redutores e ações que cobrem a Context API como a loja.
Como faço para utilizar a API de contexto?
Você pode estar pensando consigo mesmo: “Até agora, estou satisfeito. Como incluo a API
de contexto em meu aplicativo?” Primeiro, certifique-se de que você precisa dele. Às vezes,
as pessoas utilizam o estado compartilhado entre os componentes aninhados, em vez de
apenas fornecê-los como adereços. E se você precisar, você deve seguir os seguintes passos:
1. Crie uma pasta chamada contexts dentro da raiz do seu aplicativo (opcional). apenas
uma convenção).
2. Faça um arquivo chamado <your context name>Context.js, por exemplo, user

Context.js.
3. Importe e construa um contexto da seguinte forma:
import React, { createContext } de "react"; const

UserContext = createContext();
4. Crie um componente chamado Provider que cobrirá o provedor, por exemplo,

UserProvider.
Conceitos avançados de API ÿ 159
5. Um exemplo de React Hooks:
const UserProvider = ({ filhos }) => {

const [nome, setNome] = useState("Johnny Doe"); const [idade, setIdade] =
useState(1); const happyBirthday = () => setIdade(idade
+ 1); retornar (
<UserContext.Provider value={{ name, age, happyBirthday }}>

{crianças}
</UserContext.Provider> ); };
6. Crie um componente de ordem superior denominado com, por exemplo, com

Usuário, para consumir o contexto.
7. Exemplo usando React Hooks:
const withUser = (Filho) => (props) => (

<UserContext.Consumer>
{(contexto) => <Filho {...props} {...contexto} />}
{/* Outra opção é: {context => <Child {... props} context={context}/>}*/}
</UserContext.Consumer> );
A diferença entre as duas opções acima é se você deseja que o contexto seja
uma única propriedade aninhada por esse nome ou se deseja que ele exploda
em suas propriedades (o que é mais conveniente).
8. Por fim, exporte.
export { UserProvider, withUser };
9. E use-os como quiser.

10. Por exemplo:
ReactDOM.render(
<UserProvider>
<App /> </
UserProvider>,
document.getElementById("root")
);
padrão de exportação com User(LoginForm);
Aprenda como a API de contexto do React funciona e quando utilizá-la para
evitar o uso de prop-drilling em seu aplicativo Uma das coisas mais
legais sobre o React é que temos uma infinidade de opções para resolver situações específicas.
Também temos mais algumas formas de bibliotecas, uma série de bibliotecas CSS e, para a parte
mais importante do React, uma série de outras bibliotecas relacionadas a questões de dados de
estado no React.
Identificar quando utilizar uma biblioteca específica em nosso projeto é um talento que adquirimos
com a prática. Particularmente com o React, onde há tantas bibliotecas para escolher, podemos
começar a instalar e utilizar bibliotecas que não precisamos.
A Context API é uma API do React que pode lidar com uma variedade de problemas relacionados
ao gerenciamento de estado e como o estado é entregue aos componentes em projetos modernos.
Em vez de instalar uma biblioteca de gerenciamento de estado em seu projeto, o que pode reduzir
o desempenho do projeto e aumentar o tamanho do pacote, você pode apenas utilizar a Context
API e ficar bem.
Vamos ver o que é a Context API, quais problemas ela resolve e como usá-la.
Por que API de Contexto?
Um dos princípios do React é dividir seu aplicativo em componentes para reutilização. Portanto,
temos alguns componentes diferentes em um pequeno aplicativo React. À medida que nosso
aplicativo se expande, esses componentes podem se tornar grandes e incontroláveis, portanto,
precisamos dividi-los em partes menores.
Essa é uma das melhores ideias do React: você pode projetar vários componentes e ter uma
aplicação sucinta e mantida sem precisar fazer um componente super colossal para lidar com toda
a sua aplicação.
Depois de dividir os componentes em componentes menores para facilitar a manutenção, esses
pequenos componentes agora podem exigir determinados dados para operar normalmente. Se
esses pequenos componentes requerem dados para funcionar,
os dados devem ser enviados do componente pai para o componente filho usando props. É aqui
que podemos desacelerar nosso aplicativo e causar problemas no desenvolvimento.
Suponha que temos um componente chamado Notes que supervisiona a renderização de

muitas anotações.
const Notas = () => { const [notas]

= useState([
{
título: "Primeira nota", descrição:
"Esta é a primeira nota", feito: falso
}]);
return ( <div>
<h1>Notas</h1>
{notes.map(note => { return
( <div>
<h1>{note.title}</h1>
<h3>{note.description}</h3 > <p>{note.done?
"feito!" : "não feito!"}</p> </div> ); })} </div> ); };
Podemos ver neste código que podemos dividir este componente em componentes menores,
tornando nosso código mais claro e gerenciável. Por exemplo, podemos construir um componente
Note e aninhar três componentes adicionais dentro dele: Title, Description e Done.
const Notas = () => {

const [notas] = propriedade([
{
título: "Primeira nota", descrição:
"Esta é a primeira nota",
feito: falso
}]);
retornar (
<div>
<h1>Notas</h1>
{notes.map(({ título, descrição, feito }) => {
return <Nota título={título}
descrição={descrição} feito={feito} />;
})}
</div> ); };
const Nota = ({ título, descrição, feito }) => {

retornar
( <div>
<Title title={title} />
<Descrição descrição={descrição} />
<Concluído ={concluído} /
> </
div> ); };
const Title = ({ title }) => { return <h1>{title}</

h1>; };
const Descrição = ({ descrição }) => { return <h3>{descrição}

</h3>; };
const Descrição = ({ descrição }) => { return <h3>{descrição}

</h3>; };
Agora temos alguns componentes, e a capacidade de reutilização e manutenção de

nosso aplicativo de exemplo foi aprimorada. No entanto, se esta aplicação aumentar
de tamanho e sentirmos a necessidade de dividir esses componentes em componentes
menores no futuro, podemos ter um problema.
Passar dados via props repetidamente pode causar problemas para seu
aplicativo. Você pode fornecer mais suporte do que o necessário às vezes, ou pode
deixar de enviar os acessórios necessários, renomear os acessórios por meio dos
componentes sem perceber e assim por diante. Suponha que você esteja fornecendo
dados do componente pai para um componente de quarto ou quinto nível usando props. em tal
Por exemplo, você não está reutilizando e produzindo código sustentável, o que pode
comprometer o futuro do seu programa.
Isso é conhecido como "perfuração de suporte". A médio e longo prazo, isso pode atrapalhar
e desacelerar seu desenvolvimento – dar props repetidamente aos seus componentes causará
dificuldades futuras em sua aplicação.
Esse é um dos principais problemas que a Context API foi criada para resolver para nós.
API de contexto
A API Context pode ser usada para comunicar dados com diferentes componentes sem ter
que alimentar dados explicitamente por meio de props. A API Context, por exemplo, é adequada
para os seguintes casos de uso: temas, idioma do usuário, autenticação e assim por diante.
criarContexto
Para começar a usar a API Context, devemos primeiro construir um contexto usando o método
createContext do React.
const NotesContext = createContext([]);
O método createContext recebe um valor inicial; no entanto, não é necessário.
Depois de criar seu contexto, ele agora tem dois componentes React:
Provedor e Consumidor.
Fornecedor
O componente Provider será utilizado para encapsular todos os componentes que terão acesso
ao nosso contexto.
<NotesContext.Provider value={this.state.notes}>
...
</Notes.Provider>
O componente Provider recebe um valor chamado prop, que pode ser acessado por todos os
componentes contidos nele e supervisiona o acesso aos dados de contexto.
Consumidor
Depois de agrupar todos os componentes que precisarão de acesso ao contexto no componente

Provedor, você deve especificar qual componente consumirá esses dados.
Um componente React pode assinar mudanças de contexto usando o

componente Consumer. Uma propriedade de renderização é usada pelo componente
para disponibilizar os dados.
<NotesContext.Consumer>
{valores => <h1>{valor</h1>}
</Notes.Consumer>
useContext
Você pode estar usando React Hooks há algum tempo, mas se você não sabe o
que são ou como eles funcionam, deixe-me explicá-los brevemente:
• React Hooks nos permitem lidar com dados de estado dentro da comunicação funcional
componentes; não precisamos mais desenvolver componentes de classe para gerenciar

dados de estado.
• O React tem vários ganchos integrados, como state, useCallback, useEffect e

assim por diante. Mas aquele sobre o qual iremos discutir e aprender mais
aqui é o hook useContext.
Podemos nos conectar e consumir um contexto usando o gancho useContext.

O gancho useContext recebe um único parâmetro, que é o contexto ao qual você
deseja obter acesso.
const notas = useContext(NotasContext);
O componente useContext é muito superior ao componente Consumer em termos

de legibilidade e manutenção, podemos entender rapidamente o que está
acontecendo e melhorar a manutenção geral de nosso aplicativo.
Agora, vamos fazer um exemplo usando a API Context e o hook para mostrar
como funciona na prática. Vamos criar um aplicativo básico para determinar se o
usuário está autorizado ou não.
Vamos nomear o arquivo context.js. Dentro desse arquivo, construiremos nosso
contexto e provedor, importaremos os ganchos estate e useContext do React e
estabeleceremos nosso contexto, que chamaremos de AuthContext. Por enquanto,
o valor inicial do nosso AuthContext será indefinido.
importar React, { propriedade, useContext } de "reagir"; const AuthContext =

React.createContext(indefinido);
Desenvolveremos um componente funcional chamado AuthProvider, que aceitará

filhos como props. Dentro deste componente, vamos renderizar mais itens e manipular
os dados de estado que queremos trocar com os outros componentes.
const AuthProvider = ({ filhos }) => {

...
};
Primeiro, vamos construir nosso estado de autenticação. Este será um estado booleano
básico usado para determinar se o usuário está ou não autorizado. Além disso,
escreveremos um método chamado handleAuth que se encarregará de mudar nosso
estado de autenticação.
const [auth, setAuth] = useState(false); const

handleAuth = () => { setAuth(!
auth); };
Como o provedor não aceita valores de array, construiremos um array chamado data
que contém nosso estado de autenticação e nosso método handleAuth. Esta informação
passará como um valor para nosso AuthContextProvider.
const AuthProvider = ({ filhos }) => {

const [auth, setAuth] = useState(false); const
handleAuth = () => { setAuth(!
auth); }; dados
const = [auth, handleAuth]; return

<AuthContext.Provider value={data}>{children}
</AuthContext.Provider>; };
Agora, em nosso arquivo context.js, adicionaremos um componente de gancho simples

chamado useAuth, que será usado para consumir nosso contexto. Se tentarmos utilizar
este componente fora do nosso provedor, ele travará.
const useAuth = () => { const

context = useContext(AuthContext); if (contexto
=== indefinido) {
throw new Error("useAuth só pode ser usado dentro

AuthProvider");
} retorna contexto; };
Então, para a conclusão de nossa função, vamos exportar e usarAuth nosso AuthProvider.
Agora, em nosso componente index.js, devemos importar o componente AuthProvider

e agrupar os componentes que queremos permitir o acesso de contexto dentro deste
provedor. (“Entenda a API React Context – Telerik Blogs”)
importar { AuthProvider } de "./context"; ReactDOM.render(
<React.StrictMode>
<AuthProvider>
<App /> </
AuthProvider> </
React.StrictMode>,
rootElement
);
Em seguida, trataremos nossos dados de contexto em nosso arquivo App.js. Para

começar, devemos importar o gancho useAuth que desenvolvemos e obter o auth e o
handleAuth do useAuth.
Vamos fazer um botão que chamará o método handleAuth toda vez que for clicado.
Vamos também verificar se o valor de autenticação muda quando clicamos no botão
usando uma renderização ternária de um h1 básico.
importar { useAuth } de "./context"; app const = () => {
const [auth, handleAuth] = useAuth(useAuth); retornar (
<div>
<h3>Está autenticado?</h3> <h1>{auth
=== false? "Não autenticado" : "Autenticado"} </h1> <button
onClick={handleAuth}>Alterar
autenticação</
botão>
</div>); };
Agora temos um aplicativo simples que faz uso da API Context. Vale a pena notar que não
precisamos transferir nenhuma propriedade dos componentes pai para filho.
Em alguns casos, como autenticação, a API de Contexto pode ser útil para identificar se
o usuário está ou não autenticado em vários componentes não relacionados.
API de contexto do React e fornecer/injetar no Vue Em um
aplicativo complicado, você frequentemente encontrará circunstâncias nas quais deve fornecer
muitos adereços de seu componente pai para um componente filho profundamente aninhado.
Quando confrontado com tais circunstâncias, DI é uma ferramenta especialmente útil.
Redux/Vuex é uma tecnologia de injeção de dependência popular no domínio front-end.

Juntamente com DI, eles resolvem vários problemas adicionais, como transições de estado
previsíveis e os listados abaixo.
Embora uma única loja resolva muitas dificuldades, ela tem certos limites, que são os
seguintes:
1. Quando você tem muitos recursos em seu aplicativo, deseja que cada um tenha um
contexto (armazenamento) exclusivo. Você não quer que um elemento do seu aplicativo
interfira em outro.
2. Como desenvolvedor de plug-ins, você não deseja apagar o plug-in do usuário

itens específicos da loja do usuário.
3. Quando você tem um componente vinculado à loja, deseja várias instâncias desse
componente em sua página. Por exemplo, se você tiver um formulário vinculado à loja,
precisará de 2 a 3 formulários na mesma página.
O React 16.3 estreou a API de contexto, que rapidamente ganhou popularidade. Não era
nada fora da caixa que não existia anteriormente, mas uma melhor documentação e uma API
concisa tornaram mais fácil para os desenvolvedores utilizar a DI e a tornaram mais acessível.
Estamos criando um formulário (em um aplicativo posterior) com vários componentes

aninhados e podemos ter vários componentes de formulário na página. Como resultado, neste
cenário, todos os componentes de formulário não podem compartilhar um único armazenamento.
Também não queremos destruir o estado do usuário porque queremos tornar esse componente
de código aberto. Por fim, se utilizarmos a loja primária do Vuex, o usuário final terá que
registrá-la manualmente, dificultando a integração do plug-in.
Surpreendentemente, o Vue.js fornece uma API maravilhosa (suprir e injetar) que

é discutida abaixo para ajudá-lo a criar uma API semelhante à Context API. Aqui está
como eu fiz isso.
Lembre-se de que excluí nosso código específico de plug-in para
razões óbvias.
Plugin/ core/ util/ store-template.js
export const state = () => ({ dados: {},

erros: []
})
exportar mutações const = { }
exportar ações const = { }
Este é o local do arquivo da minha loja. Esse arquivo é armazenado no plug-in e

contém todo o código relacionado ao plug-in da loja.
Plugin/ core/ index.vue
<modelo>
<div class="Formulário">
 </div> </
template>
<script>
import { storeTemplate } de "./core/util"; importar Vuex de
"vuex"; export default { name:
"Form", props:
{ ischemia: { type:
Object,
required: true
},
schema:
{ type: Object,
required: true
},
dados:
{ tipo: Objeto
},
renderizadores: {
tipo: Matriz
}
},
data()
{ return
{ iStore: new Vuex.Store({ estado:
storeTemplate.state, mutações:
storeTemplate.mutations, ações: storeTemplate.actions
})
};
},
provide: function() { return { iStore:
this.iStore
};
},
created()
{ this.iStore.dispatch("initForm", {
uiSchema: this.uiSchema,
renderizadores: this.renderers, esquema:
this.schema, data: this.data
});
this.iStore.subscribe((mutação, estado) => { if (mutação.type ==
"updateData") {
this.$emit("onDataChanged", estado.data);
}
});
},
calculado: {}
};
</script>
<style lang="scss"> .Form

{ largura:
100%; altura: 100%;
} </estilo>
Este é o arquivo principal do plug-in e é executado sempre que o usuário renderiza o

componente de formulário em seu componente. Conforme mostrado no gancho de dados,
estou criando uma nova instância de armazenamento e atribuindo-a à chave iStore na
função de fornecimento.
Plugin/ components/ nested-component.vue
<modelo>
<div>
<div>Componente de formulário aninhado</div>
</div>
</modelo>
<script>
export { ReviewLayoutTester }; export default
{ props: {}, inject:
["iStore"],
montado () {
console.log(this.iStore.state.
dados);
}
};
</script>
<estilo> </
estilo>
Você pode simplesmente injetar o iStore em qualquer um dos componentes aninhados filho
e começar a utilizá-lo.
Não precisamos educar o usuário sobre nada interno porque todos os componentes do
Form podem lidar com lojas próprias. Além disso, todo o código específico do plug-in é
gerenciado em um local específico dentro do plug-in.
Muitas bibliotecas React e Vue usam DI. Eu gostei da abordagem de IU de materiais

com estilos quando comecei a trabalhar com o React. DI pode ser difícil de pensar e aplicar
às vezes. No entanto, ao aprender essas abordagens, você não apenas será capaz de
produzir código mais sustentável, mas também será capaz de entender e depurar bibliotecas
rapidamente, tornando-o um desenvolvedor melhor em geral.
Suponha que você esteja desenvolvendo um componente acordeão que gostaria de

disponibilizar ao público por meio de um pacote npm. Você deseja que o usuário do
acordeon seja capaz de usar o elemento de forma altamente flexível, construindo vários
componentes juntos.
Suponha que o seguinte seja sua API ideal:
<Acordeão>
<AccordionItem>
<AccordionHeader>Conteúdo do cabeçalho</
AccordionHeader>
<AccordionPanel>Conteúdo do painel</AccordionPanel>
</AccordionItem>
</Acordeão>
AccordionItem contém cada componente do acordeão que pode ser estendido ou

recolhido, AccordionHeader é onde o usuário clica para expandir ou recolher e
AccordionPanel contém o conteúdo a ser mostrado ou ocultado.
Cada AccordionItem deve manter algum estado, seja ele expandido ou não. No
entanto, AccordionHeader também deseja acessar esse valor para exibir o botão de
alternância relevante. AccordionPanel também pode exigir acesso a isso porque é o item
que é expandido e recolhido.
Uma opção é fornecer o valor ampliado ao usuário por meio de propriedades de
renderização e garantir que sua documentação os informe que eles devem enviar isso
para o cabeçalho e os componentes do painel.
<Acordeão>
<AccordionItem render={({expanded}) => (
<AccordionHeader expandido={expandido}>
Conteúdo do cabeçalho
</AccordionHeader>
<AccordionPanel expandido={expandido}>
Conteúdo do painel
</AccordionPanel>
)} /
>
</Acordeão>
Embora isso possa parecer uma abordagem razoável, não é ideal que o
O consumidor do nosso componente deve se preocupar com a qualidade do componente
internos. O fato de AccordionHeader e AccordionPanel exigirem acesso ao estado

estendido não deve ser motivo de preocupação para nosso usuário.
Também deve ser observado que, embora este seja um exemplo simples, seu
componente pode ser significativamente mais complicado, com vários níveis de
componentes aninhados, caso em que a perfuração de escoras pode consumir muito tempo.
Usando a API Context do React

Para situações como essas, existe uma solução melhor: a API Context do React.
Podemos utilizar a API Context para construir algum estado e fornecê-lo onde for
necessário nos bastidores, removendo essa preocupação de nossa API voltada para o público.
Para começar, vamos estabelecer um contexto e determinar sua forma. Para
começar, usaremos um valor expandido e uma função toggleExpansion. Este contexto
é definido como sendo especialmente relevante para o nosso item sanfona:
const AccordionItemContext = React.createContext({ expandido: false,

toggleExpansion: () =>
{}
});
Agora, em nosso componente AccordionItem, especificaremos os valores expandido

e toggleExpansion e os passaremos para o valor do componente Provider.
classe AccordionItem extends React.Component {

construtor (propriedades)
{ super(propriedades)
this.toggleExpansion = () =>
{ this.setState({ expandido: !this.state.
expandido }) }
this.state =
{ expandido: false,
toggleExpansion: this.toggleExpansion
}
}
renderizar ()
{ retornar (
<AccordionItemContext.Provider
valor={este.estado}>
<div className="accordion-item">
{this.props.children} </div> </
AccordionItemContext.Provider>
)
}
}
Metade da equação de Contexto é o Provedor. O consumidor é o outro lado da

equação. Como veremos em breve, o Provedor permite que o Consumidor assine as
mudanças de contexto.
Em seguida, devemos configurar AccordionHeader e AccordionPanel como
consumidores de contexto:
const AccordionHeader = (props) => { return
( <AccordionItemContext.Consumer>
{({ expandido, toggleExpansion }) => ( <h2
className="accordion-header">
<button onClick={toggleExpansion}> { expandido?
'ÿ' : 'ÿ' } { props.children } </button>
</h2>
)}
</AccordionItemContext.Consumer>
)
}
Como filho, o componente Consumer requer uma função. Esta função receberá o valor
de contexto, que será destruído em expandido e toggleExpansion. Nosso componente
agora pode usar esses dados em seu modelo.
Da mesma forma, usaremos Consumer para conceder acesso AccordionPanel ao
valor de contexto:
const AccordionPanel = (adereços) => {

retornar (
<AccordionItemContext.Consumer>
{({ expandido }) => <div
className={"accordion-panel " + (expandido? 'expandido' : '')}>{props.children}</
div>}
</AccordionItemContext.Consumer>
)
}
Agora podemos realmente criar nossa API perfeita para o componente sanfona.
Os usuários do nosso componente não terão que se preocupar em enviar o estado para
cima ou para baixo na árvore de componentes. Eles desconhecem o interior dos
componentes:
<Acordeão>
<AccordionItem>
<AccordionHeader>Conteúdo do cabeçalho</
AccordionHeader>
<AccordionPanel>Conteúdo do painel</
Painel Acordeão>
</AccordionItem>
</Acordeão>
Fornecer/Injetar no Vue O
Vue tem uma ferramenta chamada fornecer/injetar que é comparável à API de contexto
do React. Utilizaremos o método de fornecimento em nosso componente acordeon-item
Vue para fazer isso:
Vue.component('accordion-item', { data () { return

{ sharedState:
{ expandido:
false
}
}
},
fornecer ()
{ retornar {
acordeonItemState: this.sharedState
}
},
render (criarElemento) {
return createElement( 'div',
{ class:
'accordion-item' }, this.$slots.default
)
}
})
Retornamos um objeto de provide () que contém o estado que queremos fornecer a outros
elementos. Vale notar que enviamos um objeto para o acordeonItemState ao invés de
simplesmente passar o valor <code">expandido. Para ser reativo, o supply deve passar um
objeto.
Deve-se notar que estamos gerando este componente com uma função render, que não
é essencial para usar o provide/inject.
Agora vamos injetar esse estado em nossos componentes filhos. Vamos apenas utilizar a
propriedade inject, que aceita um array de strings correspondentes às propriedades do objeto
definidas em give.
Vue.component('accordion-header', { inject:
['accordionItemState'],
modelo: '
<h2 class="accordion-header"> <button
@click="accordionItemState. expandido = !
accordionItemState.expanded">
{{ acordeonItemState.expanded? 'ÿ':
'ÿ' }}
<slot></slot> </
button> </h2>
'
})
Podemos acessar esses valores em nosso modelo depois de adicionar o nome da propriedade
em inject.
Vue.component('painel-acordeão', {
injetar: ['accordionItemState'],
modelo: '
<div class="accordion-panel" :class="{
expandido: acordeonItemState.expanded }">
<slot></slot> </div>
'
})
Use com cuidado
Vale a pena lembrar que você só deve enviar props implicitamente quando fizer sentido. O
uso excessivo disso pode esconder o verdadeiro
funcionalidade de seus componentes e confundir outros desenvolvedores que possam estar trabalhando
em seu projeto.
Uma biblioteca de componentes compactados e distribuídos para uso em outros aplicativos é um
caso de uso adequado, pois os atributos internos dos componentes não precisam ser divulgados ao
usuário final.
Por meio do compartilhamento de estado implícito, a API de contexto do React e o provedor de Vue/
a funcionalidade de injeção habilita isso.
Visibilidade completa em aplicativos React de produção A depuração
de aplicativos React pode ser desafiadora, especialmente quando os usuários encontram bugs difíceis
de recriar. Se você deseja monitorar e rastrear o estado do Redux, descobrir automaticamente bugs de
JavaScript e medir consultas de rede lentas e tempo de carregamento de componentes, experimente
o LogRocket.
O LogRocket funciona de forma semelhante a um DVR para aplicativos da web, capturando tudo o
que ocorre em seu projeto React. Em vez de especular por que os problemas surgem, você pode coletar
e relatar a condição de seu aplicativo no momento em que ocorreu um problema. O LogRocket também
monitora o desempenho do seu aplicativo, fornecendo dados como carga da CPU do cliente, consumo
de memória do cliente e muito mais.
O pacote de middleware LogRocket Redux fornece mais visibilidade em suas sessões de usuário.
O LogRocket registra todas as atividades e estados da loja Redux.
Ao trabalhar com a API Vue 3 Composition, há várias novas maneiras de acessar a funcionalidade
do componente. Nesta seção, veremos o argumento de contexto da função setup.
Esses ajustes são necessários, pois a API de composição não tem a mesma referência a isso que a
API de opções.
Poderíamos usar a API de opções para usar console.log(this) em qualquer uma das opções para
adquirir uma referência ao próprio componente, permitindo-nos acessar seus props, propriedades
computadas, dados e muito mais.
exportar padrão
{ adereços: {
Sobrenome: String, },
data()
{ return
{ nome: "olá", }; },
criada() {
console.log(this.lastNameModifiers); // adereços são

nisto'
console.log(this.name); // os dados estão em 'this'
this.createdMethod(); // os métodos estão em 'this' }, methods:
{ createdMethod()
{ console.log("created"); }, }, };
O Vue 3, por outro lado, nos permite usar a API de composição, onde todo o nosso
código está contido em uma função de configuração. Isso implica que definimos
nossos dados reativos, métodos e propriedades calculadas na configuração.
importar { ref } de "vue"; export default

{ props: { Lastname:
String, },
setup() { // Como
obtemos
acesso aos props se não temos isso?
const createdMethod = () =>

{ console.log("created"); }; const
nome = ref("olá");
métodocriado(); return
{ métodocriado,
nome,
}; }, };
A configuração ocorre antes da criação de nossa instância de componente. Como

nossa propriedade de configuração define tudo para nosso componente, ela não
contém mais uma referência ao próprio elemento.
Então, como acessamos as propriedades do componente?
A API de composição nos fornece maneiras adicionais de recuperar informações críticas de

componentes, como props e slots.
Isso é viável porque nosso método de configuração aceita dois atributos que nos permitem
acessar as propriedades do componente: props e context. props contém props declarados em
nosso componente. Um contexto é um objeto JavaScript que expõe três atributos.
Essas três características são as seguintes:
1. Context.attracts: os atributos non-prop dados ao nosso componente.
2. Context.slots: um objeto contendo todos os métodos de renderização para nossos slots de

modelo.
3. Context.emit: a técnica através da qual nosso componente com

comunica eventos.
Vamos dar uma olhada mais profunda em cada um deles.
context.attrs
Novamente, context.attrs contém todos os atributos non-prop que foram passados para nosso
componente.
O que exatamente isso significa?
Qualquer propriedade de elemento que adicionarmos que não esteja declarada em nossas props será
disponível em context.attrs quando utilizamos nosso componente.
Suponha que temos um componente personalizado que aceita uma proposta de valor.

{ value:
String, }, setup(props,
context) { console.log(context.attrs); }, };
Em seguida, passamos várias características em um componente pai.
<modelo>
<componente personalizado
:valor="valor"
teste="oi"
@close="fechar"
/>
</modelo>
Como você pode ver, inclui tudo, exceto nossos adereços declarados. Ouvintes de eventos e
atributos HTML são exemplos disso.
Uma coisa a ter em mente é que attrs não é reativo. Ou seja, se quisermos implementar
efeitos colaterais em resposta à alteração dos valores attrs, devemos utilizar o gancho de ciclo
de vida onUpdated.
context.slots
Em seguida, considere o contexto. Caça-níqueis são um pouco desconcertantes, então vamos
dar um exemplo de por que eles são benéficos.
Em uma palavra, contexto. Os slots nos fornecem acesso ao método de renderização de
cada slot. Isso é importante quando não estamos utilizando código de modelo e estamos
desenvolvendo nosso próprio método de renderização exclusivo.
Vue sugere a utilização de templates na maioria das circunstâncias; no entanto, se você
realmente deseja obter todo o poder do JavaScript, podemos escrever nossas próprias funções
de renderização.
Um excelente momento para utilizar um método de renderização personalizado, de acordo

com as instruções do Vue, é quando estamos desenvolvendo um componente que renderiza um
valor de slot com um cabeçalho de nível diferente, dependendo do valor de um prop.
<modelo>
<div>
<h1 v-if="nível == 1">
<slot /> </
h1>
<slot /> </
h2>
<slot /> </
h3>
<slot /> </
h4>
<slot /> </
h5>

<slot /> </
h6> </
div> </
template>
<script>
{ props:
{ level: Number,
},
} </script>
Para todas as seis opções de título, usamos condicionais v-if e v-else-if neste código.
E, como você pode ver, há muitos códigos idênticos, fazendo com que a página
pareça excessivamente confusa.
Em vez disso, podemos construir nosso cabeçalho programaticamente usando o
método render. É assim que o método de configuração da API de composição se
parece.
importar { h } de "vue"; export

default { props: { level:
Number, },
setup(props, context)
{ console.log("here"); return () =>

h( "h" + props.level, {} // props
e atributos:
OPCIONAL /* FALTANDO! é
aqui que as crianças vão, para nós nosso slot */ );
}, };
No entanto, como podemos obter nossos slots para renderizar?

É aí que entra o contexto. Slot entra em jogo.
Fornecendo-nos acesso à função de renderização de cada slot. Cada slot é
acessível por seu nome e, como não identificamos especificamente nosso slot, ele
é denominado padrão.
importar { h } de "vue"; export

default { props: { level:
Number, },
setup(props, context)
{ console.log("here"); retorno() =>

h(
"h" + props.level, {}, //

props e atributos: OPTIONAL context.slots.default() /*
Padrão de renderização
slot */);
}, };
Agora, se executarmos isso com um componente pai básico como este, veremos o
que acontece.
<modelo>
<componente-filho :level="1">
Olá a todos </child-
component> </template>
context.emit
Finalmente, considere o contexto. emit toma o lugar de this.$emit como nosso método
de emitir eventos de nosso componente.
Isso é útil para transmitir qualquer tipo de evento para um componente pai, com ou
sem dados.
Suponha que queremos criar um botão X que gere um evento de fechamento.
<template>
<div>
<button @click="closeModal">X</button> </div> </
template>
<script> padrão
de
exportação { setup
(props, context) {
const closeModal = () => {
context.emit('close' /* pode passar a carga útil

aqui */) }
return {
closeModal
}
}
} </script>
Em seguida, usando a diretiva von, podemos ouvir esse evento de fechamento em nosso
componente pai.
<modal-component @close="handleClose" />
A que não temos acesso durante a configuração?

Até agora, vimos como a API de composição nos fornece acesso
a quatro tipos diferentes de propriedades: props, attrs, slots e emit.
No entanto, como a configuração ocorre antes de nossa instância de componente ser formada,
não teremos acesso às três propriedades de componentes a seguir:
• dados
• calculado
• métodos
Essas são propriedades que definimos na configuração, mas não há um mecanismo

interno para acessar uma lista de todas as propriedades de dados, por exemplo.
CONCLUSÃO
Este capítulo nos ensinou sobre APIs de Contexto, o que são e como utilizá-las. No
capítulo seguinte, aprenderemos sobre testing, nock e Vue.js-testing-library.
Capítulo 8
Biblioteca de teste Vue
NESTE CAPÍTULO
ÿ NOCK
ÿ Vue.js-testing-library
Aprendemos sobre a API de contexto, incluindo o que são e como são utilizados, no
Capítulo 7. Este capítulo nos ensinará sobre testes, Nock e a biblioteca Vue.js-testing-library.
NOCK
Nock é uma biblioteca de zombarias e expectativas do servidor Node.js.
Nock pode usar para isolar e testar módulos que executam solicitações HTTP.
Por exemplo, se um módulo enviar consultas HTTP para um servidor CouchDB ou
a API da Amazon, você pode isolar esse módulo e testá-lo separadamente.
Como funciona?
Nock funciona alterando o método HTTP.request em Node. Ele também substitui o

HTTP.ClientRequest para habilitar os módulos que o utilizam diretamente.
Iremos verificar:
• Por que zombar de solicitações HTTP durante o teste?
• O que é Nock?
• Exemplos de código de Nock e Nock.back.
DOI: 10.1201/9781003310464-8 183

Por que executar solicitações HTTP simuladas durante o teste?
Manter a cobertura de teste e escrever testes confiáveis pode ser difícil ao lidar com código que
depende de serviços externos. Por vários motivos, os testes que executam consultas HTTP
reais para serviços externos podem ser propensos a erros. Por exemplo, os dados precisos
entregues variam de acordo com cada solicitação, problemas de conectividade de rede ou
mesmo limitação de taxa.
A menos que o teste seja expressamente destinado a verificar a disponibilidade, velocidade
de resposta ou forma de dados de um serviço externo, ele não deve falhar devido a uma
dependência externa.
Interceptando e regulando o comportamento de solicitações HTTP externas

restaura a confiabilidade de nossos testes. É quando Nock entra.
O que é Nock?
• Nock é uma biblioteca de zombarias e expectativas do servidor HTTP Node.js.
• Nock pode usar para testar módulos que executam solicitações HTTP.
• Nock funciona alterando o método HTTP.request em Node. Ele também substitui

HTTP.ClientRequest para acomodar os módulos que o utilizam diretamente.
Ao interceptar consultas HTTP externas e nos permitir enviar respostas sob medida para testar
diferentes situações ou salvar resultados precisos como “consertos”, dados enlatados que
retornarão respostas confiáveis, Nock nos ajuda a evitar os problemas mencionados.
O uso de dados preparados tem desvantagens, pois podem ficar obsoletos se não forem
renovados regularmente. Sem testes extras explícitos ou controle de versão de API fixo, uma
alteração na forma dos dados fornecidos por uma API pode passar despercebida. A
responsabilidade do desenvolvedor é garantir que as medidas preventivas sejam implementadas.
Em nosso teste de ponta a ponta, vemos um exemplo da minha atual empresa. Eles usam
acessórios Nock, pois ocasionalmente falham devido a tempos limite quando executados como
parte de nosso processo de entrega contínua.
Quando um desenvolvedor realiza esses testes localmente, os acessórios são imediatamente
removidos e regenerados, garantindo que estejam sempre atualizados.
Atualmente, Nock é usado de duas maneiras:
• Nock é usado para zombar de respostas específicas definidas pelo desenvolvedor.
• Nock.back é usado para gravar, salvar e reutilizar respostas ao vivo.

Biblioteca de teste Vue ÿ 185
Ambos podem ser encontrados em testes individuais. Se ambos forem usados no mesmo arquivo
de teste, o modo nock.back deve ser definido e redefinido explicitamente antes e depois do uso.
Nós vamos passar por isso com mais detalhes mais tarde.
Vamos criar um projeto, adicionar Nock e comparar Nock com Nock. Estou de volta com mais
alguns exemplos de código.
Adicionando Nock
Este projeto de exemplo será construído. Ele inclui vários métodos simples que chamam uma API
de geração de usuário aleatório, tornando-o ideal para testes com Nock.
Ele emprega o Jest como executor de testes e gerador de assertivas.
No exemplo a ser testado, três funções estão disponíveis: obter um usuário aleatório, obter um
usuário aleatório de uma determinada nacionalidade e obter um usuário aleatório, mas retornar às
configurações padrão em caso de falha. Aqui está um exemplo:
const getRandomUserOfNationality = n =>

fetch('https://randomuser.me/api/?nat=$
{n}') .then(throwNon200) .then(res

=> res.json()) .catch(e => console.log(e));
Estávamos usando Nock na época. Um arquivo auxiliar nock.js foi utilizado naquela época, o que
veremos mais adiante.
Usando 'nock'
Isso é muito bem explicado nos documentos do Nock. Existem várias possibilidades de especificar
a modificação do pedido, seja no pedido correspondido ou na resposta fornecida. A resposta
recebida após uma solicitação bem-sucedida e produzindo uma resposta 500 para testar as
opções de fallback de uma função são duas
instâncias.
Tudo o que seria necessário adicionar ao arquivo de teste existente para começar a usar Nock
é const nock = require('nock'); / importar nock de 'nock';.
No primeiro teste, combinamos o nome do host e o caminho com uma string e especificamos
um código de resposta e uma mensagem. A asserção é subseqüentemente adicionada à cadeia
Promise de nossa chamada de função. Quando a solicitação recebida de get random user()
corresponde ao interceptor Nock que acabamos de configurar, a resposta que definimos é
retornada.
it('deve retornar um usuário', () => {
nock('https://randomuser.me')
.get('/
api/') .reply(200,
{ resultados: [{ nome: 'Dominic' }], });
consulta de
retorno .getRandomUser() .then(res =>

res.results[0].name) .then(res => expect(res).toEqual('Dominic'));});
Da mesma forma, imitamos uma chamada com uma nacionalidade especificada, mas desta vez
combinamos o nome do host e o caminho usando um RegExp.
it('deve retornar um usuário de nacionalidade definida', () =>

{ nock(/random/) .get(/
nat=gb/) .reply(200,
{ results: [{ nat:
'GB' }], }); consulta de
retorno .getRandomUserOfNationality('gb') .then(res => res.results[0].nat) .the
Vale a pena observar que estamos usando afterAll(Nock.restore) e afterEach (Nock.cleanAll) para
garantir que os interceptadores não entrem em conflito uns com os outros.
Por fim, executamos um teste de 500 respostas. Para isso, desenvolvemos um novo método
que retorna um valor padrão caso a requisição da API não forneça uma resposta.
Antes de verificar a saída da função, usamos Nock para interceptar a requisição e simular uma
resposta 500.
it('deve retornar um usuário padrão em 500', () => { nock(/

randomuser/) .get(/
api/) .reply(500); return
query .getRandomUserGuarded() .then(res =>

expect( res).toMatchObject(defaultU ser));});
É realmente útil poder imitar códigos de resposta diferentes de 200, atrasos de conexão e tempos
limite de soquete.
Usando 'nock.back' A
função nock.back é usada não apenas para interceptar uma solicitação HTTP, mas também para
registrar a resposta real para uso posterior. Essa resposta armazenada é conhecida como
"acessório".
Se o equipamento identificado estiver presente no modo de gravação, ele será usado no

lugar das chamadas ao vivo; caso contrário, será estabelecido um calendário para chamadas
futuras.
Embora apenas uma solicitação HTTP seja executada por teste em nosso projeto de
amostra, os fixtures nock.back são capazes de registrar todas as chamadas de saída. Isso é
especialmente útil ao testar um componente complicado que contata vários serviços ou ao
realizar testes de ponta a ponta, quando várias chamadas podem ser feitas. O principal
benefício da utilização de acessórios é que eles são rápidos de acessar uma vez estabelecidos,
eliminando a possibilidade de intervalos. Como eles estão usando dados genuínos, a
imitação da estrutura de dados é desnecessária e qualquer alteração pode ser detectada.
Como afirmado anteriormente, é fundamental remover e atualizar os acessórios

regularmente para evitar que fiquem obsoletos.
Um “recurso” atual do nock.back é que ele pode interferir com interceptadores de nock
comuns quando usado no mesmo arquivo de teste, sem que nenhum nock seja utilizado.
Os backtests são marcados para cada teste da seguinte maneira:
nock.back.setMode('record');// seu testnock.back. setMode('selvagem');
Isso garante que quaisquer testes subsequentes não utilizem erroneamente os dispositivos
que acabaram de ser preparados. Se isso não for feito, então, por exemplo, a resposta 500
em nosso teste anterior não seria fornecida porque a instituição só tem uma resposta 200.
Devemos primeiro criar um arquivo auxiliar nock.js. Isso faz três coisas no
seguinte exemplo:
• Especificar onde queremos manter nossos equipamentos.
• Definir o modo para gravar para que, quando os testes forem realizados, registremos e
utilizemos equipamentos, em oposição ao teste normal, que apenas usa instituições
existentes, mas não registra novas
uns.
• Usando a opção afterRecord, podemos realizar várias ações em nosso

acessórios para melhorar sua legibilidade.
Isso pode ser acessado em arquivos de teste por meio de const defaultOptions = require('./
helpers/nock');/import defaultOptions from './helpers/nock';.
“Nock.back” pode ser usado com Promises ou Async/Await; exame

ples de ambos são fornecidos. Discutiremos o último nesta seção.
it('deve retornar um usuário', async () => { nock.back. setMode('record'); const

{ nockDone } = await nock. back( 'user-data.json', defaultOptions,
); const userInfo = await query.getRandomUser();

expect(userInfo).toEqual(
expect.objectContaining({
resultados: expect.any(Object), }), );
nockDone();
nock.back.setMode('wild');});
Primeiro marcamos o teste como assíncrono para que possamos utilizar await. Mudamos
para o modo de gravação. Passamos o nome do arquivo para salvar nossos equipamentos,
bem como as opções padrão fornecidas em nosso auxiliar nock.js para torná-los mais
legíveis por humanos. Na conclusão, recebemos a função nockDone, que será chamada
depois que nossas expectativas forem atendidas.
Agora podemos comparar o resultado de getRandomUser() com nossas expectativas.

Por uma questão de simplicidade, vamos apenas afirmar que incluirá resultados, que
conterão um Objeto.
Em seguida, definimos o modo como selvagem, pois não queremos que outros testes
utilizar o acessório neste cenário.
Os acessórios em si são fascinantes de se ver e podem ser encontrados no diretório

fornecido no auxiliar nock.js.
O Nock é uma ferramenta altamente eficaz para aumentar a confiabilidade dos testes
que usam serviços externos e permite maior cobertura de teste reavaliando testes que
anteriormente eram considerados muito instáveis para serem implementados.
Como acontece com qualquer simulação, é trabalho do desenvolvedor garantir que a
simulação não vá longe demais e que o teste ainda possa falhar devido a uma alteração
na funcionalidade, ou então seja inútil.
Mocking Actions
Vamos dar uma olhada em algum código.
Este é o componente que queremos testar. Refere-se às atividades Vuex.
<modelo> <div
class="text-align-center">
<input type="text" @input="actionInputIfTrue" /> <button
@click="actionClick()">Clique</button> </div> </template>
<script>
import { mapActions } de 'vuex'
exportar padrão { métodos:
{ ...mapActions(['actionClick']), actionInputIfTrue:
function actionInputIfTrue(event) {
const inputValue = event.target.value if (inputValue === 'input')

{ this.$store.dispatch('actionInput', { inputValue }) }
}
}
} </script>
Não nos importamos com o que as ações executam ou como a loja aparece para os
propósitos deste teste. Tudo o que precisamos entender é que essas atividades estão sendo
realizadas no momento certo e com o valor certo.
Quando montamos superficialmente nosso componente, devemos fornecer um dummy
store no Vue para testar isso.
Podemos enviar a loja para um – localVue em vez do construtor Vue padrão. Um

localVue é um construtor Vue que pode ser modificado sem afetar o construtor Vue global.
Vamos dar uma olhada nisso:
import { rasoMount, createLocalVue } de '@vue/

test-utils'
import Vuex from 'vuex' import Actions
from '../../../src/components/
Ações'
const localVue = createLocalVue()

localVue.use(Vuex)
describe('Actions.vue', () => {
deixe ações
deixar armazenar
beforeEach(() => { ações =

{ actionClick:
jest.fn(), actionInput: jest.fn()
} loja = new Vuex.Store({

ações
}) })
it('despacha "actionInput" quando o valor do evento de entrada é "input"', () => { const

wrapper = sandyMount(Actions,
{ store,
localVue })
const input = wrapper.find('input') input.element.value =
'input' input.trigger('input')
expect(actions.actionInput).toHaveBeenCalled() })
it('não despacha "actionInput" quando o valor do evento não é "input"', () => { const
wrapper = sandyMount(Actions, { store,
localVue })
const input = wrapper.find('input') input.element.value =
'not input' input.trigger('input')
expect(actions.actionInput).not.toHaveBeenCalled() })
it('chama a ação da loja "actionClick" quando o botão é

clicado', () => { const
wrapper = rasoMount(Ações, { armazenar,
localVue })
wrapper.find('button').trigger('click')
expect(actions.actionClick).toHaveBeenCalled() }) })
O que está acontecendo aqui? Com o método localVue.use, primeiro instruímos o Vue a
utilizar o Vuex. Isto é simplesmente um wrapper para Vue.use.
Em seguida, criamos uma loja falsa invocando o novo Vuex.Store com nosso mock
dados. Nós apenas passamos ações, já que é tudo o que nos interessa.
As atividades são apenas funções fictícias. Essas funções fictícias fornecem técnicas para
determinar se as ações foram chamadas ou não.
Podemos então afirmar em nossos testes que o stub de ação foi chamado quando
deveria ser invocado.
Agora, a maneira como definimos a loja pode não ser familiar para você.
Estamos usando beforeEach para garantir que a loja esteja limpa antes de cada teste.
beforeEach é um hook mocha que é executado antes de cada teste.
Em nosso teste, estamos reatribuindo o valor das variáveis de armazenamento. As funções

simuladas teriam que ser redefinidas automaticamente se não fizéssemos isso. Também nos
permite alterar o status de nossos testes sem afetar os testes subseqüentes.
O aspecto mais significativo desse teste é que construímos uma loja falsa do Vuex e a
enviamos para o Vue Test Utils.
Então, agora que podemos zombar de ações, vamos dar uma olhada em zombar de getters.
Getters zombadores
<modelo>
<div>
<p v-if="inputValue">{{inputValue}}</p> <p v-
if="clicks">{{clicks}}</p> </div> </template>
<script>
import { mapGetters } de 'vuex'
calculado: mapGetters(['clicks', 'inputValue'])
} </script>
Este é um componente bastante simples. Ele exibe o resultado dos cliques e inputValue dos
getters. Novamente, nós realmente não nos importamos com o que esses getters retornam; tudo
o que importa é que seu resultado seja apresentado adequadamente.
Vamos colocar à prova:

test-utils'
importar Vuex de 'vuex' importar
Getters de '../../../src/components/Getters'
localVue.use(Vuex)
describe('Getters.vue', () => { deixe os getters

deixar armazenar
beforeEach(() => { getters

= { clicks: () =>
2, inputValue: () =>
'input'
}
loja = new Vuex.Store({

getters }) })
it('Renderiza "store.getters.inputValue" no primeiro p

tag', () => { const
wrapper = rasoMount(Getters, { store, localVue }) const p =
wrapper.find('p')
expect(p.text()).toBe(getters.inputValue()) } )
it('Renderiza "store.getters.clicks" na segunda tag p', () => { const wrapper =
sandyMount(Getters, { store,
localVue })
const p = wrapper.findAll('p').at(1)
expect(p.text()).toBe(getters.clicks().toString()) }) })
Este é um teste comparável ao nosso teste de atividades. Construímos um armazenamento

falso antes de cada teste, o passamos como uma opção ao usar o sandyMount e
verificamos se o valor retornado por nossos fictícios getters é exibido.
Isso é fantástico, mas e se quisermos garantir que nossos getters estejam retornando
a seção apropriada de nosso estado?
Zombando com módulos Os

módulos são úteis para reduzir nossa loja em pedaços menores. Eles também enviam
getters. Estes serão úteis em nossos experimentos.
Vamos olhar mais de perto:
<template>
<div>
<button @click="moduleActionClick()">Clique</button> <p>{{moduleClicks}}</p> </
div> </template>
<script>
import { mapActions, mapGetters } de 'vuex'
exportar padrão { métodos:
{ ...mapActions(['moduleActionClick']) },
calculado: mapGetters(['moduleClicks'])
} </script>
Componente simples com uma ação e um getter.

E agora para o teste:

test-utils'
import Vuex from 'vuex' import
MyComponent from '../../../src/components/ MyComponent' import myModule from
'../../../src/store/
myModule'

localVue.use(Vuex)
describe('MyComponent.view', () => {
deixe ações
deixe estado
deixar armazenar
beforeEach(() => { estado =

{ cliques: 2
ações =
{ moduleActionClick: jest.fn()
}
loja = new Vuex.Store({ módulos:

{ meuModule:
{ estado, ações,
getters: myModule.getters, namespaced:

true
}
} }) })
it('chama a ação da loja "moduleActionClick" quando o botão é clicado', () => {
const wrapper = rasoMount(MyComponent, { store, localVue })
botão const = wrapper.find('button') button.trigger('click')

expect(actions.moduleActionClick).
toHaveBeenCalled()
})
it('renderiza "state.clicks" na primeira tag p', () => { const wrapper =

sandyMount(MyComponent, { store, localVue }) const p = wrapper.find('p')
expect(p.text()).toBe(state.clicks.toString()) }) })
Testando uma loja Vuex

Existem dois métodos para testar uma loja Vuex. A primeira técnica é testar de forma
independente os getters, mutações e ações. A segunda maneira é criar um
armazenamento e, em seguida, testá-lo. Vamos dar uma olhada em ambas as opções.
Faremos uma loja básica de balcão para demonstrar como testar uma loja Vuex.
Haverá uma mutação de incremento e um getter evenOrOdd na loja.
// mutations.js export
default { increment(state) {
estado.conta++
}
} // padrão de
exportação getters.js {
evenOrOdd: state => (state.count % 2 === 0? 'even' : 'odd')
Testando getters, mutações e ações separadamente Como

getters, mutações e ações são todas funções JavaScript, elas podem ser testadas sem
a necessidade de Vue Test Utils e Vuex.
A vantagem de testar getters, mutações e ações independentemente é que seus
testes de unidade são mais abrangentes. Quando eles falham, você imediatamente
sabe o que há de errado com seu código. A desvantagem é que você terá que simular
métodos Vuex como commit e dispatch. Isso pode resultar em uma situação em que
seus testes de unidade passam, mas seu código de produção falha devido a simulações
errôneas.
Construiremos dois arquivos de teste, mutations.spec.js e getters.spec.js, da
seguinte forma:
Primeiro, vamos testar as mutações de incremento:
// mutações.spec.js
importar mutações de './mutations'

test('"increment" incrementa "state.count" em 1', () => { const state = {
contagem: 0
} mutações.incremento(estado)
expect(estado.contagem).toBe(1) })
Vamos testar o getter evenOrOdd agora. Podemos testá-lo construindo um estado

simulado, passando-o para o getter e garantindo que ele retorne o resultado adequado.
// getters.spec.js
importar getters de './getters'
test('"evenOrOdd" retorna mesmo se "state.count" for par', () => { const

state = {
contagem: 2
expect(getters.evenOrOdd(state)).toBe('even') }) test('"evenOrOdd"
retorna ímpar se "state.count" for ímpar', () => { const state = {
contagem: 1
} expect(getters.evenOrOdd(state)).toBe('odd') })
Testando uma loja em

execução Outro método para testar uma loja Vuex é usar a configuração da loja para
estabelecer uma loja em execução.
Não precisamos simular nenhuma funcionalidade do Vuex construindo um
instância de armazenamento em execução.
Quando um teste falha, pode ser difícil identificar a origem do problema.

Vamos fazer um teste. Para evitar sobrecarregar o construtor básico do Vue,

usaremos localVue ao criar uma loja. Usando a exportação store-config.js, o teste
estabelece um armazenamento:
// store-config.js
importar mutações de './mutations' importar getters de

'./getters'
{ estado: {
contagem: 0
},
mutações,
getters
} // store-config.spec.js
importar { createLocalVue } de '@vue/test-utils' importar Vuex de 'vuex'

importar storeConfig de './store-
config' importar { cloneDeep } de 'lodash'
test('incrementa o valor de "contagem" quando "incremento" é confirmado', ()

=> { const localVue =
createLocalVue() localVue.use(Vuex) const store =
new
Vuex.Store(cloneDeep(storeConfig)) expect(store. state.count).toBe(0)
store.commit('increment')
expect(store.state.count).toBe(1) })
test('atualiza o getter "evenOrOdd" quando "incremento" é confirmado', () =>

{ const localVue =
createLocalVue()
localVue.use(Vuex) const
store = new Vuex.Store(cloneDeep(storeConfig))
expect(store.getters.evenOrOdd).toBe('even') store.commit('increment')
expect(store.getters.evenOrOdd) .toBe('ímpar') })
Usamos o cloneDeep para clonar a configuração da loja antes de criar uma loja com ela. Isso ocorre
porque o Vuex modifica o objeto de opções usado para construir a loja. Para garantir que cada teste
tenha um armazenamento limpo, devemos clonar o objeto storeConfig.
O CloneDeep, por outro lado, não é “profundo” o suficiente para clonar módulos de armazenamento.
Caso seu storeConfig contenha módulos, você deve fornecer um objeto para new Vuex.Store(), conforme
imagem abaixo:
import myModule from './myModule' // ... const store

= new
Vuex.Store({ modules: { myModule: cloneDeep(myModule) } })
VUE.JS-TESTING-LIBRARY Quando se
trata de desenvolver aplicativos confiáveis, os testes podem desempenhar um papel vital na capacidade
de um indivíduo ou equipe de criar novos recursos, modificar código, resolver erros e assim por diante.
Embora existam várias escolas de pensamento sobre testes.
Teste de unidade
Introdução
Unidades individuais de código podem ser testadas independentemente usando testes de unidade. O
teste de unidade destina-se a dar aos desenvolvedores confiança em seu código. Você obtém a garantia
de que seu aplicativo permanecerá funcional e estável quando novos recursos forem introduzidos ou o
código for refatorado, criando testes detalhados e eficazes.
O teste de unidade de um aplicativo Vue não é diferente de testar outros tipos de

aplicativos.
Escolhendo sua estrutura Como o
conselho de teste de unidade geralmente é independente da estrutura, aqui estão alguns princípios
gerais a serem considerados ao decidir qual ferramenta de teste de unidade é ideal para seu aplicativo.
Excelente relatório de erros É vital que
sua estrutura de teste de unidade ofereça erros úteis quando os testes falham. A biblioteca de asserções
é responsável por isso. Uma asserção com mensagens de erro de alta qualidade reduz o tempo
necessário para depurar o problema. Além de apenas relatar quais testes estão falhando, as bibliotecas
de asserção fornecem informações sobre por que um teste falha, como o que era esperado em relação
ao que foi obtido.
As bibliotecas de asserções estão incluídas em várias estruturas de teste de unidade,

como Jest. Outros, como o Mocha, precisam da instalação de bibliotecas de asserção
individualmente (geralmente Chai).
• A participação da comunidade e da equipe é incentivada.
Como a maioria dos frameworks de teste de unidade é de código aberto, ter uma
comunidade ativa pode ser crucial para algumas equipes que manterão seus testes
por um longo tempo e precisam garantir que um projeto seja mantido continuamente.
Além disso, ter uma comunidade ativa fornece ajuda adicional caso você tenha
problemas.
A Biblioteca de Testes Vue estende a Biblioteca de Testes DOM fornecendo APIs

para interagir com os componentes Vue. É baseado em @vue/test utils, a biblioteca
oficial de testes do Vue.
• Biblioteca de teste Vue no GitHub
A Biblioteca de Testes Vue, em poucas palavras, faz três coisas:
1. As ferramentas de consulta e ajudantes da Biblioteca de Testes DOM são reexportadas.
2. As funções @vue/test-utils que são incompatíveis com a Biblioteca de Testes

estão ocultas.
3. Alguns métodos de ambas as fontes são ajustes.
Instalação
Este módulo é fornecido via npm e deve ser instalado como um devDepen dency em seu
projeto:
npm install --save-dev @testing-library/vue
Esta biblioteca inclui peerDependencies para Vue e vue-template-compiler.

Você também pode querer instalar @testing-library/jest-dom para utilizar os
correspondentes Jest personalizados.
Exemplo:
<modelo>
<div>
<p>Tempos clicados: {{ count }}</p> <button
@click="increment">incremento</button>
</div> </
modelo>
<script>
nome: 'Botão', dados: ()
=> ({
contagem:
0, }), métodos:
{ increment() {
isso.conta++
}, },
} </script>
importe {render, screen, fireEvent} de '@testing library/vue' import Button de './
Button'
test('incrementa valor ao clicar', async () => {

// O método 'render' renderiza o componente em
o documento.
// Ele também liga a 'tela' todos os disponíveis
consultas com as quais interagir // o componente.
renderizar (Botão)
// queryByText retorna o primeiro nó correspondente para

o texto fornecido
// ou retorna nulo.
expect(screen.queryByText('Tempos clicados: 0')). toBeTruthy()
// getByText recupera o primeiro nó que corresponde ao texto

especificado // ou lança um erro. botão const
= screen.getByText('incremento')
// Clique algumas vezes. aguarde

fireEvent.click(botão)
aguarde fireEvent.click(botão)
expect(screen.queryByText('Tempos clicados: 2')).

toBeTruthy() })
O que é a biblioteca de testes Vue?
Vue Testing Library é uma biblioteca leve de teste Vue que adiciona métodos utilitários leves
a @vue/test-utils. Ele foi projetado com uma única ideia orientadora em mente: quanto mais
seus testes imitarem como seu programa é usado, mais confiança eles poderão fornecer a
você.
Por que usar a biblioteca de testes Vue?
• Você deseja desenvolver testes que não se preocupem com detalhes de implementação,
como verificar como a solução é implementada em vez de se ela fornece o resultado
pretendido.
• Você deseja desenvolver testes que se concentrem nos nós DOM em vez dos
componentes Vue exibidos.
• Você deseja desenvolver testes que consultem o DOM como um usuário faria.
Como funciona a biblioteca de testes Vue
A biblioteca de testes Vue funciona fornecendo utilitários para consultar o DOM da mesma
maneira que um usuário faria. Essas ferramentas permitem que você pesquise objetos com
base em seu texto de rótulo, identifique links e botões com base em seu conteúdo de texto e
garanta que seu aplicativo Vue esteja totalmente acessível.
Em circunstâncias em que não faz sentido ou é impraticável descobrir itens por seu
conteúdo de texto ou rótulo, a Biblioteca de testes Vue recomenda a utilização de atributos
testados por dados como uma saída de emergência para localizar esses componentes.
A propriedade data-tested é aplicada ao elemento HTML que você pretende consultar em

seu teste.
Exemplo:
<button data-testid="checkoutButton">Check-out </button>
Começando com a Biblioteca de Testes Vue Agora
que você entende por que você deve usar a Biblioteca de Testes Vue e como ela funciona,
vamos começar instalando-a em um novo projeto Vue gerado pela CLI do Vue.
Para começar, execute o seguinte comando no terminal (supondo que você tenha o Vue
CLI instalado em seu sistema) para criar um novo aplicativo Vue:
vue create vue-testing-library-demo
Jest, um executor de testes construído pelo Facebook, será usado para executar nossos
testes. Jest pode ser simplesmente instalado usando o plug-in Vue CLI. Vamos incluir esse plugin:
ver adicionar unidade-jest
Você notará que o plug-in adicionou um novo script em package.json:
"teste:unidade": "vue-cli-service teste:unidade",
Este é o lugar onde os testes seriam realizados. Ele também criou uma nova pasta de testes
em src, bem como uma pasta de unidade com um arquivo de teste de exemplo chamado
example. spec.js. Quando executamos npm run test:unit, ele é baseado na configuração do
Jest. Jest irá procurar arquivos no diretório de testes e executá-los. Vamos executar o
seguinte arquivo de teste de amostra:
teste de execução npm:unidade
Isso deve fazer com que o exemplo seja executado. O arquivo de teste spec.js está localizado
no diretório tests/unit. Vamos dar uma olhada no que há neste arquivo:
import { rasoMount } de '@vue/test-utils' import HelloWorld de '@/

components/HelloWorld.vue' describe('HelloWorld.vue', () => { it('renders
props.msg quando passado', ( ) => {
const msg = 'nova mensagem' const

wrapper = rasoMount(HelloWorld, { propsData: { msg } })
expect(wrapper.text()).toMatch(msg) }) })
A instalação do Jest com o plug-in Vue CLI instalará automaticamente @vue/test utils,
portanto, o arquivo de teste anterior faz uso do método sandyMount de @vue/test-utils. Para
se familiarizar com a Vue Testing Library, basta alterar este arquivo de teste idêntico para
utilizar a Vue Testing Library em vez de @vue/test-utils.
Começaríamos removendo @vue/test-utils porque não o usaríamos.
npm desinstalar @vue/test-utils --save-dev
A biblioteca de teste Vue é então instalada como uma dependência de desenvolvimento:
npm install @testing-library/vue --save-dev
Em seguida, procedemos a fazer alterações em tests/unit/example.spec.js para isto:
import { render } de '@testing-library/vue' import HelloWorld de

'@/components/HelloWorld.vue' describe('HelloWorld.vue', () => { it('renderiza
props.msg quando passado', ( ) => {
const msg = 'nova mensagem' const

{ getByText } = render(HelloWorld, {
props: { msg } })
getByText(msg) }) })
Se você executar o teste novamente, ele ainda deve passar. Vamos dar uma olhada no que
fizemos:
• Para renderizar os componentes HelloWorld, utilizamos o método render fornecido pela

Vue Testing Library. Na biblioteca de teste Vue, a única maneira de renderizar
componentes é por meio de renderização. Você passa o componente Vue e um objeto
de opções opcionais ao chamar render.
• O objeto de opções é usado para fornecer as props de mensagem exigidas pelo

componente HelloWorld. render retornará um objeto contendo métodos utilitários para
consultar o DOM, um dos quais é getByText.
• Em seguida, usamos getByText para verificar o DOM para um elemento contendo

o texto “nova mensagem”.
Você deve ter notado uma mudança na ênfase do teste do componente Vue visível para o que
o usuário vê no DOM neste momento. Essa alteração permitirá que você teste seus aplicativos
do ponto de vista do usuário, em vez de se concentrar em detalhes de implementação.
Começo rápido
npm install --save-dev @testing-library/vue
Todos os comandos getBy, getAllBy, queryBy e query AllBy da DOM Testing Library
agora estão disponíveis. A lista completa de consultas pode ser vista aqui.
Você também pode querer instalar @testing-library/jest-dom para utilizar os Jest

matchers especializados para o DOM.
O problema
Você deseja desenvolver casos de teste fáceis de manter para seus componentes Vue.
Você deseja que seus testes evitem adicionar detalhes de implementação de seus
componentes como parte desse objetivo. Você prefere se concentrar em garantir que seus
testes forneçam a confiança de que você precisa.
A solução
Vue Testing Library é uma solução de teste leve para componentes Vue. Ele adiciona
métodos utilitários leves sobre @vue/test-utils, incentivando hábitos de teste aprimorados.
Sua principal ideia orientadora é que quanto mais seus testes imitam como seu
produto é usado, mais confiança você pode ter neles.
Como resultado, em vez de lidar com instâncias de componentes Vue exibidos, seus
testes lidarão com nós DOM reais.
Os utilitários fornecidos por este pacote permitem consultar o DOM da mesma forma
que um usuário faria. Eles permitem que você descubra objetos pelo texto de seus rótulos,
bem como links e botões, e afirmam que seu aplicativo está acessível.
Ele também oferece uma técnica sugerida testada por dados para identificar itens
como uma “saída de escape” para elementos quando o conteúdo do texto e o rótulo não
fazem sentido ou são impraticáveis.
Um exemplo básico:
<template>
<div>
<p>Tempos clicados: {{ count }}</p> <button
@click="increment">increment</button>
</div> </
modelo>
<script>
nome: 'Botão', dados:
() => ({ contagem:
0, }), métodos:
{ increment() {
isso.conta++
}, },
} </script>
importe {render, screen, fireEvent} de '@testing library/vue' import Button
de './Button'
test('incrementa valor ao clicar', async () => { // método 'render' renderiza

o componente em
o documento.
// Ele também liga a 'tela' todos os disponíveis
consultas para interagir com o componente. ("@ testing-library/vue
- Documentação, Popularidade | Stackleap") render(Button)
// queryByText recupera o primeiro nó que corresponde ao texto

especificado // ou retorna nulo.

toBeTruthy()
// getByText recupera o primeiro nó que corresponde ao texto

especificado // ou lança um erro. botão
const = screen.getByText('incremento')
// Clique algumas vezes. await

fireEvent.click(botão) await
fireEvent.click(button)

toBeTruthy() })
Instale @testing-library/jest-dom para fornecer asserções úteis como.toBeIn

TheDocument (). Você pode escrever expect(screen.queryByText('Times
clicked: 0')).toBeInTheDocument no exemplo acima ().
O uso de consultas byText não é a única ou a melhor técnica para
encontrar componentes. Para conhecer outras opções, veja qual consulta
devo usar? No exemplo acima, getByRole('button', {name: 'increment'}) talvez
seja a melhor abordagem para obter o elemento de botão.
CONCLUSÃO
Aprendemos sobre NOCK e Vue.js-testing-library neste capítulo, incluindo o
que são e como são utilizados. Formulários e validação de formulários serão
discutidos no próximo capítulo.
Capítulo 9
Formulários e Validação
NESTE CAPÍTULO
ÿ Noções básicas de formulário
ÿ Validação de formulários JavaScript
Aprendemos sobre NOCK e Vue no Capítulo 8. Também aprendemos o que são

bibliotecas de teste JS e como elas funcionam. Aprenderemos sobre formulários e
validação de formulários neste capítulo.
BÁSICO DO FORMULÁRIO
Para criar um formulário em HTML, você usa o elemento <form>: (“JavaScript Form
Arquivos - Tutorial”)
<form action="/signup" method="post" id="signup"> </form>
• A ação é uma URL usada para processar o envio do formulário. O

Nesse caso, a ação é a URL/signup.
• O método especifica qual método HTTP deve ser usado para enviar
a forma. Postar ou pegar é o caminho.
Quando você deseja obter dados do servidor, geralmente usa o método get e,
quando deseja alterar algo no servidor, geralmente usa o método post.
DOI: 10.1201/9781003310464-9 207

O objeto HTMLFormElement em JavaScript é usado para representar um formulário.

O HTMLFormElement possui as propriedades listadas abaixo, que correspondem aos
atributos HTML:
• ação: É a URL onde os dados do formulário são processados. É comparável à

propriedade action do elemento <form>.
• method: É o método HTTP que corresponde à propriedade method do elemento

<form>.
Além disso, o elemento HTMLFormElement possui os seguintes métodos úteis:
• submit(): envia o formulário.
• reset(): redefinir o formulário.
Referenciando
Formulários Você pode usar getElementById() ou const form = document.
getElementById('subscribe') para se referir ao elemento de formulário no DOM: const
form = document.getElementById('subscribe'); JavaScript é a
linguagem de codificação (javascript)
Pode haver vários formulários em um documento HTML. A propriedade
document.forms retorna uma lista de formulários no documento (HTMLFormControlsCollection):
documento.formulários
Um índice é usado para encontrar um formulário específico. A instrução a seguir, por

exemplo, retorna o documento HTML em sua forma inicial:
document.forms[0]
CSS (CSS)
Enviando um formulário
Um botão de envio geralmente está presente em um formulário. O navegador entrega os
dados do formulário ao servidor quando você clica nele. Para criar um botão de envio,
use o tipo submit no elemento <input> ou <button>:
<input type="enviar" value="Inscrever-se">

Linguagem de código: HTML, XML (xml)
Formulários e Validação ÿ 209
Ou
<button type="submit">Inscrever-se</button>
Quando você pressiona a tecla Enter enquanto o botão enviar está realçado, o navegador também
envia a entrada do formulário.
Quando você envia o formulário, o evento submit é chamado antes que a solicitação seja enviada
ao servidor. Isso permite que você verifique a precisão dos dados do formulário. Você pode parar de
enviar o formulário se os dados forem inválidos.
Use a função addEventListener() do elemento de formulário para adicionar uma lista de eventos
tener para o evento submit da seguinte forma:
const form = document.getElementById('signup');
form.addEventListener('submit', (event) => { // manipula os dados

do formulário
});
Linguagem do código: JavaScript (javascript)
Para evitar que o formulário seja enviado, execute a função pre ventDefault() do objeto de evento
de dentro do manipulador de eventos submit, conforme ilustrado abaixo:
form.addEventListener('submit', (event) => { // parar o envio do

formulário event.preventDefault();
});
Linguagem do código: PHP (php)
Se os dados do formulário forem inválidos, você normalmente chama o método event.preventDefault().
O método submit() do objeto de formulário é usado para enviar o formulário em

JavaScript:
form.submit();
Linguagem do código: CSS (css)
A função form.submit() não dispara o evento submit. Como resultado, antes de usar essa abordagem,
você deve validar cuidadosamente o formulário.

Acessando campos de
formulário Você pode utilizar técnicas DOM como getElementsByName(), getElement ById(),
querySelector() e outras para recuperar campos de formulário.
Você também pode usar a propriedade elements do objeto de formulário. Uma coleção de
elementos de formulário é armazenada na propriedade form.elements.
Você pode acessar um elemento em JavaScript por índice, id ou nome. Considerar
o seguinte formulário de inscrição, que tem dois elementos input>:
<form action="signup.html" method="post" id="signup">

<h1>Inscreva-se</h1>
<div class="field">
<label for="name">Nome:</label> <input
type="text" id="name" name="name"
placeholder="Digite o nome completo" />
<small></small>
</div>
<div class="campo">
<label for="email">E-mail:</label> <input
type="text" id="email"
name="email" placeholder="Digite o endereço de e-mail" />
<small></small>
</div>
<button type="submit">Inscrever-se</button> </form>
Para obter os elementos do formulário, você deve primeiro obter o elemento do formulário:
const form = document.getElementById('signup'); Linguagem do código:

JavaScript (javascript)
Para acessar o elemento, use index, id ou name. O
primeiro elemento do formulário é acessado da seguinte forma:
form.elements[0]; // pelo índice

form.elements['name']; // por nome
form.elements['name']; // por id (nome e id são os mesmos neste caso)

O seguinte acessa o segundo elemento de entrada:
form.elements[1]; // pelo índice

form.elements['email']; // por nome
form.elements['email']; // por id Idioma do código:
JavaScript (javascript)
Após acessar o campo do formulário, você pode usar a propriedade value para acessar o seu
valor, por exemplo:
const form = document.getElementById('signup'); const nome =

form.elements['nome']; const email =
form.elements['email'];
// obtendo o valor do elemento let

fullName = name.value; deixe
emailAddress = email.value;
Junte tudo: formulário de inscrição A seguir,
um exemplo de documento HTML incluindo um formulário de inscrição.
<!DOCTYPE html>
<html lang="en"> <head>
<title>Demonstração de formulário JavaScript</title>

<meta name="viewport" content="width=device width, initial-
scale=2.0" /> <link rel="stylesheet" href="css/
style.css" / > </cabeça> <corpo>
<form action="signup.html" method="post"
id="inscrever-se">
<h1>Inscreva-se</h1>
<div class="field">
<rótulo
for="name">Nome:</label>
<input type="text" id="name"
name="name" placeholder="Enter fullname" />
<small></small>
</div>
<div class="campo">
<label for="e-mail">
E-mail:</label>
<input type="text" id="email"

name="email" placeholder="Enter email address" />
<small></small>
</div>
<div class="campo">
<button type="enviar"
class="full">Inscrever-se</button> </div> </form>
</div>
<script src="js/app.js"></script> </body> </html>
Os arquivos style.css e app.js são referenciados no texto HTML. O elemento

<small> é usado para exibir uma mensagem de erro se os dados no elemento
<input> forem inválidos.
O seguinte erro ocorrerá se você enviar o formulário sem fornecer nenhuma
informação: O seguinte erro ocorrerá se você enviar o formulário com seu nome,
mas um formato de endereço de e-mail inválido: Todo o
arquivo app.js é mostrado abaixo:
// mostra a mensagem com um tipo da função de entrada

showMessage(input, message, type) { // obtém o elemento tsmall e
define a mensagem const msg = input.parentNode.
querySelector("pequeno"); msg.innerText =
mensagem; // atualiza a classe para
a entrada input.className = type?
"sucesso" : "erro";
tipo de retorno;
}
function showError(entrada, mensagem) {

return showMessage(entrada, mensagem, false);
}
function showSuccess(input) { return

showMessage(input, "", true);
}
function hasValue(input, message) { if (input.value.trim()

=== "") {
return showError(entrada, mensagem);
} return showSuccess(entrada);
}
function validEmail(input, requiredMsg, invalidMsg) { // verifica se o valor não está vazio

if (!hasValue(input, requiredMsg)) {
retorna falso;
} // validar formato de e-mail const

emailRegex =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\ [\]\\.,;:\s@"] +)*)|(".+"))@((\
[[0-9]{1,3}\.[0-9]{1,3}\. [0-9]{1,3 }\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z] {2,}))$ /;
const email = input.value.trim(); if (!

emailRegex.test(email)) { return showError(input,
invalidMsg);
} retorna verdadeiro;
}
const form = document.querySelector("#signup");
const NAME_REQUIRED = "Digite seu nome"; const

EMAIL_REQUIRED = "Digite seu e-mail"; const EMAIL_INVALID
= "Digite o formato de endereço de e-mail correto";
form.addEventListener("enviar", função (evento) {

// parar o envio do formulário
event.preventDefault();
// valida o formulário let

nameValid = hasValue(form.elements["name"], NAME_REQUIRED); let
emailValid =
validEmail(form. elements["email"], EMAIL_REQUIRED,
EMAIL_INVALID); // se válido, envie o formulário. if (nome válido && email
válido) {
alert("Apenas demonstração. Nenhum formulário foi

postou.");
}
});
Linguagem do código: JavaScript

Como funciona
A função showMessage()
“A função showMessage() aceita um elemento de entrada, mensagem e um tipo:" (“Obter nome do
formulário via JavaScript”)
// mostra a mensagem com um tipo da função de entrada

showMessage(input, message, type) {
// obtém o elemento <small> e define a mensagem const msg =
input.parentNode.querySelector("small"); msg.innerText = mensagem; // atualiza a
classe para a entrada input.className
= type? "sucesso" : "erro";
tipo de retorno;
}
O seguinte mostra o campo de entrada de nome no formulário:
<div class="campo">
<label for="name">Nome:</label> <input type="text"
id="name" name="name" placeholder="Enter fullname" />
<small></small>
</div>
Se o valor do nome estiver em branco, você precisa primeiro obter seu pai, que é <div>
com a classe “campo”.
input.parentNode
Linguagem do código: CSS (css)
Em seguida, você precisa selecionar o elemento <small>:
const msg = input.parentNode.querySelector("small");

Em seguida, atualizamos a mensagem:
msg.innerText = mensagem;
A classe CSS do campo de entrada é então alterada com base no valor do parâmetro de
tipo. Se o tipo for verdadeiro, definimos a classe da entrada como sucesso. Caso contrário, a
classe é definida como erro.
input.className = tipo? "sucesso" : "erro";
Finalmente, retorne o valor do tipo:
tipo de retorno;
As funções showError() e showSuccess() são usadas para exibir erros e sucessos,

respectivamente.
A função showMessage() é chamada pelas rotinas showError() e show Success(). A
função showError() sempre retorna false, mas a função showSuccess() sempre retorna true.
A mensagem de erro também é definida como uma string vazia pelo método showSuccess().
function showError(entrada, mensagem) { return

showMessage(entrada, mensagem, false);
}
function showSuccess(input) { return

showMessage(input, "", true);
}

A função hasValue()
A função hasValue() determina se um elemento de entrada tem um valor e exibe
uma mensagem de erro ou uma mensagem de sucesso usando as funções
showError() ou showSuccess(), conforme apropriado:
function hasValue(entrada, mensagem) {

if (input.value.trim() === "") { return showError(input,
message);
} return showSuccess(entrada);
}
A função validEmail()
A função validEmail() valida se o campo email contém um endereço de email
válido:
function validEmail(input, requiredMsg, invalidMsg) { // verifica se o valor não está vazio

if (!hasValue(input, requiredMsg)) {
retorna falso;
} // validar formato de e-mail const

emailRegex =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\ [\]\\.,;:\s@"] +)*)|(".+"))@((\
[[0-9]{1,3}\.[0-9]{1,3}\. [0-9]{1,3 }\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z] {2,}))$ /;
const email = input.value.trim(); if (!

emailRegex.test(email)) { return showError(input,
invalidMsg);
} retorna verdadeiro;
}
Linguagem do código: PHP (php)
O método validEmail() chama a função hasValue() para ver se o valor do campo

está vazio. Ele exibe o requiredMsg se o campo de entrada estiver vazio.
Para validar o e-mail, uma expressão regular é empregada. A variável Msg
inválida é retornada pela função validEmail() se o e-mail for inválido.
O manipulador de eventos de envio
Para começar, use o método querySelector() para escolher o formulário de inscrição pelo seu id:
const form = document.querySelector("#signup");
Em segundo lugar, crie algumas variáveis para armazenar mensagens de erro:
const NAME_REQUIRED = "Digite seu nome"; const

EMAIL_REQUIRED = "Digite seu e-mail"; const EMAIL_INVALID
= "Digite o formato de endereço de e-mail correto";
Em terceiro lugar, adicione o ouvinte de evento de envio do formulário de inscrição usando o addEvent
Método ouvinte():
form.addEventListener("submit", function (event) { // parar o envio do

formulário event.preventDefault();
// valida o formulário let

nameValid = hasValue(form.elements["name"], NAME_REQUIRED);
let emailValid =
validEmail(form. elements["email"], EMAIL_REQUIRED,
EMAIL_INVALID); // se válido, envie o formulário. if (nameValid &&
emailValid) { alert("Somente
demonstração. Nenhum formulário foi
postado.");
}
});
No manipulador de eventos de envio:
1. Chame o evento para interromper o envio do formulário. preventDefault() é um método que

impede que qualquer coisa aconteça por padrão.
2. Use as funções hasValue() e validEmail() para validar o

campos de nome e e-mail.
3. Exiba um alerta se o nome e o endereço de e-mail estiverem corretos.

Você deve chamar o formulário em um aplicativo do mundo real. Para enviar o
formulário, use o método submit().
Resumo
• Para construir um formulário HTML, use o elemento form>.
• Para escolher um elemento form>, use técnicas DOM como getDocument ById() e
querySelector(). O elemento de formulário também é retornado por meio de um índice
numérico em document.forms[index].
• Para acessar elementos de formulário, use form.elements.
• O evento submit é acionado quando os usuários clicam no botão submit do formulário

botão.
VALIDAÇÃO DE FORMULÁRIO JAVASCRIPT O
JavaScript é capaz de validar formulários HTML.

Se um campo do formulário (fname) estiver vazio, este método envia uma mensagem e
retorna false, impedindo o upload do formulário:
Exemplo de JavaScript
function validarForm() { let x =
document.forms["meuFormulário"]["fname"].value; if (x == "")
{ alert("Nome deve
ser preenchido"); retorna falso; } }
A função pode chamar quando o formulário é enviado:
Exemplo de formulário
HTML <form name="myForm" action="/action_page.
php" onsubmit="return validForm()" method="post"> Nome: <input
type="text" name="fname"> <input type ="enviar"
valor="Enviar"> </form>
JavaScript tem a capacidade de validar entradas numéricas
A entrada numérica é frequentemente validada usando JavaScript:
Por favor insira um valor entre 1 e 10
Enviar
Validação automática de formulário HTML
A validação de formulários HTML pode ser feita automaticamente pelo navegador.

O atributo necessário impede que este formulário seja enviado se um formulário
campo (fname) está vazio:
Exemplo de formulário
HTML <form action="/action_page.php" method="post"> <input
type="text" name="fname" obrigatório>
<input type="submit" value="Enviar"> </form>
O Internet Explorer 9 e versões anteriores não oferecem suporte à validação automática de

formulário HTML.
Data de validade
O processo de garantir que as informações do usuário sejam limpas, corretas e úteis é

conhecido como validação de dados.
As tarefas de validação incluem:
• O usuário preencheu todos os campos essenciais?
• A data inserida pelo usuário está correta?
• O usuário digitou texto em um campo numérico?
O objetivo mais comum da validação de dados é garantir que a entrada do usuário esteja
correta. A validação pode ser definida de várias maneiras e implementada de várias maneiras.
Depois que a entrada foi transmitida ao servidor, um servidor da Web executa a validação do
lado do servidor. Um navegador da web executa a validação do lado do cliente antes de enviar
dados para um servidor da web.
Validação de restrição de HTML
A validação de restrição é uma nova técnica de validação HTML introduzida no HTML5.
A validação das restrições HTML é baseada em:
• Validar atributos de entrada HTML com restrições.
• Validar Pseudo Seletores CSS com restrições.
• Valide as propriedades e métodos do DOM com restrições.
Atributos de entrada HTML de validação de restrição
Atributo Descrição
Desabilitado Especifica que o elemento de entrada deve ser desabilitado
máx. Especifica o valor máximo de um elemento de entrada
mín. Especifica o valor mínimo de um elemento de entrada
Padrão Especifica o padrão de valor de um elemento de entrada
Obrigatório Especifica que o campo de entrada requer um elemento
Tipo Especifica o tipo de um elemento de entrada
Pseudo seletores CSS de validação de restrição
Seletor Descrição
:desabilitado Seleciona elementos de entrada com o atributo “desativado” especificado
:inválido Seleciona elementos de entrada com os valores inválidos
Seleciona os elementos de entrada sem o atributo “obrigatório” especificado
Seleciona elementos de entrada com o atributo “obrigatório” especificado

:opcional :obrigatório :válido Seleciona elementos de entrada com os valores válidos
Uso básico Na
entrada de formulário, área de texto e elementos selecionados, a diretiva v-model pode
ser usada para construir conexões de dados bidirecionais. Ele seleciona a técnica
apropriada para atualizar o elemento com base no tipo de entrada. O V-model é um açúcar
de sintaxe para atualizar dados em eventos de entrada do usuário, com atenção especial
para circunstâncias específicas de borda.
O valor inicial de qualquer elemento de formulário, verificado ou propriedades
escolhidas serão ignorados pelo v-model. Os dados da instância Vue sempre serão vistos
como a fonte da verdade. O valor inicial deve ser declarado do lado do JavaScript, na
opção data do seu componente.
Para diferentes componentes de entrada, v-model usa diferentes propriedades e emite

eventos distintos:
• A propriedade Value e o evento de entrada são usados pelos elementos text e textarea;
• A propriedade marcada e o evento de alteração são usados por caixas de seleção e

botões do rádio;
• Os campos selecionados usam o valor como suporte e a alteração como um evento.
Você observará que o v-model não é atualizado durante a construção do IME para idiomas que
requerem um IME. Se você também deseja atender a essas alterações, use o evento de
entrada.
Texto:
<input v-model="message" placeholder="edit me"> <p>A mensagem é:

{{ message }}</p>
Bloco de mensagem.
Texto multilinha:
<span>A mensagem multilinha é: <p style="white-space:

pre-line;">{{ message }}</p> <br>
<textarea v-model="message" placeholder="adicionar várias linhas"></textarea>
Bloco de mensagem multilinha.
Caixa de seleção:
Caixa de seleção única, valor booleano:
<input type="checkbox" id="checkbox"

v-model="marcado">
<label for="checkbox">{{ marcado }}</label>
Bloco de caixa de seleção.

Várias caixas de seleção vinculadas ao mesmo Array:
<input type="checkbox" id="jacky" value="Jack" v-

model="checkedNames"> <label
for="jack">Jacky</label> <input type="checkbox"
id="johny" valor="João"
v-model="checkedNames">
<label for="john">Johny</label> <input
type="checkbox" id="midny" value="Mike"
v-model="checkedNames">
<label for="mike">Midny</label> <br>
<span>Nomes verificados: {{checkedNames }} new Vue({ el: '...', data:
{checkedNames:
[]
} })
Bloco de caixa de seleção múltipla.
Rádio:
<input type="radio" id="one" value="One" v-model="picked">

<label for="one">One</
label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Dois</
label>
<br>
<span>Escolhi: {{ escolheu }}
Exemplo de botão de rádio.

Selecione:
Seleção única:
<selecione v-model="selecionado">
<option disabled value="">Selecione um</option> <option>A</option> <option>B</
option> <option>C</option>
</select> <span>Selecionado:
{{ selecionado }} new Vue({ el:
'...', dados: {
selecionado: ''
} })
Exemplo de botão de seleção.
Seleção múltipla (vinculada ao Array):
<selecionar v-model="selecionado" múltiplo>

<option>A</option>
<option>B</option>
<option>C</option> </select>
<br>
<span>Selecionado: {{ selecionado }}
Selecione o exemplo de lista.
Opções dinâmicas renderizadas com v-for
<option v-for="opção em opções"
v-bind:value="option.value">
{{ option.text }} </option> </

select>
<span>Selecionado: {{ selecionado }} new Vue({ el: '...', data:

{ selecionado:
'A', opções:
[ { texto:
'Um', valor: 'A' },
{ texto: 'Dois',
valor: 'B' }, { texto: 'Três', valor: 'C' }
} })
Ligações de valor
Os valores de ligação v-model para opções de rádio, caixa de seleção e seleção são
normalmente strings estáticas (ou booleanos para caixas de seleção):
 <input type="radio" v-

model="picked" value="a">
 <input

type="checkbox" v-model="toggle">
" <option v-
bind:value="{ number: 123 }">123</option> </select> // quando selecionado: typeof
vm.selected //
=> 'objeto '
vm.selected.number // => 123
Modificadores .lazy Por padrão, o v-model sincroniza a entrada com os dados após cada evento de entrada
(exceto para composição IME, conforme indicado acima). Em vez de sincronizar após eventos de alteração,
você pode usar o modificador lazy:
 <input v-model.lazy="msg">
.number Se
você deseja que a entrada do usuário seja automaticamente transformada em número, você pode adicionar
o modificador de número às suas entradas controladas pelo v-model:
<input v-model.number="idade" tipo="número">
Isso é útil porque o valor dos elementos de entrada HTML é sempre uma string, mesmo quando type=“number”.
Se parseFloat() falhar ao analisar o valor, o valor original será retornado.

.aparar
Você pode usar o modificador trim em suas entradas gerenciadas pelo v-model para cortar
automaticamente os espaços em branco da entrada do usuário:
<input v-model.trim="msg">
v-model com componentes Os tipos de
entrada embutidos em HTML nem sempre serão suficientes. Os componentes Vue, por outro lado, permitem que você
crie entradas reutilizáveis com comportamento completamente configurável. Essas entradas são até compatíveis com
o modelo v!
O básico
Em elementos de entrada de formulário, a diretiva v-model pode ser usada para criar
ligações de dados bidirecionais. Ele seleciona a técnica apropriada para atualizar o
elemento com base no tipo de entrada.
Exemplo:
1 <form id="demo">
2 
3 <p>
4 <input type="text" v-model="msg"> {{msg}} </p> 
7
8 <p>
9 <input type="checkbox" v-model="checked"> {{checked? "yes" : "no"}}
10 </p> 
11
12
13 <p>
14 <input type="radio" name="picked" value="one" v-
model="picked"> <input type="radio"
15 name="picked" value="two" v-model="picked">
{{escolhido}} </p>
16
17
18 
19 <p>
20 <select v-model="selected"> <option>um</

21 option> <option>dois</option> </
22 select> {{selected}} </p> 
25
26
27 <p>
28 <select v-model="multiSelect" múltiplo>
29 <option>um</option>
30 <option>dois</option>
31 <option>três</option> </select>
32 {{multiSelect}}
33 </p> <p><pre>dados:
34 {{$data
35 | json 2}}</pre></p> 36 </form> 1 novo Vue({ el: '#demo', data: {
2
3
4 : 'oi!', msg
5 verificada: verdadeira,
6 escolhida: 'um', selecionada:
7 'dois', multiSelect: ['um',
8 'três']
9
} 10 })
Lazy Updates Após
cada evento de entrada, o v-model sincroniza a entrada com os dados por padrão. Você pode alterar o
comportamento para sincronizar após eventos de alteração adicionando um atributo lento:
1  2 <input v-model="msg" lazy>
Valor de lançamento como um número
Se você deseja que a entrada do usuário seja armazenada automaticamente como números, você pode
adicionar uma propriedade numérica às suas entradas acionadas pelo v-model:
1 <input v-model="age" number>

Vincular a Expressões
^0.12.12 apenas
Ao utilizar o modelo v na caixa de seleção e nas entradas de rádio, o limite
value é um booleano ou uma string:
1  2 <input type="checkbox" v-

model="toggle">
3
4 
5 <input type="radio" v-model="pick" value="green">
Isso pode ser um pouco restritivo; há momentos em que gostaríamos de vincular o valor
subjacente a outra coisa. Aqui está como proceder:
Caixa de seleção:
1 <input type="checkbox" v-model="toggle" true

exp="a" false-exp="b"> 1 //
quando marcada: 2
vm.toggle === vm.a 3 // quando
desmarcada: 4 vm.toggle ===
vm.b
Rádio:
1 <input type="radio" v-model="pick" exp="a"> 1 // quando marcado:

2 vm.pick === vm.a
Opções de seleção dinâmica
Como você precisa renderizar dinamicamente uma lista de opções para um elemento choose>,
você deve usar um atributo de opções em conjunto com v-model para que v-model seja
sincronizado corretamente quando as opções mudarem:
1 <selecionar v-model="selecionado" opções="minhasopções">

</selecionar>
MyOptions deve ser um caminho-chave/expressão em seus dados que se vincula a um Array

que será usado como suas escolhas.
Strings simples podem ser encontradas nas opções do Array:
1 opções = ['a', 'b', 'c']

Ele também pode conter itens no formato {text:'', value:''}. O texto da opção pode ser
mostrado de forma diferente do valor subjacente neste formato de objeto:
1 opções = [
2 { texto: 'A', valor: 'a' }, { texto: 'B', valor: 'b' }
3
4]
Irá renderizar:
1 <selecionar>
2 <option value="a">A</option> <option
3 value="b">B</option> 4 </select>
O valor também pode ser Objetos:

0.12.11+ somente
1 opções = [ { texto:
2 'A', valor: { msg: 'olá' }}, { texto: 'B', valor: { msg: 'tchau' }}
3
4]
Grupos de opções
Alternativamente, o objeto pode ser formatado como {label:", opções:[…]}. Ele será
apresentado como um <optgroup> neste caso:
1[
2 { label: 'A', opções: ['a', 'b']}, { label: 'B', opções: ['c', 'd']}
3
4]
Irá renderizar:
1 <selecione>
2 <optgroup label="A">
3 <option value="a">a</option> <option
4 value="b">b</option> </optgroup> <optgroup
5 label="B">
6
7 <option value="c">c</option>
8 <option value="d">d</option> </optgroup> 10

9 </select>
Filtro de opções
É possível que seus dados de origem não estejam neste formato, então você terá
que alterá-lo para criar opções dinâmicas. O parâmetro de opções oferece suporte
a filtros para DRY up da transformação e pode ser útil para encapsular sua lógica
de transformação dentro de um filtro personalizado reutilizável:
1 Vue.filter('extract', function (value, keyToExtract) { return

value.map(function (item)
2 { return item[keyToExtract] }) 5 }) 1 <selecione
3
4
2 v-model="usuário selecionado"
3 opções="usuários | extrair 'nome'">
4 </selecionar>
“O filtro acima transforma dados como [{ name: 'Bruce' }, { name: 'Chuck' }] em ['Bruce',
'Chuck'] para que sejam formatados corretamente.” (“Manipulação de formulários - vue.js”)
Opção padrão estática

0.12.10+
somente Além das opções produzidas dinamicamente, você pode fornecer uma
opção padrão estática:
1 <selecionar v-model="usuário selecionado" opções="usuários">

2 <option value="">Selecione um usuário...</option>
3 </selecionar>
Após a opção estática, serão adicionadas as opções dinâmicas criadas pelos usuários.
Se o valor v-model for falso, a opção estática será escolhida por padrão (excluindo 0).
Debounce de entrada
O parâmetro debounce permite que você especifique um atraso mínimo antes que os dados
de entrada sejam sincronizados com o modelo após cada pressionamento de tecla. Quando
executar atividades caras em cada atualização, como fazer uma solicitação Ajax para
preenchimento automático de digitação antecipada, isso pode ser útil.
1 <input v-model="msg" debounce="500">
Configurando nosso aplicativo

Vue.js Começaremos construindo um aplicativo Vue.js básico com alguma marcação HTML.
Bulma também será importado para que possamos aproveitar alguns estilos prontos:
<!DOCTYPE html>
<html>
<cabeça>
<title>Diversão com formulários em Vue.js</title> <link

rel="stylesheet" href="https://cdnjs. cloudflare.com/ajax/libs/bulma/0.4.4/
css/bulma.min.
css">
</head>
<body>
<div class="columns" id="app">
<div class="column is-two-thirds">
<section class="section"> <h1
class="title">Diversão com formulários no Vue 2.0</h1> <p class="subtitle">
Aprenda a trabalhar com formulários, incluindo <strong>validação</

strong>!
</p>
<hr>


<seção classe="formulário">
</section>
</section> </
div> </
div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ vue/2.3.4/vue.min.js"></script>

<script>
new Vue({ el:
'#app' }) </
script>
</body> </
html>
Vinculando valores de entrada com v-

model Usando a diretiva v-model, podemos vincular valores de entrada de formulário e
elemento textarea a dados de instância Vue. A diretiva v-model, de acordo com a
documentação do Vue, permite que você construa ligações de dados bidirecionais na
entrada de formulário, área de texto e componentes selecionados. Ele determina a
maneira apropriada de atualizar o elemento com base no tipo de entrada.
Exemplo de entrada de texto:
Para começar, crie uma entrada de texto simples para obter o nome completo de um usuário:
...
<seção classe="formulário">
<div class="field"> <label
class="label">Nome</label>
<div class="control">
<input v-model="form.name" class="input"
type="text" placeholder="Entrada de texto"> </div> </div>
</section>
...
<script>
new Vue({ el:
'#app', dados: {
forma : {
nome: ''
} }) </script>
No código acima, estabelecemos a opção de dados em nossa instância Vue, bem como um
objeto de formulário que conterá todas as informações necessárias para nosso formulário.
Name é a primeira propriedade que definimos e está vinculada à entrada de texto que
também geramos.
Podemos utilizar o valor de form.name em qualquer lugar em nosso programa agora que
a ligação bidirecional está disponível, pois será o valor atualizado da entrada de texto. Para
ver todas as propriedades do nosso objeto de formulário, podemos adicionar uma seção:
...
<div class="columns" id="app"> 
<div class="coluna">
<section class="section" id="resultados">
<div class="caixa">
<ul>
 <li v-
for="(item, k) in form">
<strong>{{ k }}:</strong> {{ item }} </li> </ul> </div> </
section>
</div>
</div>
...
O valor, as propriedades verificadas ou escolhidas das entradas do formulário são

desconsideradas pelo v-model, que trata os dados da instância Vue como a fonte da
verdade. Isso significa que na instância do Vue, você pode definir um valor padrão para
form.name. Esse é o primeiro valor da entrada do formulário.
Exemplo de área de
texto: funcionam da mesma forma que as caixas de entrada normais:
...
<div class="campo">
<label class="label">Mensagem</label> <div
class="control">
<textarea class="textarea" placeholder="Message" v-model="form.message"></
textarea> </div> </div>
...
E o valor correspondente no modelo de formulário:
dados:
{ formulário:{
nome: '',
mensagem: '' // valor da área de texto
}
}
É vital lembrar que a ligação bidirecional não funcionará com interpolação em

textarea – textarea> form.message/textarea>. Em vez disso, use a diretiva v-model.
Selecionando caixas com a diretiva v-model

Para selecionar caixas, a diretiva v-model também pode ser prontamente conectada.
O valor da opção especificada será sincronizado com o modelo definido:
...
<div class="campo">
<label class="label">Tipo de consulta</label>

<div class="control">
<div class="selecionar">
<select v-model="form.inquiry_type"> <option disabled
value="">Nada selecionado</
opção>
<option v-for="option in options.inquiry" v-bind:value="option.value">
{{ option.text }} </option> </select> </div> </
div> </ div>
...
Usamos a diretiva v-for no código acima para carregar as opções dinamicamente.

Isso também requer a definição das opções acessíveis da instância do Vue:
dados: {
forma : {
nome: '',
mensagem: '',
query_type: '' // valor da caixa de seleção única }, opções:
{ query:
[ { value:
'feature', text: "Feature Request"}, { value: 'bug', text: "Bug Report
"}, { valor: 'suporte', texto: "suporte"}
]
}
}
Uma caixa de seleção múltipla segue o mesmo procedimento. Os valores selecionados

para a caixa de seleção múltipla, por outro lado, são salvos em uma matriz.
Exemplo:
...
<div class="campo">
<label class="label">Casos de uso do LogRocket</label> <div

class="control">
<div class="selecione is-multiple">
<selecione vários v-model="form.
logrocket_usecases">
<option>Depuração</option>
<option>Correção de erros</option>
<option>Suporte ao usuário</option> </
select> </
div> </
div> </
div>
...
CONCLUSÃO
Aprendemos sobre formulários Vue.js e validação de formulários neste capítulo, incluindo o
que são e como utilizá-los.
Bibliografia
#aprendizagem, AA e Agile. (2021, 15 de fevereiro). Crie um aplicativo React full-

stack com configuração zero - Atores ágeis #learning. Atores ágeis
#aprendizagem; learningactors. com. https://learningactors.com/build-a-full-
stack-react app-with-zero-
configuration/ @nirnejak. (nd). 7 vantagens de usar Vue.JS | O Quadro Progressista.
7 Vantagens de Usar Vue.JS | O Quadro Progressivo; www. inkoop.io.
Recuperado em 11 de julho de 2022, em https://www.inkoop.io/blog/7-
advantages-of-using-vue-js/ 27.
Configuração (reutilização e composição) - Vue.js 3 - W3cubDocs. (nd). 27.
Configuração (Reusabilidade e Composição) - Vue.Js 3 - W3cubDocs; docs.w3cub. com.
Recuperado em 11 de julho de 2022, em https://docs.w3cub.com/vue~3/guide/
compo sition-api-
setup.html Adebayo-Oyetoro, A. (2019, 14 de novembro). Usando JSX com Vue -
LogRocket Blog. Blog da LogRocket; blog.logrocket.com. https://
blog.logrocket.com/
using-jsx-with-vue/ admin. (2022, 8 de janeiro). Formulário JavaScript. Tutorial
JavaScript; www.javascripttutorial.net . https://www.javascripttutorial.net/
javascript-dom/javascript form/
Amaechi, A. (2021, 4 de fevereiro). Estilizando um aplicativo Vue.js usando CSS -
LogRocket Blog. Blog da LogRocket; blog.logrocket.com. https://
blog.logrocket.com/ styling-a-vue-js-application-using-css/
Au-Yeung, J. (2020, 19 de abril). Navegação Programática das Rotas do Vue Router |
por John Au-Yeung | JavaScript em inglês simples. Médio; javascript.plaineng
lish.io. https://javascript.plainenglish.io/programmatic-navigation-of-vue router-
routes-288b81cc5516
Au-Yeung, J. (2020, 23 de janeiro). Fundamentos do Vue.js: Entradas, Eventos e
Componentes | por John Au-Yeung | Melhor Programação. Médio;
melhorprogramação. bar. https://betterprogramming.pub/vue-js-basics-inputs-
events-and
components-1a874528e66a Au-Yeung, J. (2021, 6 de fevereiro). Como obter
parâmetros de consulta de uma URL no Vue.js? - O Web Dev. O desenvolvedor
da Web; thewebdev.info. https://thewebdev. info/2021/02/06/how-to-get-
query-parameters-from-a-url-in-vue-js/ Bistolfi, N. (2021, 5 de julho). Como usar imagens no Vue.js: Um
Como Usar Imagens no Vue.Js: Um Guia Completo – Piio Blog; blog.piio.co.
https://blog.piio.co/posts/how-to-use-images-in-vue-js
237
238 ÿ Bibliografia
Chaudhari, M. (2021, 16 de agosto). Otimizando Vue Apps: Lazy Loading e Code Splitting |
por Mayank Chaudhari | Médio. Médio; mayank-1513.medium. com. https://
mayank-1513.medium.com/optimizing-vue-apps-lazy-loading and-code-
splitting-1036d27512fd Correspondência
de rota dinâmica | Vue Router. (nd). Correspondência de rota dinâmica | Roteador Vue;
v3.router.vuejs.org. Recuperado em 11 de julho de 2022, de https://v3.router. vuejs.org/
guide/essentials/dynamic-matching.html
Eluwande, Y. (2021, 1º de janeiro). Um guia completo para formulários em Vue.js - LogRocket
Blog. Blog da LogRocket; blog.logrocket.com. https://blog.logrocket.com/an imperativo-
guide-to-forms-in-vue-js-2/
Explicando o argumento do contexto Vue - um tutorial de API de composição. (nd).
Explicando o Argumento do Contexto Vue - Um Tutorial API de Composição; learnvue.co.
Recuperado em 11 de julho de 2022, em https://learnvue.co/2021/06/explicando-the-vue-
context-argument-a-composition-api-tutorial/ Vinculações de entrada de
formulário — Vue.js. (nd). Vinculações de entrada de formulário — Vue.Js; v2.vuejs. org.
Recuperado em 11 de julho de 2022, em https://v2.vuejs.org/v2/guide/forms.html
Vinculações de entrada de formulário | Vue.js. (nd). Vinculações de entrada de formulário | Vue.Js; vuejs.org.
Recuperado em 11 de julho de 2022, de https://vuejs.org/guide/essentials/forms.html
frankies. (nd). Carregamento lento · vue-r-pdf. Carregamento lento · Vue-r-Pdf; franquias1.
gitbooks.io. Recuperado em 11 de julho de 2022, em https://frankies1.gitbooks.io/vue r-
pdf/content/en/advanced/lazy-loading.html Fraser, D.
(2018, 17 de julho). Zombando de solicitações HTTP com Nock. Este é um artigo de “como
fazer” sobre como usar… | por Dominic Fraser | codeburst. Médio; codeburst.io. https://
codeburst.io/testing-mocking-http-requests-with-nock-480e3f164851 Galyamov,
R. (2019, 21 de julho). Como navegar programaticamente usando o roteador em Vue.js
– Renat Galyamov. Renat Galyamov; renatello. com. https://renatello.com/vue-js-
navigate-programmatically/ _
GARG, S. (2019, 31 de dezembro). API de contexto para aplicativos Vue.js/Nuxt.js | por SHIV
GARG | Tecnologia na upGrad. Médio; Engenharia. upgrade. com. https://
engineering.upgrad.com/context-api-for-vue-js-nuxt js-applications-e4c984508bd1
Obtenha o nome do formulário via
JavaScript. (nd). Obtenha o nome do formulário via JavaScript; www.devasking.com .
Recuperado em 11 de julho de 2022, em https://www.devasking.com/issue/get-form-
name-via-javascript Group, K.
(2021, 15 de março). 7 razões pelas quais o VueJS é tão popular | Grupo Kofi.
Grupo Kofi; www.kofi-group.com. https://www.kofi-group.com/7-reasons why-vuejs-is-
so-popular/
Gunjal, A. (2021, 3 de julho). API de contexto. A API de Contexto pode ser usada para
compartilhar… | por Amol Gunjal | Médio. Médio; amolbkgunjal.medium. com. https://
amolbkgunjal.medium.com/context-api-ba403eed4c91
Manipulando formulários - vue.js. (nd). Manipulação de Formulários - Vue.Js; 012.vuejs.org.
Recuperado em 11 de julho de 2022, em https://012.vuejs.org/guide/
forms.html Harrell, J. (2018, 6 de novembro). Compartilhamento de estado implícito: API de
contexto do React e fornecer/injetar no Vue - LogRocket Blog. Blog da LogRocket;
blog.logrocket. com. https://blog.logrocket.com/implicit-state-sharing-reacts-context-api
provide-inject-in-vue-679062a50f05/
Bibliografia ÿ 239
Como adicionar uma imagem de fundo em Vue.js | Reagir. (nd). Reagir; reactgo. com.
Recuperado em 11 de julho de 2022, em https://reactgo.com/vue-background-image/
Como importar e usar a imagem em um componente de arquivo único Vue? (nd). NewbeDEV;
newbedev. com. Recuperado em 11 de julho de 2022, em https://newbedev.com/ how-
to-import-and-use-image-in-a-vue-single-file-component Como usar o
roteamento no Vue.js para criar um melhor experiência de usuário. (2018, 28 de junho).
freeCodeCamp.Org; www.freecodecamp.org. https://www.freecodecamp. org/news/
how-to-use-routing-in-vue-js-to-create-a-better-user-experi ence-98d225bbcdd9/
https://nx-designs.ch/agile_downloads/public/Routing%20in%20vue.js.pdf https://
www.spaceo.ca/blog/vue-js-pros-and-cons/ Implementando
Lazy Loading no Vue Aplicativos (2020, 19 de junho). Implementando Lazy Loading em Vue
Apps; academind. com. https://academind.com/tutorials/ vue-lazy-loading
Compartilhamento de estado implícito em React & Vue | Jonathan Harrel. (nd).

Compartilhamento de estado implícito em React & Vue | Jonathan Harrell; www.jonathan-harrell.com.
Recuperado em 11 de julho de 2022, em https://www.jonathan-harrell.com/blog/implícito-
state-sharing-in-react-vue/ intigriti. (2021,
30 de novembro). Referência de Objeto Direto Inseguro (IDOR) - Intigriti.
Intigriti; blog.intigriti.com. https://blog.intigriti.com/hackademy/idor/ Introdução |
Biblioteca de testes. (2022, 28 de fevereiro). Introdução | Biblioteca de testes; biblioteca-teste.
com. https://testing-library.com/docs/vue-testing-library/intro/ Validação
de formulário JavaScript. (nd). Validação de Formulário JavaScript; www.w3schools. com.
Recuperado em 11 de julho de 2022, em https://www.w3schools.com/JS//js_vali
dation.asp
Validação de formulários JavaScript. (nd). Validação de Formulários JavaScript; daks.me.
Recuperado em 11 de julho de 2022, de https://daks.me/js_validation.php
JSX: Você deve explorar os benefícios de usá-lo com o Vue JS. (2020, 17 de julho). Empresa
de terceirização de software; www.arrowhitech.com. https://www.arrowhitech. com/jsx-
the-benefits-of-using-it-with-vue-js/ Khosravi, K.
(2021, 28 de maio). Theming Vue.js com styled-components - LogRocket Blog. Blog da
LogRocket; blog.logrocket.com. https://blog.logrocket.com/theming-vue-js-with-styled-
components/
Kopachovets, O. (2021, 22 de julho). Prós e contras do Vue.js: por que escolhê-lo para seu
aplicativo? | ProCoders. ProCoders; procoders.tech. https://procoders.tech/blog/
vantages-of-vue-js/
LaptrinhX. (2018, 16 de julho). Zombando de solicitações HTTP com Nock | LaptrinhX.
Zombando de solicitações HTTP com Nock | LaptrinhX; laptrinhx. com. https://
laptrinhx.com/mocking-http-requests-with-nock-2410543980/ LaptrinhX.
(2021, 4 de fevereiro). Estilizando um aplicativo Vue.js usando CSS | LaptrinhX.
Estilizando um aplicativo Vue.Js usando CSS | LaptrinhX; laptrinhx. com. https://
laptrinhx.com/styling-a-vue-js-application-using-css-1604915263/
Carregamento lento e divisão de código em Vue.js – @tkssharma | Tarun Sharma | Meu
perfil. (nd). Carregamento lento e divisão de código em Vue.Js – @tkssharma | Tarun
Sharma | Meu perfil; tkssharma. com. Recuperado em 11 de julho de 2022, em https://
tkssharma.com/lazyloading-and-code-spitting-vuejs/
240 ÿ Bibliografia
Rotas de Carregamento Preguiçoso | Vue Router. (nd). Rotas de Carregamento Preguiçoso

| Roteador Vue; v3.router.vuejs.org. Recuperado em 11 de julho de 2022, em https://
v3.router.vuejs.org/guide/advanced/lazy-
loading.html Lotanna, N. (2021, 15 de abril). Componentes de carregamento lento e divisão
de código em Vue.js - LogRocket Blog. Blog da LogRocket; blog.logrocket.com. https://
blog. logrocket.com/vue-lazy-loading-components-code-splitting/ nock.
(2022, 1º de julho). GitHub - nock/nock: zombaria do servidor HTTP e biblioteca de
expectativas para Node.js. Github; github. com. https://github.com/nock/nock
Oza, H. (nd). A demanda para contratar desenvolvedores da Web em 2022 – uma visão
aprofundada sobre o desenvolvimento da Web do futuro | Hiperlink InfoSystem. A
demanda para contratar desenvolvedores da Web em 2022 – uma visão aprofundada
sobre o desenvolvimento da Web do futuro | Hiperlink InfoSystem; www.hyperlinkinfosystem.com.
Recuperado em 11 de julho de 2022, em https://www.hyperlinkinfosystem.com/
research/demand-to-hire-web-developers-in-2021
Navegação programática | Vue Router. (nd). Navegação programática | Roteador Vue;
v3.router.vuejs.org. Recuperado em 11 de julho de 2022, de https://v3.router. vuejs.org/
guide/essentials/navigation.html
Adereços | Vue.js. (nd). Adereços | Vue.Js; vuejs.org. Recuperado em 11 de julho de 2022,
de https://vuejs.org/guide/components/props.html r/
node - Nós meme, mas esses tipos de anúncios de emprego existem! (mais de 7 anos de
experiência em Vue quando não existia há tanto tempo?!) . (nd). reddit; www.reddit.com.
Recuperado em 11 de julho de 2022, em https://www.reddit.com/r/node/comments/
sf5d29/we_meme_but_these_kinds_of_job_postings_do_exist/ React
Context API - Why, How and When? Com exemplo completo. - Comunidade DEV.
(2021, 16 de agosto). Comunidade DEV; dev.to. https://dev.to/ahmedm1999/ react-
context-api-why-how-and-when-with-full-example-28d0 React Context
API: o que é e como funciona? | Blog do LoginRadius. (nd). API React Context: o que é e
como funciona? | Blog LoginRadius; www.loginradius.com . Recuperado em 11 de
julho de 2022, em https://www.loginradius.com/blog/engineering/react-context-api/
Render Functions & JSX — Vue.js. (nd).
Funções de Renderização & JSX — Vue.Js; v2.vuejs.org. Recuperado em 11 de julho de
2022, em https://v2.vuejs.org/v2/guide/render-function?redirect=true Sanchis, J. (2020,
19 de fevereiro) . Vue.js, a poderosa
ferramenta de desenvolvimento front-end nº 1 - Stratton Apps. Aplicativos Stratton;
strattonapps. com. https://strattonapps.com/ web-development/vuejs/vuejs-js-future-of-
web/ shahbazchandio. (2020, 21 de julho). Roteamento
– Meu Blog. Roteamento – Meu Blog; com puterprogramming.foobrdigital.com. https://
computerprogramming.foo brdigital.com/routing/
Estilizando componentes Vue com CSS - Aprenda desenvolvimento web | MDN. (2022, 23
de maio). Estilizando Componentes Vue com CSS - Aprenda Desenvolvimento Web |
MDN; developer.mozilla.org. https://developer.mozilla.org/en-US/docs/Learn/
Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling Testing —
Vue.js. (nd). Teste — Vue.Js; v2.vuejs.org. Recuperado em 11 de julho de 2022, em https://
v2.vuejs.org/v2/guide/testing.html
Bibliografia ÿ 241
Testando aplicativos Vue com a biblioteca de testes Vue — Smashing Magazine.

(2020, 24 de novembro). Revista Smashing; www.smashingmagazine. com.
https://www.smashingmagazine.com/2020/11/vue-applications-vue testing-
library/ Os prós
e contras do Vue.js | AltexSoft. (2019, 11 de setembro). AltexSoft; www. altexsoft. com.
https://www.altexsoft.com/blog/engineering/pros-and-cons of-vue-js/
Os 7 principais frameworks de código aberto JavaScript úteis - Corporativo hoje. (2020,

12 de julho). Corporativo Hoje; corporatetoday.org. https://corporatetoday.org/top-
javascript-open-source-framework/
Entenda a API React Context. (2021, 6 de maio). Telerik Blogs; www.telerik.com.
https://www.telerik.com/blogs/understand-react-context-api
Usando com Vuex | Utilitários de teste Vue. (nd). Usando com Vuex | Utilitários de
Teste Vue; v1.test utils.vuejs.org. Recuperado em 11 de julho de 2022, em https://
v1.test-utils.vuejs.org/guides/
using-with-vuex.html v-if vs. v-show - Vue Conditional Rendering. (nd). V-If vs. v-Show -
Vue Conditional Rendering; learnvue.co. Recuperado em 11 de julho de 2022,
em https://learnvue.co/2021/05/v-if-vs-v-show-vue-condicional-
rendering/ Vue | Melhor empresa de desenvolvimento Vue na Índia. (2022, 11 de
fevereiro). Tecnologias Pebery; peberytechnologies. com. https://
peberytechnologies.com/technology-vue/ Vue js – uilayouts. (nd). Vue Js – Ulayouts; uilayouts. com. Re

2022, de https://uilayouts.com/category/vue-js/
vue js desenvolvido por ( 2020 , 6 de outubro) Humanity & Equality in Abortion Reform
IOM; Explicação dos Argumentos do Contexto Vue — Tutorial da API de
Composição. (nd). ICHI.
PRÓ; ichi.pro. Recuperado em 11 de julho de 2022, de https://ichi.pro/vue-

kontekisuto hikisu-no-setsumei-konpojishon-api-chu-
toriaru-147676481601998 Vue.js - CodeDocs. (2019, 1º de julho). Vue.Js - CodeDocs;
codedocs.org. https://
coded ocs.org/what-is/vue-js vue.js - Quando você usa a função render em vue? -
Estouro de Pilha. (2020, 23 de junho). Estouro de Pilha; stackoverflow. com.
https://stackoverflow.com/questions/62527036/when-do-you-use-the-
render-function-in-vue Vue.js Renderização condicional. (nd). Renderização Condicional
do Vue.Js; linuxhint. com. Recuperado em 11 de julho de 2022, em https://
linuxhint.com/vue-js conditional-rendering/
Métodos Vue.js - GeeksforGeeks. (2020, 13 de setembro). GeeksforGeeks; www.
geeksforgeeks.org. https://www.geeksforgeeks.org/vue-js-methods/
VueJS - Roteamento. (nd). VueJS - Roteamento; www.tutorialspoint.com. Recuperado
em 11 de julho de 2022, em https://www.tutorialspoint.com/vuejs/vuejs_routing.
htm
visualizar (nd). v2.vuejs.org/components-props.md at master · vuejs/v2.vuejs.org.
Github; github. com. Recuperado em 11 de julho de 2022, em https://github.com/
vuejs/vuejs.org/blob/master/src/v2/guide/components-props.md
242 ÿ Bibliografia
vuejs. (nd). v2.vuejs.org/routing.md no master · vuejs/v2.vuejs.org. Github; github.

com. Recuperado em 11 de julho de 2022, em https://github.com/vuejs/vuejs.org/
blob/master/src/v2/guide/routing.md
yaoningvital. (2019, 21 de abril). Vue - Vinculações de entrada de formulário · Edição
#122 · yaon ingvital/blog. Github; github. com. https://github.com/yaoningvital/
blog/issues/122
Yoon, J.-Y. (2021, 14 de dezembro). Adesão Focal | SpringerLink. Adesão Focal |
SpringerLink; link.springer. com. https://link.springer.com/capítulo/
10.1007/978-3-030-83696-2_7
Usos do Vue JSX: modelo kompohehma , uso do memorando de renderização e
outros momehma . (2018, 30 de março).
Usos úteis do Vue JSX: modelo de criação de composição, uso de métodos de
renderização e outros recursos; webformyself. com. https://webformyself.com/
ispolzovanie-jsx-s-vue-i-zachem-eto-nuzhno/
Índice
A Arquitetura Model-View-ViewModel (MVVM),

10 simples, 10 sobre
AccordionHeader, 171
outras estruturas
AccordionItem, 171
JS, 19 o melhor dos dois mundos, 21
AccordionPanel, 171 Active-
fácil de entender, 19
class, 125 função
flexibilidade, 20 ótimas
addEventListener(), 209 opção afterRecord,
ferramentas, 20–
187 Alibaba, 16 Angular, 2–3,
21 integração simples, 19–
9 Transição de
20 pequeno, 19 comunicação
animação, 118–119
bidirecional,
App.vue, 118–119 Append, 124 –125
20 progressividade, 9 ligação de
Sintaxe do array, 87
dados bidirecional
Herança de atributo,
reativa, 14 reatividade, 12 senso de
desabilitando, 49–50
comunidade, 10
simplicidade, 12 componentes
de arquivo único
e legibilidade, 15
B
ecossistema de ferramentas sólidas,
Benefícios do Vue.js, 8 15 tamanho
sendo uma minúsculo, 14 ferramentas e
ferramenta, 10 o melhor dos bibliotecas, 11–
dois mundos, 9 comunidade e 12 duas faces, 11 renderização e
suporte, 9 suporte da desempenho de DOM virtual, 14
comunidade, 16 arquitetura baseada em
componentes (CBA), 13
C
componentes e reutilização, 12–13
documentação concisa, 16 dividir e CamelCase vs. kebab-case, 42 Valor
conquistar, 11 documentação, de conversão como número, 227 CBA,
12 consulte CDN de arquitetura baseada em
DOM inant, 10–11 fácil componentes , download direto de, 120–123
de aprender, 8–9, 16 Grande Firewall chinês, 16
flexibilidade, 13 CloneDeep, 197–198
capacidades de integração e flexibilidade, 15 Legibilidade de código, 13
Comunidade, senso de, 10
leve, 10 requisitos Comunidade e suporte do Vue.js, 9 Suporte da
de armazenamento baixo, 12 comunidade, 16
243
244 ÿ Índice
Arquitetura baseada em componentes (CBA), 2, Componentes e reutilização, 12–13

13 Função ComponentUpdate, 9
Propriedades do componente, acesso, 32, 178 Documentação concisa, 16
context.attrs, 178–179 Grupos condicionais com v-if no elemento
context.emit, 181–182 <template>, 65–66
context.slots, 179–181 Renderização condicional, 69
funções de renderização, uso com, 33–34 pseudoseletores CSS de validação de
modelos , uso com, 32–33 esta restrição, 220
opção, uso de, 34 componentes atributos de entrada HTML de validação de
em exibição, 34–37 primeiro restrição, 220
componente, 34 componente de consumidor, 163–164
componente de arquivo único, context.attrs, 178–179
37 componentes, Vue, 59 context.emit, 181–182
renderização condicional, 59–64 context.slots, 179–181 API
grupos condicionais com v-if no elemento de contexto, 157, 163
<template>, 65–66 controlando propriedades do componente, acessando, 178
elementos reutilizáveis com a chave, 66–69 context.attrs, 178–179
v-else, 66 v-if, 65 context.emit, 181–182
v-if e v- context.slots, 179–181
show, createContext, 163
diferença entre, Componente do consumidor, 163–164
64 Componente do provedor, 163
componentes estilizados, 88 necessidade de, 160–
alterando o componente exibido 163 aplicativos de reação de produção,
dinamicamente, 94 visibilidade completa em,
benefícios de, 88 176–177 fornecer/injetar no Vue, 174–
estilo dinâmico com adereços, 92– 175 React Context API, funcionando, 160
93 React's Context API, usando, 172–174 API de
estender estilos, 94–95 contexto do React e fornecer/injetar no Vue, 167
instalar, 88–91 plugin/
componentes múltiplos, aplicar o mesmo components/nested component.vue,
estilo a, 94 passar 170–172 plugin/core/index.vue,
os adereços, 91–92 estilizar, 70 168–170 plugin/core/util/store-template.
adicionar js, 168 e Redux, 157–158 useContext,
estilos globais a componentes de arquivo 164–
único, 72–75 167 usando com cuidado,
Classes CSS, adicionando, 75–76 175–176 utilizando, 158–
Estilo CSS de componentes Vue, 70 arquivos 160
CSS externos, vinculando com,
82–84 Controlando elementos reutilizáveis com a chave,
arquivos CSS externos, estilo com, 70– 66 v-else-
72 if, 68–69 v-if vs. v-
estilos globais, usando, 84–85 show, 68 v-if com v-
estilo embutido, usando, 85–87 pré- for, 68 v-show, 68
requisitos, 80–81 método
propriedade com escopo, usando, 81– createContext, 163 Componente
82 estilos com escopo, adicionando, do consumidor, 163– 164 Componente
76–80 configurando o projeto Vue, 81 do provedor, 163
Índice ÿ 245
Animação CSS3, usando, 119–120 Formulários,
Estilo CSS de componentes Vue, 70 207 acessando campos de formulário,

210–211 função hasValue(), 216
referência, 208
D
formulário de inscrição, 211–
Debugging React apps, 176 Detail.vue 213 manipulador de evento de envio, 217–
Component, 117–118 Details.vue, 116–117 218 envio, 208–209 função

DI, 167, 170 Desvantagens validEmail(), 216 trabalho, 214 função
do Vue.js, 16 showMessage() ,
falta de desenvolvedores experientes, 214–215
18 falta de suporte financeiro para projetos de
grande escala, 19 falta de plugins, 18 falta de
G
escalabilidade,
18 falta de suporte para GitHub, 2, 3, 120, 199
projetos de grande escala,
H
17
barreira do idioma, 16–17 função hasValue(), 216 Home.vue,

recursos limitados, 17 pacote 116 Validação de
de pobreza, 18 restrição HTML, 220
complexidade de reatividade, 17
risco de excesso de flexibilidade,
EU
17 comunidade pequena, 18
sem opções, 18–19 Documentação, Imagens, importando, 97–103
12 Modelo de objeto de Estilo embutido, usando, 85
documento (DOM), 2 DOM, consulte Documento sintaxe de array, 87
Modelo de objeto DOM-inant, 10–11 Opções de sintaxe de objeto, 85–86
seleção dinâmica, 228 Debounce de entrada, 230
grupos de opções, 229–230 opções de valores de entrada de ligação com v-model,
filtro, 230 opções padrão 232–235
estáticas, 230 Estilo configurando o aplicativo vue.js, 231–232

dinâmico com props em Vue.js, Capacidades de integração e
92–93 flexibilidade, 15
JavaScript, 5, 13
Classe exata-ativa, 125 Validação de formulário JavaScript, 218
Desenvolvedores experientes, falta de, 18 validação automática de
Arquivos CSS externos formulário HTML, 219
ligando com, 82–84 básico, 226–227 uso
estilizando com, 70–72 básico, 220–223 ligação a

expressões, 228 conversão de
valor como número, 227 pseudoseletores
F
CSS de validação de restrição, 220 atributos
Apoio financeiro, para projetos de grande porte, de entrada HTML
19 de validação de restrição, 220
Flexibilidade, 13, 15, 17, 20
246 ÿ Índice
validação de dados, 219 adicionando manualmente uma nova rota, 145–146

opções dinâmicas renderizadas com v-for, scripts, 148
223–224 significado de, 143
opções de seleção dinâmica, 228 iniciando um projeto Vue.js, 144–145 em
grupos de opções, 229–230 Vue.js, 143
opções de filtro, 230 declaração de importação de webpack, 147–148
opção padrão estática, 230 Lazy updates, 227
validação de restrição HTML, 220 debounce Bibliotecas, ferramentas e, 11– 12
de entrada, 230 configuração Peso leve do Vue.js, 10 Recursos

de nosso aplicativo vue.js, 231–232 v-model, limitados, do Vue.js, 17 LogRocket, 176,
vinculação de valores de entrada com, 232 –235 235 Baixos requisitos de
armazenamento, 12
atualizações
preguiçosas, 227
M
modificadores,
225 .lazy, 225 .number, 225 Main.js, 130–132
.trim, 226 auxiliar MapState, 52–53
v-model com componentes, 226 arquitetura Model Display Controller (MVC), 1
entrada numérica, validação, 219 associações arquitetura Model-
de valor, 224–225 View-ViewModel (MVVM), 10 modificadores,
Extensão de sintaxe JavaScript (JSX), 5, 23 configurar 225 .lazy, 225 .number,
Vue para usar, 26–27 importar 225 .trim, 226 v-
componentes Vue JSX, 28 fazer JSX funcionar modelo com
com typescript, 28–29 componentes,

arquitetura
pré-requisitos, 24–26 na 226 MVC, consulte Arquitetura do

função de renderização, 28 controlador de exibição do modelo
JSX, consulte extensão de sintaxe JavaScript

Arquitetura MVVM, consulte Model-View
Arquitetura ViewModel
eu
Barreira do idioma, do Vue.js, 16–17 Projetos

N
de grande escala sem
suporte financeiro para, 19 Projetos de NavbarComponent, 38
grande escala, falta de suporte para, 17 .lazy, 225 'Nock.back', usando, 186 ações,
Carregamento zombando, 188–191 getters,
lento, 143 adicionando, zombando, 191–193 módulos,
148–150 importações zombando com,
dinâmicas, 150 –152 exemplo, 143– 193–195
144 agrupando Atributos não prop, 48–49 .number,

componentes no mesmo bloco, 154–155 como 225
carregar lentamente
componentes Vue.js, 146–147

O
instruções de importação, remoção, 147 função Operador de propagação de objetos, 53
lazyLoad, 147 componentes Sintaxe do objeto, 85–86

Vue de carregamento lento, 152–154 Fluxo de dados unidirecional, 45–46
Grupos de opções, 229–230
Índice ÿ 247
Filtro de opções, 230 Validação de prop, 46-47

Excesso de flexibilidade, risco de, 17 Fornecer/injetar no Vue, 174–175
Componente do provedor, 163
P
R
Plugins, falta de, 18
Poverty pack, de Vue.js, 18 aplicativos React, 2–3, 9
de reação de produção, visibilidade completa em, 176–177 React Context API, funcionando, 160 Reactive
Navegação two-way data binding, 14 Reactivity, 12 Reactivity
programática, 133 carregamento lento, 143 complex, of Vue.js,
adição, 148–150 17 React's Context API, using, 172–174 React's
importações dinâmicas, Context API and provide/ injetar no Vue, 167 plugin/
150–152 exemplo, 143–144 agrupar components/nested-component. vue, 170–172 plugin/core/
componentes no mesmo index.vue,
168–170 plugin/core/util/store-template.js, 168

chunk, 154–155 como
carregar lentamente componentes

Vue.js, 146–147 instruções de
importação, removendo,
147 Redux, API de Contexto e, 157–158
função lazyLoad, 147 Funções de renderização
componentes Vue de carregamento lento, uso com, 33–34 usando

152–154 JSX in, 28
adicionando manualmente uma nova rota, Reusabilidade, 12–13
145–146 Router.go, 138–140, 142–143
scripts, 148 Router.push, 133–138, 140 exemplo,
significado de, 143 140–142 Router.replace,
iniciando um projeto Vue.js, 144– 138, 142 Router e parâmetros de
145 consulta, 126
em Vue.js, 143 obtendo parâmetros de consulta de um URL, 127–130
declaração de importação do webpack,
147–148 URLSearchParams, 130 main.js,
router.go(n), 142–143 130–132 Roteamento,

router.go, 138–140 4, 6, 12, 20, 103, 105
router.push(), 140 transição de animação, 118–119 App.vue,
exemplo, 140–142 118–119 CDN, download

router.push, 133–138 direto de,
router.replace, 138, 142 120–123
Progressividade do Vue.js, 9 Prop config, 108–111

caseing, 42 tipos de Animação CSS3, usando, 119–120 detail.vue
prop, 43 fluxo de Component, 117–118 details.vue, 116–117
dados unidirecional, 45–46 passando Getting started, 105–108
um booleano, 44 passando home.vue, 116 props for router

um array, 44 passando um link, 123 active-
objeto, 44–45 passando um class, 125 anexar, 124–125 classe

número, 44 passando props exata-ativa, 125
estáticos ou dinâmicos, 43 passando as

propriedades de um objeto, 45
248 ÿ Índice
router-link, 111 .trim, 226

router-view, 112 verificações de tipo,
roteamento simples, 126 47 atributos não prop, 48–49
usando os parâmetros dentro dos
roteadores, 112–116
EM
UI, consulte Teste de

S
unidade da interface
Escalabilidade, falta de, 18 do usuário , 13 escolhendo sua estrutura, 198–
estilos com escopo, adição, 76–80 199 instalação, 199–200
Configuração, URLSearchParams, 130
29 contexto, main.js, 130–132
31 props argumento, 30 useContext, 164–167
função showError(), 215 função Interface do usuário (UI), 1
showMessage(), 214–215 função
showMessage(), 215 função EM
showSuccess(), 215 Simplicidade,
12 componentes função validEmail(), 216 V-else, 66 V-
de arquivo único e legibilidade, 15 else-if, 68–
aplicativos de 69 V-if, 65 V-if e v-
página única (SPAs), 3 árvore de estado show,
único, 50–52 comunidade diferença entre, 64 V -if vs. v-show,
pequena, de Vue.js, 18 ecossistema de 68 V-if com v-
ferramentas sólidas, 15 SPAs, for, 68 Virtual DOM, 5,
consulte estado de aplicativos de página 14, 21 V-model,
única , 50 vinculando valores de entrada
componentes com estado local, com, 232–235
53
ajudante mapState, 52–53 Modelo V com componentes, 226 V-
operador de dispersão de objetos, show, 68
53 árvore de estado único, Vue.js, 1–8
50–52 opção padrão estática, Vue.js-testing-library, 198
230 StyledHeader, 94 introdução, 201–204
método submit(), 209 necessidade de uso,
manipulador de eventos de envio, 217–218 201 problema,
204 início rápido,
204 solução, 204–206
T
teste de
Elemento <template>, grupos condicionais com v-if unidade escolhendo sua estrutura, instalação
ativado, 65–66 198–199 , 199–200
Modelos, uso com, 32–33 Biblioteca de testes Vue, 201
Esta opção, uso de, 34 funcionando, 201
componentes em exibição, 34–37 Exibir CLI, 8, 15, 20, 24, 26, 38, 80, 89, 98,
primeiro componente, 34 105, 109, 143, 145, 201–202
componente de arquivo único, 37 VueJobs, 18
Tamanho Biblioteca de testes Vue, 183
minúsculo, 14 função toggleExpansion, 172 Nock, 183, 184–185
Ferramentas e bibliotecas, 11–12 adicionando, 185
Índice ÿ 249
zombando de solicitações HTTP durante o Vuex, 13
teste, 184 Loja Vuex, testando, 195

'nock.back', usando, 186–195 testando uma loja em execução, 196–198
usando, 185–186 testando getters, mutações e ações
Vuex store, testando, 195–198 separadamente, 195-196
trabalhando, 183
Vue.js-testing-library, 198 EM
começando, 201–204 precisa
para uso, 201 problema, Estruturas de desenvolvimento da Web, estilo
204 início rápido, de, 88
204 solução, 204– Declaração de importação do Webpack, 147–148

206 teste de unidade,
198–200 biblioteca de teste x

Vue, 201 funcionando, 201
Xiaomi, 16

Bin U. Mastering Vue - Js. A Beginner's Guide 2023-Compactado

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Bin U. Mastering Vue - Js. A Beginner's Guide 2023-Compactado

Enviado por

Direitos autorais:

Formatos disponíveis

Machine Translated by Google

Machine Translated by Google

Dominar Ciência da Computação

Dominando o Vue.js: um guia para

Dominando o GoLang: um guia para iniciantes

Dominando o Ubuntu: um guia para iniciantes

Dominando o código do Visual Studio: um guia para iniciantes

Dominando o NativeScript: um guia para iniciantes

Dominando o GNOME: um guia para iniciantes

Para obter mais informações sobre esta série, visite: https://www.routledge.

A série de livros “Mastering Computer Science” é de autoria dos

Sufyan bin Ozar

Primeira edição publicada em 2023

e por CRC Imprensa

CRC Press é uma marca da Taylor & Francis Group, LLC

© 2023 Sufyan bin Ozar

Dados de Catalogação na Publicação da Biblioteca do Congresso

Nomes: Bin Uzayr, Sufyan, editor.

ISBN: 9781032315942 (hbk)

Capítulo 1 ÿ Introdução ao Vue.js O 1

Melhor dos Dois Mundos 9

Arquitetura Model-View-ViewModel (MVVM) 10

Seja uma ferramenta 10

Requisitos de baixo armazenamento 12

Arquitetura Baseada em Componentes (CBA) 13

Renderização e desempenho de DOM virtual 14

Ligação de dados bidirecional reativa 14

Componentes de arquivo único e legibilidade 15

Capacidades de Integração e Flexibilidade 15

Ecossistema de ferramentas sólidas 15

Falta de Apoio para Projetos de Grande Escala 17

Risco de excesso de flexibilidade 17

Falta de desenvolvedores experientes 18

Mimado por opções 18

Falta de apoio financeiro para projetos de grande escala 19

BENEFÍCIOS SOBRE OUTROS JS FRAMEWORKS 19

Comunicação de duas vias 20

Melhor dos Dois Mundos 21

Capítulo 2 ÿ Noções básicas do Vue.js 23

Configurar Vue para usar JSX 26

Usando JSX no Render 28

Importando componentes Vue JSX 28

Como fazer JSX funcionar com Typescript 28

ACESSO ÀS PROPRIEDADES DOS COMPONENTES 32

Uso com modelos 32

Uso com funções de renderização 33

Componente de arquivo único 37

Prop Invólucro (camelCase vs. kebab-case) 42

Passando Props Estáticos ou Dinâmicos 43

Passando as Propriedades de um Objeto 45

Prop Verificações de Tipo Não-Prop 48

Usando atributos existentes para substituir/mesclar 49

Desativando a Herança de Atributo 49

Árvore de estado único 50

Obtendo o estado Vuex nos componentes Vue 51

Operador de Espalhamento de Objetos 53

Os componentes ainda podem ter estado local 53

Capítulo 3 ÿ Componentes Vue 59

Renderização Condicional Vue.js 59

Qual é a diferença entre v-if e v-show? 64

Quando você deve utilizar cada um deles? 64

Grupos condicionais com v-if em <template> 65

Controlando elementos reutilizáveis com a chave 66