From bc616f92bc3c9c1beac9a38a47973f2b43734cd8 Mon Sep 17 00:00:00 2001 From: Marcos Dantas Date: Tue, 15 Sep 2020 21:37:16 -0300 Subject: [PATCH 001/334] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Começando... --- README.md | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 54d1f29c54..2c437b388d 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,31 @@ # v3.vuejs.org +Este site é produzido com [VuePress](https://vuepress.vuejs.org/). Todo seu conteúdo é escrito em Markdown e todos arquivos podem serem encontrados em `src`. -This site is built with [VuePress](https://vuepress.vuejs.org/). Site content is written in Markdown format located in `src`. +## Escrevendo +Veja o [Guia de escrita do Vue](https://v3.vuejs.org/guide/writing-guide.html) para regras e recomendações sobre escrever e manter a documentação. -## Writing +>Neste momento a doc está em beta: O time esta atualmente no meio de uma mudanças, e não receberemos contribuições, não por em quanto. Todo conteúdo estará sujeito a mudanças, se você viu algum, por favor, traga nos a atenção, [criando uma issue](https://github.com/vuejs/docs-next/issues/new) e faremos o possível para compreender e mudar, provavelmente você vai precisar ou querer até que tudo esteja pronto. -See the [Vue Docs Writing Guide](https://v3.vuejs.org/guide/writing-guide.html) for our rules and recommendations on writing and maintaining documentation. +## Desenvolvendo -> The docs are in beta: The team is currently in the midst of changes and we are not ready for additional contributions yet. All content is subject to change. If you see a problem that you would like to bring to our attention, please [create an issue](https://github.com/vuejs/docs-next/issues/new) and we will get to it when we can. You may want to wait until the content is finalized, though. - -## Developing - -1. Clone repository +1. Clone este repositório ```bash -git clone git@github.com:vuejs/docs-next.git +git clone https://github.com/vuejs-br/docs-next.git ``` -2. Install dependencies +2. Instale as dependências ```bash yarn # or npm install ``` -3. Start local development environment +3. Iniciando um ambiente local de dev. ```bash yarn serve # or npm run serve ``` -## Deploying +## Entrega em produção -The site is automatically deployed when commits land in `master`, via [Netlify](https://www.netlify.com/). +O site será automaticamente atualizado, quando os commits forem aceitos e mergeados para `master`, todo conteúdo é entregue via [Netlify](https://www.netlify.com/). From efa15a37d4dcb7f656e94ef3b174a1d11b1dcb06 Mon Sep 17 00:00:00 2001 From: Marcos Dantas Date: Tue, 15 Sep 2020 21:43:21 -0300 Subject: [PATCH 002/334] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2c437b388d..7fe4ff2f4c 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # v3.vuejs.org -Este site é produzido com [VuePress](https://vuepress.vuejs.org/). Todo seu conteúdo é escrito em Markdown e todos arquivos podem serem encontrados em `src`. +Este site é produzido com [VuePress](https://vuepress.vuejs.org/). Todo seu conteúdo é escrito em Markdown e todos arquivos podem ser encontrados em `src`. ## Escrevendo Veja o [Guia de escrita do Vue](https://v3.vuejs.org/guide/writing-guide.html) para regras e recomendações sobre escrever e manter a documentação. From 7afe7fbce116c6fb1722f582a00be5f106aa91f9 Mon Sep 17 00:00:00 2001 From: Marcos Dantas Date: Tue, 15 Sep 2020 21:43:52 -0300 Subject: [PATCH 003/334] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7fe4ff2f4c..e1695f90f7 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Este site é produzido com [VuePress](https://vuepress.vuejs.org/). Todo seu con ## Escrevendo Veja o [Guia de escrita do Vue](https://v3.vuejs.org/guide/writing-guide.html) para regras e recomendações sobre escrever e manter a documentação. ->Neste momento a doc está em beta: O time esta atualmente no meio de uma mudanças, e não receberemos contribuições, não por em quanto. Todo conteúdo estará sujeito a mudanças, se você viu algum, por favor, traga nos a atenção, [criando uma issue](https://github.com/vuejs/docs-next/issues/new) e faremos o possível para compreender e mudar, provavelmente você vai precisar ou querer até que tudo esteja pronto. +>Neste momento a doc está em beta: O time esta atualmente no meio de mudanças, e não receberemos contribuições, não por em quanto. Todo conteúdo estará sujeito a mudanças, se você viu algum, por favor, traga nos a atenção, [criando uma issue](https://github.com/vuejs/docs-next/issues/new) e faremos o possível para compreender e mudar, provavelmente você vai precisar ou querer até que tudo esteja pronto. ## Desenvolvendo From 61c7809e3ee7509eacff8e4c6d183dfd7a7a82e1 Mon Sep 17 00:00:00 2001 From: Marcos Dantas Date: Tue, 15 Sep 2020 21:44:12 -0300 Subject: [PATCH 004/334] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e1695f90f7..2a35d4cc97 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Este site é produzido com [VuePress](https://vuepress.vuejs.org/). Todo seu con ## Escrevendo Veja o [Guia de escrita do Vue](https://v3.vuejs.org/guide/writing-guide.html) para regras e recomendações sobre escrever e manter a documentação. ->Neste momento a doc está em beta: O time esta atualmente no meio de mudanças, e não receberemos contribuições, não por em quanto. Todo conteúdo estará sujeito a mudanças, se você viu algum, por favor, traga nos a atenção, [criando uma issue](https://github.com/vuejs/docs-next/issues/new) e faremos o possível para compreender e mudar, provavelmente você vai precisar ou querer até que tudo esteja pronto. +>Neste momento a doc está em beta: O time esta atualmente no meio de mudanças e não receberemos contribuições, não por em quanto. Todo conteúdo estará sujeito a mudanças, se você viu algum, por favor, traga nos a atenção, [criando uma issue](https://github.com/vuejs/docs-next/issues/new) e faremos o possível para compreender e mudar, provavelmente você vai precisar ou querer até que tudo esteja pronto. ## Desenvolvendo From f27c1fc11fd9c4588ad046afec80d85382d6a002 Mon Sep 17 00:00:00 2001 From: Marcos Dantas Date: Tue, 15 Sep 2020 21:45:18 -0300 Subject: [PATCH 005/334] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2a35d4cc97..e9b6170d22 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Este site é produzido com [VuePress](https://vuepress.vuejs.org/). Todo seu con ## Escrevendo Veja o [Guia de escrita do Vue](https://v3.vuejs.org/guide/writing-guide.html) para regras e recomendações sobre escrever e manter a documentação. ->Neste momento a doc está em beta: O time esta atualmente no meio de mudanças e não receberemos contribuições, não por em quanto. Todo conteúdo estará sujeito a mudanças, se você viu algum, por favor, traga nos a atenção, [criando uma issue](https://github.com/vuejs/docs-next/issues/new) e faremos o possível para compreender e mudar, provavelmente você vai precisar ou querer até que tudo esteja pronto. +>Neste momento a doc está em beta: O time esta atualmente no meio de mudanças e não receberemos contribuições, não por em quanto. Todo conteúdo está sujeito a mudanças, se você viu algo que precise de melhorias, por favor, traga nos a atenção, [criando uma issue](https://github.com/vuejs/docs-next/issues/new) e faremos o possível para compreender e mudar, no entando, provavelmente você vai precisar ou querer até que toda a doc esteja pronta. ## Desenvolvendo From 59e4180b00dff6a053b2b95b4a417b695757bb61 Mon Sep 17 00:00:00 2001 From: Marcos Dantas Date: Tue, 15 Sep 2020 21:46:43 -0300 Subject: [PATCH 006/334] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e9b6170d22..003546fe8a 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Este site é produzido com [VuePress](https://vuepress.vuejs.org/). Todo seu con ## Escrevendo Veja o [Guia de escrita do Vue](https://v3.vuejs.org/guide/writing-guide.html) para regras e recomendações sobre escrever e manter a documentação. ->Neste momento a doc está em beta: O time esta atualmente no meio de mudanças e não receberemos contribuições, não por em quanto. Todo conteúdo está sujeito a mudanças, se você viu algo que precise de melhorias, por favor, traga nos a atenção, [criando uma issue](https://github.com/vuejs/docs-next/issues/new) e faremos o possível para compreender e mudar, no entando, provavelmente você vai precisar ou querer até que toda a doc esteja pronta. +>Neste momento a doc está em beta: O time esta atualmente no meio de mudanças e não receberemos contribuições, não por em quanto. Todo conteúdo está sujeito a mudanças, se você viu algo que precise de melhorias, por favor, traga nos a atenção, [criando uma issue](https://github.com/vuejs-br/docs-next/issues/new) e faremos o possível para compreender e mudar, no entando, provavelmente você vai precisar ou querer esperar até que toda a doc esteja pronta. ## Desenvolvendo From d0c77ac9f6d2175ff63834c0402a35103cd87661 Mon Sep 17 00:00:00 2001 From: Erick Eduardo Petrucelli Date: Wed, 16 Sep 2020 10:47:23 -0300 Subject: [PATCH 007/334] Translate and closes #23 --- src/guide/contributing/doc-style-guide.md | 67 +++++++++++++---------- 1 file changed, 38 insertions(+), 29 deletions(-) diff --git a/src/guide/contributing/doc-style-guide.md b/src/guide/contributing/doc-style-guide.md index a465d866aa..5d9d963699 100644 --- a/src/guide/contributing/doc-style-guide.md +++ b/src/guide/contributing/doc-style-guide.md @@ -1,59 +1,59 @@ -# Documentation Style Guide +# Guia de Estilização da Documentação -This guide will provide an overview of different design elements that are available for your use in creating documentation. +Este guia fornece uma visão geral dos diferentes elementos de _design_ que estão disponíveis para uso durante a criação de documentação. -## Alerts +## Alertas -VuePress provides a custom container plugin to create alert boxes. There are four types: +VuePress oferece um _plug-in_ de contêiner personalizado para blocos de alerta. Existem quatro tipos: -- **Info**: Provide information that is neutral -- **Tip**: Provide information that is positive and encouraged -- **Warning**: Provide information that users should be aware of as there is a low to moderate -- **Danger**: Provide information that is negative and has a high risk to the user +- **Informações**: Para exibir informações neutras +- **Dica**: Para exibir informações positivas e incentivadas +- **Aviso**: Para exibir informações que os usuários devem estar cientes, pois há um baixo a moderado risco +- **Perigo**: Para exibir informações negativas e/ou de alto risco para o usuário -**Markdown Examples** +**Markdown de Exemplo** ``` ::: info -You can find more information at this site. +Você pode encontrar mais informações neste _site_. ::: ::: tip -This is a great tip to remember! +Esta é uma ótima dica para se lembrar! ::: ::: warning -This is something to be cautious of. +Isso é algo para ser cauteloso. ::: ::: danger DANGER -This is something we do not recommend. Use at your own risk. +Isso é algo que não recomendamos. Use por sua conta e risco. ::: ``` -**Rendered Markdown** +**Resultado Renderizado** ::: info -You can find more information at this site. +Você pode encontrar mais informações neste _site_. ::: ::: tip -This is a great tip to remember! +Esta é uma ótima dica para se lembrar! ::: ::: warning -This is something to be cautious of. +Isso é algo para ser cauteloso. ::: ::: danger DANGER -This is something we do not recommend. Use at your own risk. +Isso é algo que não recomendamos. Use por sua conta e risco. ::: -## Code Blocks +## Blocos de Código -VuePress uses Prism to provide language syntax highlighting by appending the language to the beginning backticks of a code block: +VuePress usa o Prism para fornecer destaques de sintaxe de código-fonte (_syntax highlighting_), ao acrescentar a linguagem desejada após os três acentos graves de um bloco de código: -**Markdown Example** +**Markdown de Exemplo** ```` ```js @@ -63,20 +63,21 @@ export default { ``` ```` -**Rendered Output** +**Resultado Renderizado** + ```js export default { name: 'MyComponent' } ``` -### Line Highlighting +### Destacando Linhas -To add line highlighting to your code blocks, you need to append the line number in curly braces. +Para adicionar destaques de linha aos blocos de código, você precisa acrescentar o número da linha entre chaves. -#### Single Line +#### Linha Única -**Markdown Example** +**Markdown de Exemplo** ```` ```js{2} @@ -90,7 +91,7 @@ export default { ``` ```` -**Rendered Markdown** +**Resultado Renderizado** ```js{2} export default { @@ -102,7 +103,9 @@ export default { } ``` -#### Group of Lines +#### Grupos de Linhas + +**Markdown de Exemplo** ```` ```js{4-5} @@ -116,6 +119,8 @@ export default { ``` ```` +**Resultado Renderizado** + ```js{4-5} export default { name: 'MyComponent', @@ -126,7 +131,9 @@ export default { } ``` -#### Multiple Sections +#### Múltiplas Seções + +**Markdown de Exemplo** ```` ```js{2,4-5} @@ -140,6 +147,8 @@ export default { ``` ```` +**Resultado Renderizado** + ```js{2,4-5} export default { name: 'MyComponent', From 1d22327853b31cd1b8d9b731abf45b0134a1d4a8 Mon Sep 17 00:00:00 2001 From: Erick Eduardo Petrucelli Date: Wed, 16 Sep 2020 11:56:57 -0300 Subject: [PATCH 008/334] Update "translations.md" with important guidelines --- src/guide/contributing/translations.md | 122 +++++++++++++++++++++++-- 1 file changed, 116 insertions(+), 6 deletions(-) diff --git a/src/guide/contributing/translations.md b/src/guide/contributing/translations.md index 844ea17014..3c7e9b6511 100644 --- a/src/guide/contributing/translations.md +++ b/src/guide/contributing/translations.md @@ -1,11 +1,121 @@ -# Translations +# Traduzindo -Vue has spread across the globe, with the core team being in at least half a dozen different timezones. [The forum](https://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&q=vuejs.org). We'are very proud of Vue's international reach, but we can do even better. +Vue se espalhou pelo globo, com a equipe principal em pelo menos meia dúzia de fusos horários diferentes. O [fórum oficial](https://forum.vuejs.org/) inclui 7 idiomas e contando. Além disso, muitas de nossas documentações têm [traduções mantidas ativamente](https://github.com/vuejs?utf8=%E2%9C%93&q=vuejs.org). Temos muito orgulho do alcance internacional do Vue, mas podemos fazer ainda melhor. -## Can we start translating Vue 3 docs? +## Podemos mesmo traduzir a documentação do Vue 3? -Yes! We are ready for translation! +Sim! Estamos prontos para a tradução! -## How can I get involved with translations? +## Como posso me envolver com traduções? -The best way to get started is to check out [this pinned issue](https://github.com/vuejs/docs-next/issues/478) that contains active discussions on the various initiatives happening in the community. +Digamos que você fale Esperanto e quer saber quais iniciativas de tradução já existem e como se envolver em uma delas, confira [esta _issue_ afixada](https://github.com/vuejs/docs-next/issues/478) que contém discussões ativas sobre as iniciativas de tradução da nova documentação pela comunidade. + +### Como colaborar com a versão em português? + +Mas se você está aqui, deve ser por falar português! Neste caso, para nos ajudar diretamente, intereja com a equipe em [nosso repositório de tradução](https://github.com/vuejs-br/docs-next). + +::: tip +Problemas pontuais em traduções já realizadas, como erros de grafia pequenos ou frases confusas, podem ser reportados apenas [criando uma _issue_](https://github.com/vuejs-br/docs-next/issues/new). Deixe claro sobre qual página se refere o problema e, preferencialmente, ofereça uma sugestão para a correção desejada. +::: + +Mas se você se sente à vontade para traduzir/revisar conteúdos inteiros por conta, os passos são: + +- Verifique o que já está em [aberto nas _issues_](https://github.com/vuejs-br/docs-next/issues), + - Se necessário, [crie uma _issue_](https://github.com/vuejs-br/docs-next/issues/new) cujo título contenha claramente o nome do arquivo alvo da tradução. Por exemplo: `Traduzir "guide/installation.md"`; + - Na _issue_ alvo de seu trabalho, deixe um comentário avisando que está trabalhando nisso, para evitar trabalho duplicado por outros colaboradores. +- Faça um _fork_ do _branch_ `master` deste _repo_ para sua própria conta, + - Faça as traduções/revisões no(s) arquivo(s) que se propôs, usando o editor que quiser; + - Recomendamos fortemente que faça uma revisão geral antes de considerar concluído, de preferência usando um corretor gramatical acoplado ao seu editor. +- Ao finalizar, faça um _pull request_ para este _repo_ contendo o(s) arquivo(s) modificado(s) e **a descrição do _commit_ em inglês** (recomendação do _core team_), + - Alguém da equipe de mantenedores do Vue.js Brasil vai avaliar seu _pull request_, eventualmente solicitar novos _commits_ se ainda precisar de algum ajuste e, depois de tudo pronto, liberar sua contribuição para o mundo. +- **Gostou e quer mais?** Não se esqueça de fazer um _pull_ das alterações mais recentes antes de recomeçar o processo, já que a documentação original em inglês sempre sofre alterações e frequentemente fazemos a sincronização com o [_upstream_](https://github.com/vuejs/docs-next) para manter tudo em dia. + +::: warning +Se passar alguns dias desde que avisou sobre o trabalho que estava fazendo e não conseguir terminar, volte na _issue_ e avise a equipe: outras pessoas podem querer dar continuidade em seu trabalho! Neste caso, você poderá enviar um _pull request_ com a parte feita e deixar que outros façam novos _commits_ ali mesmo, até que o trabalho seja finalizado. Por favor, não abandone do nada o trabalho em um arquivo sem avisar ninguém, isso dificulta demais a organização do projeto! +::: + +## Recomendações para qualidade da tradução + +Para uma documentação padronizada e de qualidade, seguimos alguns princípios e recomendações gerais sobre **o que fazer**: + +- Traduzir os comentários dos códigos-fonte, sejam eles _inline_ `//` ou de múltiplas-linhas `/* */`; +- Traduzir textos informativos dos códigos-fonte, por exemplo: `
Nível 1
`; +- Seguir maiúsculas e minúsculas conforme o original em inglês sempre que possível, exceto quando existir claramente uma regra de notaçãoo diferente na língua portuguesa; +- Usar itálico em expressões sem tradução (por exemplo, _view layer_), exceto em nomes próprios grafados em maiúsculas (por exemplo, Internet); +- Utilizar alguma extensão de ortografia e gramática vinculada ao seu editor de código, para evitar que erros deste tipo sejam submetidos; +- Quando for submeter seu trabalho, sempre escreva a descrição do _commit_ em inglês (recomendação do _core team_). + +E algumas recomendações sobre **o que não fazer**: + +- Não traduzir nomes de variáveis, métodos, dados, _ids_, classes etc. nos códigos-fonte, ou seja, nada que afetaria a estrutura e a execução do código-fonte; +- Não grafar em itálico tipos de dados ou valores primitivos (como true, false, String, Object); +- Não modificar a estrutura dos arquivos `.md` traduzidos, ou seja, não mudar o local das quebras de linha, dos títulos, dos parágrafos, não remover quebras de linhha entre títulos e parágrafos, etc. Qualquer mudança neste sentido dificulta muito _merges_ futuros na hora de manter a documentação atualizada em relação à documentação em inglês. +- Não fazer _pull_ diretamente do [_upstream_](https://github.com/vuejs/docs-next), este repositório da tradução é que deve ser alvo do seu _fork_ pessoal; +- Não fazer _pull request_ diretamente para o [_upstream_](https://github.com/vuejs/docs-next), a tradução sempre acontece apenas neste repositório. + +### Termos padronizados + +Alguns termos recorrentes causam dúvidas aos novos colaboradores da tradução. Alguns são sempre traduzidos de certa forma, outros nunca são traduzidos. Veja como ficar dentro do padrão: + +**Sempre traduzimos** + +Devem ser traduzidos sempre da mesma maneira (a menos que sua tradução atrapalhe demais o contexto da frase, o que deve ser discutido na _issue_ correspondente): + +- _Bundle_ = Pacote +- _Debug_ = Depuração +- _Handling_ = Manipulação +- _Event Listening_ = Escuta de Eventos +- _Render Function_ = Função de Renderização +- _Computed Properties_ = Dados Computados +- _Single-File Components_ = Componentes Single-File +- _Custom Elements_ = Elementos Personalizados +- _Performance_ = Desempenho +- _Watchers_ = Observadores +- _Under the hood_ = Em seu interior +- _Server-Side Rendering_ = Renderização no Lado do Servidor +- _Props_ = Propriedades +- _Hooks_ = Gatilhos +- _Bind_ = Vínculo ou Interligação + +**Nunca traduzimos** + +Atualmente, recomenda-se que os termos a seguir sejam mantidos em inglês, inclusive com a grafia em itálico ou sem itálico, conforme apresentado a seguir: + +- _getter_ +- _setter_ +- _standalone_ +- _runtime_ +- _store_ +- _scaffolding_ +- _loader_ +- _loop_ +- _template_ +- _wrapper_ +- _hot-reload_ +- _open-source_ +- _framework_ +- _issue_ +- true +- false +- Number +- String +- Boolean +- Array + +**Traduzir mas manter o original** + +Em alguns casos, para facilitar a compressão tanta por desenvolvedores menos experiências quanto mais experiências, alguns termos podem ser traduzidos mas com o original em inglês entre parênteses, por exemplo: + +> A biblioteca principal é focada exclusivamente na camada visual (_view layer_) das aplicações. + +Na dúvida, discuta na _issue_ correspondete ao arquivo que estiver trabalhando, para trocar opiniões com os mantenedores. + +## Como escrever melhor? + +O _core team_ criou um material vasto e interessante no [Guia de Escrita da Documentação](./writing-guide.md) para melhorar a escrita de conteúdos de documentação, o que também é muito relevante para que traduzir conteúdos. Passe um tempo por lá se inteirando das recomendações, certamente serão úteis para isto e para várias outras situações. + +## Como discutir sobre a tradução? + +Como indivíduos, estamos espalhados por aí entre as várias [comunidades Vue.js Brasil](https://github.com/vuejs-br/comunidades) existentes em várias plataformas/localidades. Pode procurar por qualquer mantenedor listado neste GitHub e vai acabar encontrando em algum (ou vários) destes locais. + +Mas, para fins de organização da tradução, **não conduzimos discussões externas a este repositório**. Portanto, vale reforçar: se precisar conversar sobre a tradução, [crie uma _issue_](https://github.com/vuejs-br/docs-next/issues/new). From 140899371bcd270e9d004d5739fc368a944a7896 Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Wed, 16 Sep 2020 16:48:12 -0300 Subject: [PATCH 009/334] Update component-template-refs.md --- src/guide/component-template-refs.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/guide/component-template-refs.md b/src/guide/component-template-refs.md index e87de3f650..65b56e040b 100644 --- a/src/guide/component-template-refs.md +++ b/src/guide/component-template-refs.md @@ -1,14 +1,14 @@ -# Template refs +# Template _refs_ -> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components. +> Esta página assume que você já leu [Componentes Básicos](component-basics.md). Leia lá primeiro se você for novo em componentes. -Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you can assign a reference ID to the child component or HTML element using the `ref` attribute. For example: +Apesar da existência de propriedades e eventos, às vezes você ainda pode precisar acessar diretamente um componente filho em JavaScript. Para isso, você pode atribuir um ID de referência ao componente filho ou elemento HTML usando o atributo `ref`. Por exemplo: ```html ``` -This may be useful when you want to, for example, programmatically focus this input on component mount: +Isso pode ser útil quando você deseja, por exemplo, de forma programática, aplicar o _focus_ nesse _input_ na montagem do componente: ```js const app = Vue.createApp({}) @@ -28,7 +28,7 @@ app.component('base-input', { }) ``` -Also, you can add another `ref` to the component itself and use it to trigger `focusInput` event from the parent component: +Além disso, você pode adicionar outro `ref` ao próprio componente e usá-lo para acionar o evento `focusInput` a partir do componente pai: ```html @@ -39,7 +39,7 @@ this.$refs.usernameInput.focusInput() ``` ::: warning -`$refs` are only populated after the component has been rendered. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing `$refs` from within templates or computed properties. +`$refs` são preenchidos apenas após o componente ter sido renderizado. Isso serve apenas como uma saída de emergência para a manipulação direta de elementos filhos - você deve evitar acessar `$refs` dentro de _templates_ ou dados computados. ::: -**See also**: [Using template refs in Composition API](/guide/composition-api-template-refs.html#template-refs) +**Veja também**: [Usando _template refs_ em Composition API](/guide/composition-api-template-refs.html#template-refs) From 2493b8a905589f8dea70855065897fdedd9a8c46 Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Wed, 16 Sep 2020 16:52:49 -0300 Subject: [PATCH 010/334] Update component-template-refs.md --- src/guide/component-template-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-template-refs.md b/src/guide/component-template-refs.md index 65b56e040b..a2dfe64a9d 100644 --- a/src/guide/component-template-refs.md +++ b/src/guide/component-template-refs.md @@ -39,7 +39,7 @@ this.$refs.usernameInput.focusInput() ``` ::: warning -`$refs` são preenchidos apenas após o componente ter sido renderizado. Isso serve apenas como uma saída de emergência para a manipulação direta de elementos filhos - você deve evitar acessar `$refs` dentro de _templates_ ou dados computados. +`$refs` é preenchido apenas após o componente ter sido renderizado. Isso serve apenas como uma saída de emergência para a manipulação direta de elementos filhos - você deve evitar acessar `$refs` dentro de _templates_ ou dados computados. ::: **Veja também**: [Usando _template refs_ em Composition API](/guide/composition-api-template-refs.html#template-refs) From b5e5fc6ccfabbe9976343e82bf10d4cc083a386e Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Wed, 16 Sep 2020 18:32:12 -0300 Subject: [PATCH 011/334] Update instance.md --- src/guide/instance.md | 160 ++++++++++++++++++++++-------------------- 1 file changed, 82 insertions(+), 78 deletions(-) diff --git a/src/guide/instance.md b/src/guide/instance.md index fcdf03da31..e19450503c 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -1,151 +1,155 @@ -# The Application Instance +--- +title: A Instância Vue +type: guide +order: 3 +--- -## Creating an Instance +## Criando a Instância Vue -Every Vue application starts by creating a new **application instance** with the `createApp` function: +Toda aplicação Vue é iniciada com a criação de uma nova **instância Vue** com a função `Vue`: ```js -Vue.createApp(/* options */) -``` - -After the instance is created, we can _mount_ it, passing a container to `mount` method. For example, if we want to mount a Vue application on `
`, we should pass `#app`: - -```js -Vue.createApp(/* options */).mount('#app') +var vm = new Vue({ + // opções +}) ``` -Although not strictly associated with the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), Vue's design was partly inspired by it. As a convention, we often use the variable `vm` (short for ViewModel) to refer to our instance. +Embora não seja estritamente associado com o [padrão MVVM](https://en.wikipedia.org/wiki/Model_View_ViewModel), o _design_ do Vue foi parcialmente inspirado por ele. Como convenção, muitas vezes usamos a variável `vm` (abreviação de _ViewModel_) para se referir à instância Vue. -When you create an instance, you pass in an **options object**. The majority of this guide describes how you can use these options to create your desired behavior. For reference, you can also browse the full list of options in the [API reference](../api/options-data.html). +Quando você cria uma instância Vue, é necessário passar um **objeto de opções**. A maior parte deste guia descreve como você pode utilizar estas opções para criar os comportamentos desejados. Para referência, você também pode navegar pela lista completa de opções na [documentação da API](../api/#Opcoes-Dados). -A Vue application consists of a **root instance** created with `createApp`, optionally organized into a tree of nested, reusable components. For example, a `todo` app's component tree might look like this: +Uma aplicação Vue consiste em uma **instância Vue raiz** criada com `new Vue`, opcionalmente organizada em uma árvore de componentes reutilizáveis aninhados. Por exemplo, um aplicativo de tarefas a realizar (do tipo _todo list_) poderia ter uma árvore de componentes como esta: ``` -Root Instance +Instância Raiz └─ TodoList ├─ TodoItem - │ ├─ DeleteTodoButton - │ └─ EditTodoButton + │ ├─ TodoButtonDelete + │ └─ TodoButtonEdit └─ TodoListFooter - ├─ ClearTodosButton + ├─ TodosButtonClear └─ TodoListStatistics ``` -We'll talk about [the component system](component-basics.html) in detail later. For now, just know that all Vue components are also instances, and so accept the same options object. +Falaremos sobre o [sistema de componentes](components.html) em detalhes futuramente. Por enquanto, saiba apenas que todos os componentes Vue também são instâncias, e aceitam o mesmo esquema de opções (exceto por algumas poucas opções específicas da raiz). -## Data and Methods +## Dados e Métodos -When an instance is created, it adds all the properties found in its `data` to [Vue's **reactivity system**](reactivity.html). When the values of those properties change, the view will "react", updating to match the new values. +Quando uma instância Vue é criada, ela adiciona todas as propriedades encontradas no objeto `data` ao **sistema de reatividade** do Vue. Quando os valores de qualquer destas propriedades muda, a camada visual (em inglês, _view_) "reage", atualizando-se para condizer com os novos valores. ```js -// Our data object -const data = { a: 1 } +// Nosso objeto de dados +var data = { a: 1 } -// The object is added to the root instance -const vm = Vue.createApp({ - data() { - return data - } -}).mount('#app') +// O objeto é adicionado à instância Vue +var vm = new Vue({ + data: data +}) -// Getting the property on the instance -// returns the one from the original data +// Acessar a propriedade na instância +// retorna aquilo que está no dado original +// ou seja, é uma referência ao mesmo objeto! vm.a === data.a // => true -// Setting the property on the instance -// also affects the original data +// Atribuir à propriedade na instância +// também afeta o dado original vm.a = 2 data.a // => 2 + +// ... e vice-versa +data.a = 3 +vm.a // => 3 ``` -When this data changes, the view will re-render. It should be noted that properties in `data` are only **reactive** if they existed when the instance was created. That means if you add a new property, like: +Quando este dado for modificado, a camada visual irá "re-renderizar". Deve-se observar que as propriedades em `data` só são **reativas** se elas já existiam quando a instância foi criada. Isso significa que se você adicionar uma nova propriedade, como: ```js vm.b = 'hi' ``` -Then changes to `b` will not trigger any view updates. If you know you'll need a property later, but it starts out empty or non-existent, you'll need to set some initial value. For example: +Então as mudanças em `b` não irão disparar qualquer atualização na interface. Se você sabe que precisará de uma propriedade no futuro, mas ela inicia vazia ou não existente, precisará especificar algum valor inicial. Por exemplo: ```js -data() { - return { - newTodoText: '', - visitCount: 0, - hideCompletedTodos: false, - todos: [], - error: null - } +data: { + newTodoText: '', + visitCount: 0, + hideCompletedTodos: false, + todos: [], + error: null } ``` -The only exception to this being the use of `Object.freeze()`, which prevents existing properties from being changed, which also means the reactivity system can't _track_ changes. +A única exceção é ao usar `Object.freeze()`, que previne propriedades existentes de serem modificadas. Também significa que o sistema de reatividade não pode _rastrear_ mudanças. ```js -const obj = { +var obj = { foo: 'bar' } Object.freeze(obj) -const vm = Vue.createApp({ - data() { - return obj - } -}).mount('#app') +new Vue({ + el: '#app', + data: obj +}) ``` ```html

{{ foo }}

- +
``` -In addition to data properties, instances expose a number of useful instance properties and methods. These are prefixed with `$` to differentiate them from user-defined properties. For example: +Em adição às propriedades de dados, instâncias Vue expõem uma quantidade relevante de propriedades e métodos. Estes são prefixados com `$` para diferenciá-los das propriedades definidas pelo usuário. Por exemplo: ```js -const vm = Vue.createApp({ - data() { - return { - a: 1 - } - } -}).mount('#example') +var data = { a: 1 } +var vm = new Vue({ + el: '#exemplo', + data: data +}) + +vm.$data === data // => true +vm.$el === document.getElementById('exemplo') // => true -vm.$data.a // => 1 +// $watch é um método da instância +vm.$watch('a', function (newValue, oldValue) { + // Esta função será executada quando `vm.a` mudar +}) ``` -In the future, you can consult the [API reference](../api/instance-properties.html) for a full list of instance properties and methods. +No futuro, você pode consultar a [documentação da API](../api/#Propriedades-de-Instancia) para a lista completa de propriedades e métodos da instância. + +## Ciclo de Vida da Instância -## Instance Lifecycle Hooks +
Assista a uma lição em vídeo gratuita na Vue School
-Each instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages. +Cada instância Vue passa por uma série de etapas em sua inicialização - por exemplo, é necessário configurar a observação de dados, compilar o _template_, montar a instância no DOM, e atualizar o DOM quando os dados forem alterados. Ao longo do caminho, também ocorre a invocação de agumas funções chamadas de **gatilhos de ciclo de vida** (em inglês, _lifecycle hooks_), oferecendo a oportunidade de executar lógicas personalizadas em etapas específicas. -For example, the [created](../api/options-lifecycle-hooks.html#created) hook can be used to run code after an instance is created: +Por exemplo, o gatilho [`created`](../api/#created) pode ser utilizado para executar código logo após a instância ser criada: ```js -Vue.createApp({ - data() { - return { - a: 1 - } +new Vue({ + data: { + a: 1 }, - created() { - // `this` points to the vm instance - console.log('a is: ' + this.a) // => "a is: 1" + created: function () { + // `this` aponta para a instância + console.log('a é: ' + this.a) } }) +// => "a é: 1" ``` -There are also other hooks which will be called at different stages of the instance's lifecycle, such as [mounted](../api/options-lifecycle-hooks.html#mounted), [updated](../api/options-lifecycle-hooks.html#updated), and [unmounted](../api/options-lifecycle-hooks.html#unmounted). All lifecycle hooks are called with their `this` context pointing to the current active instance invoking it. +Existem outros gatilhos chamados em diferentes etapas do ciclo de vida da instância, como [`mounted`](../api/#mounted), [`updated`](../api/#updated) e [`destroyed`](../api/#destroyed). Qualquer gatilho de ciclo de vida é executado com seu contexto `this` apontando para a instância Vue que o invocou. -::: tip -Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since an arrow function doesn't have a `this`, `this` will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`. -::: +Não utilize [_arrow functions_](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions) em propriedades de opções ou _callback_, como em `created: () => console.log(this.a)` ou `vm.$watch('a', newValue => this.myMethod())`. Como as _arrow functions_ não possuem um `this`,`this` será tratado como qualquer outra variável e lexicamente pesquisada através de escopos parentais até ser encontrada, frequentemente resultando em erros como `Uncaught TypeError: Cannot read property of undefined` ou `Uncaught TypeError: this.myMethod is not a function`. -## Lifecycle Diagram +## Diagrama do Ciclo de Vida -Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference. +Abaixo está um diagrama para o ciclo de vida da instância. Você não precisa entender completamente tudo o que está acontecendo neste momento, +mas conforme você for aprendendo e construindo mais coisas, este diagrama se tornará uma referência útil. -Instance lifecycle hooks +![Ciclo de Vida da Instância Vue](/images/lifecycle.png) From 1a23f745381f387ea0f59042c2e0ddf28da46d58 Mon Sep 17 00:00:00 2001 From: Matheus Cristian Date: Wed, 16 Sep 2020 19:34:45 -0300 Subject: [PATCH 012/334] Fixes typo --- src/guide/contributing/translations.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/guide/contributing/translations.md b/src/guide/contributing/translations.md index 3c7e9b6511..0da693d124 100644 --- a/src/guide/contributing/translations.md +++ b/src/guide/contributing/translations.md @@ -12,7 +12,7 @@ Digamos que você fale Esperanto e quer saber quais iniciativas de tradução j ### Como colaborar com a versão em português? -Mas se você está aqui, deve ser por falar português! Neste caso, para nos ajudar diretamente, intereja com a equipe em [nosso repositório de tradução](https://github.com/vuejs-br/docs-next). +Mas se você está aqui, deve ser por falar português! Neste caso, para nos ajudar diretamente, interaja com a equipe em [nosso repositório de tradução](https://github.com/vuejs-br/docs-next). ::: tip Problemas pontuais em traduções já realizadas, como erros de grafia pequenos ou frases confusas, podem ser reportados apenas [criando uma _issue_](https://github.com/vuejs-br/docs-next/issues/new). Deixe claro sobre qual página se refere o problema e, preferencialmente, ofereça uma sugestão para a correção desejada. @@ -40,7 +40,7 @@ Para uma documentação padronizada e de qualidade, seguimos alguns princípios - Traduzir os comentários dos códigos-fonte, sejam eles _inline_ `//` ou de múltiplas-linhas `/* */`; - Traduzir textos informativos dos códigos-fonte, por exemplo: `
Nível 1
`; -- Seguir maiúsculas e minúsculas conforme o original em inglês sempre que possível, exceto quando existir claramente uma regra de notaçãoo diferente na língua portuguesa; +- Seguir maiúsculas e minúsculas conforme o original em inglês sempre que possível, exceto quando existir claramente uma regra de notação diferente na língua portuguesa; - Usar itálico em expressões sem tradução (por exemplo, _view layer_), exceto em nomes próprios grafados em maiúsculas (por exemplo, Internet); - Utilizar alguma extensão de ortografia e gramática vinculada ao seu editor de código, para evitar que erros deste tipo sejam submetidos; - Quando for submeter seu trabalho, sempre escreva a descrição do _commit_ em inglês (recomendação do _core team_). @@ -104,11 +104,11 @@ Atualmente, recomenda-se que os termos a seguir sejam mantidos em inglês, inclu **Traduzir mas manter o original** -Em alguns casos, para facilitar a compressão tanta por desenvolvedores menos experiências quanto mais experiências, alguns termos podem ser traduzidos mas com o original em inglês entre parênteses, por exemplo: +Em alguns casos, para facilitar a compreensão, tanto por desenvolvedores menos experientes quanto pelos mais experientes, alguns termos podem ser traduzidos mas com o original em inglês entre parênteses, por exemplo: > A biblioteca principal é focada exclusivamente na camada visual (_view layer_) das aplicações. -Na dúvida, discuta na _issue_ correspondete ao arquivo que estiver trabalhando, para trocar opiniões com os mantenedores. +Na dúvida, discuta na _issue_ correspondente ao arquivo que estiver trabalhando, para trocar opiniões com os mantenedores. ## Como escrever melhor? From 32c68b33699f378ecfd4d1cfd983d7c83591dae4 Mon Sep 17 00:00:00 2001 From: "Arthur A. Bergamaschi" Date: Wed, 16 Sep 2020 20:25:27 -0300 Subject: [PATCH 013/334] docs: add portuguese translation for installation section --- src/guide/contributing/translations.md | 6 +- src/guide/installation.md | 117 +++++++++++++------------ 2 files changed, 64 insertions(+), 59 deletions(-) diff --git a/src/guide/contributing/translations.md b/src/guide/contributing/translations.md index 3c7e9b6511..4ee75c4edf 100644 --- a/src/guide/contributing/translations.md +++ b/src/guide/contributing/translations.md @@ -61,13 +61,14 @@ Alguns termos recorrentes causam dúvidas aos novos colaboradores da tradução. Devem ser traduzidos sempre da mesma maneira (a menos que sua tradução atrapalhe demais o contexto da frase, o que deve ser discutido na _issue_ correspondente): +_ _Bundler_ = Empacotador - _Bundle_ = Pacote - _Debug_ = Depuração - _Handling_ = Manipulação - _Event Listening_ = Escuta de Eventos - _Render Function_ = Função de Renderização - _Computed Properties_ = Dados Computados -- _Single-File Components_ = Componentes Single-File +- _Single File Components_ = Componentes Single File - _Custom Elements_ = Elementos Personalizados - _Performance_ = Desempenho - _Watchers_ = Observadores @@ -76,6 +77,9 @@ Devem ser traduzidos sempre da mesma maneira (a menos que sua tradução atrapal - _Props_ = Propriedades - _Hooks_ = Gatilhos - _Bind_ = Vínculo ou Interligação +_ _Build time_ = Processo de construção +_ _Release notes_ = Notas de Lançamento +_ _Build_ = Distribuição **Nunca traduzimos** diff --git a/src/guide/installation.md b/src/guide/installation.md index c6f5dfbccc..eba4d2b1be 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -1,62 +1,62 @@ -# Installation +# Instalação -## Release Notes +## Notas de lançamento -Latest beta version: ![beta](https://img.shields.io/npm/v/vue/next.svg) +Última versão beta: ![beta](https://img.shields.io/npm/v/vue/next.svg) -Detailed release notes for each version are available on [GitHub](https://github.com/vuejs/vue-next/releases). +Notas de lançamento detalhadas para cada versão estão disponíveis no [GitHub](https://github.com/vuejs/vue-next/releases). ## Vue Devtools -> Currently in Beta +> Atualmente em versão Beta -> Vue Devtools for Vue 3 requires at least `vue@^3.0.0-rc.1` +> Vue Devtools para o Vue 3 requer, no mínimo, `vue@^3.0.0-rc.1` -When using Vue, we recommend also installing the [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface. +Ao utilizar o Vue, recomendamos também instalar instalar a extensão [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) no seu navegador, o que lhe permite inspecionar e realizar _debug_ de suas aplicações Vue através de uma interface mais amigável. -[Get the Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg) +[Adquirir a extensão para Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg) -[Get the Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) +[Adquirir a extensão para Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) -[Get the standalone Electron app](https://github.com/vuejs/vue-devtools/blob/dev/packages/shell-electron/README.md) +[Adquirir a aplicação individual, baseada em Electron](https://github.com/vuejs/vue-devtools/blob/dev/packages/shell-electron/README.md) ## CDN -For prototyping or learning purposes, you can use the latest version with: +Para prototipação ou aprendizagem, você pode utilizar a última versão com: ```html ``` -For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions. +Para produção, recomendamos vinculá-lo a uma versão e uma distribuição específicas, a fim de evitar incompatibilidade de funcionalidades devido a uma nova versão. ## NPM -NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). Vue also provides accompanying tools for authoring [Single File Components](../guide/single-file-component.html). +NPM é o método de instalação que recomendamos ao construir aplicações de larga escala com o Vue. Ele combina perfeitamente com empacotadores de módulos, como o [Webpack](https://webpack.js.org/) ou o [Browserify](http://browserify.org/). Vue também oferece ferramentas que auxiliam na criação de [Componentes Single File](../guide/single-file-component.html). ```bash -# latest stable +# última versão estável $ npm install vue@next ``` ## CLI -Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. See [the Vue CLI docs](https://cli.vuejs.org) for more details. +Vue oferece uma [CLI oficial](https://github.com/vuejs/vue-cli) para projetar, rapidamente, ambiciosas _Single Page Applications_. Este oferece conjuntos prontos de configurações de distribuição para um processo de desenvolvimento _frontend_ moderno. Basta apenas alguns minutos para ter tudo funcionando e sendo executado com _hot-reload_, _lint-on-save_ e distribuições prontas para produção. Confira a [documentação da Vue CLI](https://cli.vuejs.org) para mais detalhes. ::: tip -The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through the guide without any build tools before using the CLI. +A CLI pressupõe que você já possui conhecimento prévio em Node.js e das ferramentas de distribuição associadas. Se Vue ou as ferramentas de distribuição _frontend_ associadas são assuntos novos para você, recomendamos fortemente que você passe por todo o guia antes de utilizar a CLI. ::: -For Vue 3, you should use Vue CLI v4.5 available on `npm` as `@vue/cli@next`. To upgrade, you need to reinstall the latest version of `@vue/cli` globally: +Para o Vue 3, você deve utilizar, no mínimo, a Vue CLI v4.5, disponível no `npm` através do `@vue/cli@next`. Para atualizar sua Vue CLI, você deve reinstalar o pacote `@vue/cli` globalmente, em sua última versão: ```bash yarn global add @vue/cli@next -# OR +# OU npm install -g @vue/cli@next ``` -Then in the Vue projects, run +Logo em seguida, em seus projetos Vue, execute: ```bash vue upgrade --next @@ -64,85 +64,86 @@ vue upgrade --next ## Vite -[Vite](https://github.com/vitejs/vite) is a web development build tool that allows for lighting fast serving of code due its native ES Module import approach. +[Vite](https://github.com/vitejs/vite) é uma ferramenta de distribuição para desenvolvimento _web_ que permite servir código de maneira ultra rápida devido à sua abordagem de importação _ES Module_ nativa. -Vue projects can quickly be set up with Vite by running the following commands in your terminal. +Projetos Vue podem ser rapidamente inicializados com Vite ao executar os seguintes comandos no seu _terminal_: -With NPM: +Com NPM: ```bash -$ npm init vite-app -$ cd +$ npm init vite-app +$ cd $ npm install $ npm run dev ``` -Or with Yarn: +Ou com Yarn: ```bash -$ yarn create vite-app -$ cd +$ yarn create vite-app +$ cd $ yarn $ yarn dev ``` -## Explanation of Different Builds +## Esclarecimento sobre as diferentes distribuições -In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.1/dist/) you will find many different builds of Vue.js. Here is an overview of which `dist` file should be used depending on the use-case. +No [diretório `dist/` do pacote NPM](https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.1/dist/), você encontrará diversas distribuições do Vue.js. A seguir, temos uma visão geral de qual arquivo do `dist` você deve utilizar, dependendo do seu caso de uso: -### From CDN or without a Bundler +### Utilizar a partir de uma CDN ou sem um empacotador #### `vue(.runtime).global(.prod).js`: -- For direct use via ` ``` -Para produção, recomendamos vinculá-lo a uma versão e uma distribuição específicas, a fim de evitar incompatibilidade de funcionalidades devido a uma nova versão. +Para produção, recomendamos vinculá-lo a uma versão e uma distribuição _(build)_ específicas, a fim de evitar incompatibilidade de funcionalidades devido a uma nova versão. ## NPM -NPM é o método de instalação que recomendamos ao construir aplicações de larga escala com o Vue. Ele combina perfeitamente com empacotadores de módulos, como o [Webpack](https://webpack.js.org/) ou o [Browserify](http://browserify.org/). Vue também oferece ferramentas que auxiliam na criação de [Componentes Single File](../guide/single-file-component.html). +NPM é o método de instalação que recomendamos ao construir aplicações de larga escala com o Vue. Ele combina perfeitamente com empacotadores de módulos _(module bundlers)_, como o [Webpack](https://webpack.js.org/) ou o [Browserify](http://browserify.org/). Vue também oferece ferramentas que auxiliam na criação de [Componentes Single File](../guide/single-file-component.html). ```bash # última versão estável @@ -42,10 +42,10 @@ $ npm install vue@next ## CLI -Vue oferece uma [CLI oficial](https://github.com/vuejs/vue-cli) para projetar, rapidamente, ambiciosas _Single Page Applications_. Este oferece conjuntos prontos de configurações de distribuição para um processo de desenvolvimento _frontend_ moderno. Basta apenas alguns minutos para ter tudo funcionando e sendo executado com _hot-reload_, _lint-on-save_ e distribuições prontas para produção. Confira a [documentação da Vue CLI](https://cli.vuejs.org) para mais detalhes. +Vue oferece uma [CLI oficial](https://github.com/vuejs/vue-cli) para projetar, rapidamente, ambiciosas _Single Page Applications_. Esta oferece conjuntos prontos de configurações de distribuição para um processo de desenvolvimento _frontend_ moderno. Basta apenas alguns minutos para ter tudo funcionando e sendo executado com _hot-reload_, _lint-on-save_ e distribuições _(builds)_ prontas para produção. Confira a [documentação da Vue CLI](https://cli.vuejs.org) para mais detalhes. ::: tip -A CLI pressupõe que você já possui conhecimento prévio em Node.js e das ferramentas de distribuição associadas. Se Vue ou as ferramentas de distribuição _frontend_ associadas são assuntos novos para você, recomendamos fortemente que você passe por todo o guia antes de utilizar a CLI. +A CLI pressupõe que você já possui conhecimento prévio em Node.js e das ferramentas de distribuição _(build tools)_ associadas. Se Vue ou as ferramentas de distribuição _frontend_ associadas são assuntos novos para você, recomendamos fortemente que você passe por todo o guia antes de utilizar a CLI. ::: Para o Vue 3, você deve utilizar, no mínimo, a Vue CLI v4.5, disponível no `npm` através do `@vue/cli@next`. Para atualizar sua Vue CLI, você deve reinstalar o pacote `@vue/cli` globalmente, em sua última versão: @@ -64,7 +64,7 @@ vue upgrade --next ## Vite -[Vite](https://github.com/vitejs/vite) é uma ferramenta de distribuição para desenvolvimento _web_ que permite servir código de maneira ultra rápida devido à sua abordagem de importação _ES Module_ nativa. +[Vite](https://github.com/vitejs/vite) é uma ferramenta de distribuição _(build tool)_ para desenvolvimento _web_ que permite servir código de maneira ultra rápida devido à sua abordagem de importação _ES Module_ nativa. Projetos Vue podem ser rapidamente inicializados com Vite ao executar os seguintes comandos no seu _terminal_: @@ -86,56 +86,55 @@ $ yarn $ yarn dev ``` -## Esclarecimento sobre as diferentes distribuições +## Esclarecimento sobre as diferentes Distribuições -No [diretório `dist/` do pacote NPM](https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.1/dist/), você encontrará diversas distribuições do Vue.js. A seguir, temos uma visão geral de qual arquivo do `dist` você deve utilizar, dependendo do seu caso de uso: +No [diretório `dist/` do pacote NPM](https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.1/dist/), você encontrará diversas distribuições _(builds)_ do Vue.js. A seguir, temos uma visão geral de qual arquivo do `dist` você deve utilizar, dependendo do seu caso de uso: -### Utilizar a partir de uma CDN ou sem um empacotador +### Utilizando a partir de uma CDN ou sem um Empacotador #### `vue(.runtime).global(.prod).js`: -- Para uso direto no navegador, através de ` -Here we have declared a computed property `publishedBooksMessage`. +Aqui declaramos um dado computado _(computed property)_ chamado `publishedBooksMessage`. -Try to change the value of `books` array in the application `data` and you will see how `publishedBooksMessage` is changing accordingly. +Tente remover os valores do vetor _(array)_ `books`, encontrado dentro de `data`, e você visualizará o valor de `publishedBooksMessage` sendo atualizado. -You can data-bind to computed properties in templates just like a normal property. Vue is aware that `vm.publishedBooksMessage` depends on `vm.author.books`, so it will update any bindings that depend on `vm.publishedBooksMessage` when `vm.author.books` changes. And the best part is that we've created this dependency relationship declaratively: the computed getter function has no side effects, which makes it easier to test and understand. +É possível vincular dados computados em _templates_ como qualquer outro tipo de dado. Vue tem ciência de que `vm.publishedBooksMessage` depende de `vm.author.books` para prover seu valor, portanto, ele irá atualizar qualquer vínculo de `vm.publishedBooksMessage` sempre que `vm.author.books` sofrer alterações. A melhor parte disto é que criamos tal relação de dependência de forma declarativa: a função _getter_ computada não possui quaisquer efeitos colaterais, tornando-se mais fácil de testar e entender. -### Computed Caching vs Methods +### _Caching_ de `computed` vs. Métodos -You may have noticed we can achieve the same result by invoking a method in the expression: +Você pode ter notado que é possível obtermos o mesmo resultado ao chamarmos um método, como: ```html

{{ calculateBooksMessage() }}

``` ```js -// in component +// no componente methods: { calculateBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' @@ -99,9 +101,9 @@ methods: { } ``` -Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that **computed properties are cached based on their reactive dependencies.** A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as `author.books` has not changed, multiple access to the `publishedBooksMessage` computed property will immediately return the previously computed result without having to run the function again. +Ao invés de utilizar dados computados, podemos obter os mesmos resultados ao simplesmente utilizar métodos. No entanto, a diferença é que **dados computados possuem _cache_ de acordo com suas dependências reativas**. Um dado computado, portanto, apenas será atualizado quando alguma de suas dependências sofrer alteração. Isto significa, por exemplo, que enquanto `author.books` não for alterado, o dado computado `publishedBooksMessage` irá retornar, imediatamente, o último resultado calculado, independente da quantidade de acessos que obter, sem ter de executar a função novamente. -This also means the following computed property will never update, because `Date.now()` is not a reactive dependency: +Isto também significa que o dado computado a seguir nunca será atualizado, já que `Date.now()` não é reconhecido como uma dependência reativa: ```js computed: { @@ -111,13 +113,13 @@ computed: { } ``` -In comparison, a method invocation will **always** run the function whenever a re-render happens. +Por outro lado, invocar um método **sempre** irá executar sua função quando ocorrer uma nova renderização. -Why do we need caching? Imagine we have an expensive computed property `list`, which requires looping through a huge array and doing a lot of computations. Then we may have other computed properties that in turn depend on `list`. Without caching, we would be executing `list`’s getter many more times than necessary! In cases where you do not want caching, use a `method` instead. +Por que precisamos de _caching_? Imagine que temos um dado computado `list` extremamente custoso, que requer iterar por um extenso vetor _(array)_ e realizar cálculos com seus valores. Além disto, há outros dados computados que dependem de `list`. Sem realizarmos o _cache_, `list` seria executado muito mais vezes do que o necessário! Se você realmente não desejar realizar o _cache_ do valor calculado, utilize um método. -### Computed Setter +### Atribuição em Dados Computados -Computed properties are by default getter-only, but you can also provide a setter when you need it: +Dados computados _(computed properties)_ são, por padrão, _getter-only_ — ou seja, somente retornam valor. Entretanto, também é possível fornecer um _setter_ _(Computed Setter)_, se necessário: ```js // ... @@ -138,18 +140,18 @@ computed: { // ... ``` -Now when you run `vm.fullName = 'John Doe'`, the setter will be invoked and `vm.firstName` and `vm.lastName` will be updated accordingly. +Portanto, se executarmos `vm.fullName = 'John Doe'`, o _setter_ será executado e `vm.firstName` e `vm.lastName` serão atualizados, respectivamente. -## Watchers +## Observadores -While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That's why Vue provides a more generic way to react to data changes through the `watch` option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. +Enquanto dados computados são mais adequados na maioria dos casos, há certos momentos em que um observador _(watcher)_ personalizado se faz necessário. É por isto que o Vue fornece uma maneira mais genérica de reagir à alteração de dados, `watch`, que se faz útil a partir do momento em que performamos operações assíncronas ou complexas quando certo dado sofre mudanças. -For example: +Por exemplo: ```html

- Ask a yes/no question: + Faça uma pergunta de sim ou não:

{{ answer }}

@@ -157,21 +159,22 @@ For example: ``` ```html - - - - + + + + + ``` -Result: +Resultado: -

- See the Pen - Watch basic example by Vue (@Vue) +

+ See the Pen + Exemplo básico de observadores by Vue (@Vue) on CodePen.

-In this case, using the `watch` option allows us to perform an asynchronous operation (accessing an API) and sets a condition for performing this operation. None of that would be possible with a computed property. +Neste caso, ao usarmos `watch`, podemos executar uma operação assíncrona — como adquirir informações de uma _API_ — e, até mesmo, condições para executá-la. Isto não seria possível através da utilização de dados computados _(computed properties)_. -In addition to the `watch` option, you can also use the imperative [vm.\$watch API](../api/instance-methods.html#watch). +Além da opção `watch`, também é possível utilizar, de maneira imperativa, a [API vm.\$watch](../api/instance-methods.html#watch). -### Computed vs Watched Property +### Dados Computados vs Observadores -Vue does provide a more generic way to observe and react to data changes on a current active instance: **watch properties**. When you have some data that needs to change based on some other data, it is tempting to overuse `watch` - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative `watch` callback. Consider this example: +Devido ao Vue oferecer **observadores** _(watchers)_ como uma maneira mais genérica de observar e reagir à mudanças em dados de uma instância, é tentador utilizar, excessivamente, o `watch` — especialmente se você possui conhecimentos prévios em AngularJS, por exemplo. No entanto, às vezes, é melhor utilizar um dado computado ao invés de `watch`. Considere o seguinte exemplo: ```html
{{ fullName }}
@@ -236,7 +241,7 @@ const vm = Vue.createApp({ }).mount('#demo') ``` -The above code is imperative and repetitive. Compare it with a computed property version: +O código acima é imperativo e repetitivo. A seguir, uma versão do código utilizando dados computados, a fim de compará-los: ```js const vm = Vue.createApp({ @@ -254,4 +259,4 @@ const vm = Vue.createApp({ }).mount('#demo') ``` -Much better, isn't it? +Muito melhor, não é? From cd1e4f99971a2f55628ba75b38c3df3583e1d8c4 Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Fri, 18 Sep 2020 17:05:36 -0300 Subject: [PATCH 021/334] Update instance.md Some modifications were made. --- src/guide/instance.md | 133 +++++++++++++++++++++--------------------- 1 file changed, 65 insertions(+), 68 deletions(-) diff --git a/src/guide/instance.md b/src/guide/instance.md index e19450503c..4d0ac26b7f 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -1,64 +1,61 @@ ---- -title: A Instância Vue -type: guide -order: 3 ---- +# A instância da Aplicação -## Criando a Instância Vue +## Criando uma instância -Toda aplicação Vue é iniciada com a criação de uma nova **instância Vue** com a função `Vue`: +Toda aplicação Vue começa com a criação de uma nova **instância Vue** com a função `Vue`: ```js -var vm = new Vue({ - // opções -}) +Vue.createApp(/* opções */) +``` + +Após a instância ser criada, podemos _montá-la_, passando um contêiner para o método `mount`. Por exemplo, se quisermos montar um aplicativo Vue em `
`, devemos passar `#app`: + +```js +Vue.createApp(/* options */).mount('#app') ``` Embora não seja estritamente associado com o [padrão MVVM](https://en.wikipedia.org/wiki/Model_View_ViewModel), o _design_ do Vue foi parcialmente inspirado por ele. Como convenção, muitas vezes usamos a variável `vm` (abreviação de _ViewModel_) para se referir à instância Vue. -Quando você cria uma instância Vue, é necessário passar um **objeto de opções**. A maior parte deste guia descreve como você pode utilizar estas opções para criar os comportamentos desejados. Para referência, você também pode navegar pela lista completa de opções na [documentação da API](../api/#Opcoes-Dados). +Quando você cria uma instância Vue, é necessário passar um **objeto de opções**. A maior parte deste guia descreve como você pode utilizar estas opções para criar os comportamentos desejados. Para referência, você também pode navegar pela lista completa de opções na [documentação da API](../api/options-data.html). -Uma aplicação Vue consiste em uma **instância Vue raiz** criada com `new Vue`, opcionalmente organizada em uma árvore de componentes reutilizáveis aninhados. Por exemplo, um aplicativo de tarefas a realizar (do tipo _todo list_) poderia ter uma árvore de componentes como esta: +Uma aplicação Vue consiste em uma **instância Vue raiz** criada com `createApp`, opcionalmente organizada em uma árvore de componentes reutilizáveis aninhados. Por exemplo, um aplicativo de tarefas a realizar (do tipo _todo list_) poderia ter uma árvore de componentes como esta: ``` -Instância Raiz +Root Instance └─ TodoList ├─ TodoItem - │ ├─ TodoButtonDelete - │ └─ TodoButtonEdit + │ ├─ DeleteTodoButton + │ └─ EditTodoButton └─ TodoListFooter - ├─ TodosButtonClear + ├─ ClearTodosButton └─ TodoListStatistics ``` -Falaremos sobre o [sistema de componentes](components.html) em detalhes futuramente. Por enquanto, saiba apenas que todos os componentes Vue também são instâncias, e aceitam o mesmo esquema de opções (exceto por algumas poucas opções específicas da raiz). +Falaremos sobre [o sistema de componentes](component-basics.html) em detalhes futuramente. Por enquanto, saiba apenas que todos os componentes Vue também são instâncias, e assim aceitam o mesmo objeto de opções. ## Dados e Métodos -Quando uma instância Vue é criada, ela adiciona todas as propriedades encontradas no objeto `data` ao **sistema de reatividade** do Vue. Quando os valores de qualquer destas propriedades muda, a camada visual (em inglês, _view_) "reage", atualizando-se para condizer com os novos valores. +Quando uma instância é criada, ela adiciona todas as propriedades encontradas no objeto `data` ao [**sistema de reatividade** do Vue](reactivity.html). Quando os valores dessas propriedades mudam, a camada visual (em inglês, _view_) "reage", atualizando-se para corresponder aos novos valores. ```js // Nosso objeto de dados -var data = { a: 1 } +const data = { a: 1 } -// O objeto é adicionado à instância Vue -var vm = new Vue({ - data: data -}) +// O objeto é adicionado à raiz da instância +const vm = Vue.createApp({ + data() { + return data + } +}).mount('#app') // Acessar a propriedade na instância // retorna aquilo que está no dado original -// ou seja, é uma referência ao mesmo objeto! vm.a === data.a // => true // Atribuir à propriedade na instância // também afeta o dado original vm.a = 2 data.a // => 2 - -// ... e vice-versa -data.a = 3 -vm.a // => 3 ``` Quando este dado for modificado, a camada visual irá "re-renderizar". Deve-se observar que as propriedades em `data` só são **reativas** se elas já existiam quando a instância foi criada. Isso significa que se você adicionar uma nova propriedade, como: @@ -67,89 +64,89 @@ Quando este dado for modificado, a camada visual irá "re-renderizar". Deve-se o vm.b = 'hi' ``` -Então as mudanças em `b` não irão disparar qualquer atualização na interface. Se você sabe que precisará de uma propriedade no futuro, mas ela inicia vazia ou não existente, precisará especificar algum valor inicial. Por exemplo: +Então as mudanças em `b` não irão disparar qualquer atualização na interface. Se você sabe que precisará de uma propriedade no futuro, mas ela inicia vazia ou não existente, você precisará atribuir algum valor inicial. Por exemplo: ```js -data: { - newTodoText: '', - visitCount: 0, - hideCompletedTodos: false, - todos: [], - error: null +data() { + return { + newTodoText: '', + visitCount: 0, + hideCompletedTodos: false, + todos: [], + error: null + } } ``` -A única exceção é ao usar `Object.freeze()`, que previne propriedades existentes de serem modificadas. Também significa que o sistema de reatividade não pode _rastrear_ mudanças. +A única exceção é quanto ao uso do `Object.freeze()`, que previne propriedades existentes de serem modificadas, o que também significa que o sistema de reatividade não pode _rastrear_ mudanças. ```js -var obj = { +const obj = { foo: 'bar' } Object.freeze(obj) -new Vue({ - el: '#app', - data: obj -}) +const vm = Vue.createApp({ + data() { + return obj + } +}).mount('#app') ``` ```html

{{ foo }}

- +
``` -Em adição às propriedades de dados, instâncias Vue expõem uma quantidade relevante de propriedades e métodos. Estes são prefixados com `$` para diferenciá-los das propriedades definidas pelo usuário. Por exemplo: +Em adição às propriedades de dados, instâncias expõem uma quantidade relevante de propriedades e métodos. Estes são prefixados com `$` para diferenciá-los das propriedades definidas pelo usuário. Por exemplo: ```js -var data = { a: 1 } -var vm = new Vue({ - el: '#exemplo', - data: data -}) - -vm.$data === data // => true -vm.$el === document.getElementById('exemplo') // => true +const vm = Vue.createApp({ + data() { + return { + a: 1 + } + } +}).mount('#example') -// $watch é um método da instância -vm.$watch('a', function (newValue, oldValue) { - // Esta função será executada quando `vm.a` mudar -}) +vm.$data.a // => 1 ``` No futuro, você pode consultar a [documentação da API](../api/#Propriedades-de-Instancia) para a lista completa de propriedades e métodos da instância. ## Ciclo de Vida da Instância -
Assista a uma lição em vídeo gratuita na Vue School
- -Cada instância Vue passa por uma série de etapas em sua inicialização - por exemplo, é necessário configurar a observação de dados, compilar o _template_, montar a instância no DOM, e atualizar o DOM quando os dados forem alterados. Ao longo do caminho, também ocorre a invocação de agumas funções chamadas de **gatilhos de ciclo de vida** (em inglês, _lifecycle hooks_), oferecendo a oportunidade de executar lógicas personalizadas em etapas específicas. +Cada instância Vue passa por uma série de etapas em sua inicialização - por exemplo, é necessário configurar a observação de dados, compilar o _template_, montar a instância no DOM, e atualizar o DOM quando os dados forem alterados. Ao longo do caminho, também ocorre a invocação de algumas funções chamadas de **gatilhos de ciclo de vida** (em inglês, _lifecycle hooks_), oferecendo a oportunidade de executar lógicas personalizadas em etapas específicas. Por exemplo, o gatilho [`created`](../api/#created) pode ser utilizado para executar código logo após a instância ser criada: ```js -new Vue({ - data: { - a: 1 +Vue.createApp({ + data() { + return { + a: 1 + } }, - created: function () { + created() { // `this` aponta para a instância - console.log('a é: ' + this.a) + console.log('a é: ' + this.a) // => "a é: 1" } }) -// => "a é: 1" ``` -Existem outros gatilhos chamados em diferentes etapas do ciclo de vida da instância, como [`mounted`](../api/#mounted), [`updated`](../api/#updated) e [`destroyed`](../api/#destroyed). Qualquer gatilho de ciclo de vida é executado com seu contexto `this` apontando para a instância Vue que o invocou. +There are also other hooks which will be called at different stages of the instance's lifecycle, such as [mounted](../api/options-lifecycle-hooks.html#mounted), [updated](../api/options-lifecycle-hooks.html#updated), and [unmounted](../api/options-lifecycle-hooks.html#unmounted). All lifecycle hooks are called with their `this` context pointing to the current active instance invoking it. +Existem também outros gatilhos que serão chamados em diferentes etapas do ciclo de vida da instância, como [`mounted`](../api/options-lifecycle-hooks.html#mounted), [`updated`](../api/options-lifecycle-hooks.html#updated), e [`unmounted`](../api/options-lifecycle-hooks.html#unmounted). Todos os gatilhos de ciclo de vida são executados com seu contexto `this` apontando para a atual instância ativa que o invoca. +::: tip Não utilize [_arrow functions_](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions) em propriedades de opções ou _callback_, como em `created: () => console.log(this.a)` ou `vm.$watch('a', newValue => this.myMethod())`. Como as _arrow functions_ não possuem um `this`,`this` será tratado como qualquer outra variável e lexicamente pesquisada através de escopos parentais até ser encontrada, frequentemente resultando em erros como `Uncaught TypeError: Cannot read property of undefined` ou `Uncaught TypeError: this.myMethod is not a function`. +::: ## Diagrama do Ciclo de Vida -Abaixo está um diagrama para o ciclo de vida da instância. Você não precisa entender completamente tudo o que está acontecendo neste momento, -mas conforme você for aprendendo e construindo mais coisas, este diagrama se tornará uma referência útil. +Abaixo está um diagrama para o ciclo de vida da instância. Você não precisa entender completamente tudo o que está acontecendo neste momento, mas conforme você for aprendendo e construindo mais coisas, este diagrama se tornará uma referência útil. -![Ciclo de Vida da Instância Vue](/images/lifecycle.png) +Diagrama do ciclo de vida From 2c21ccf2b60c318b9f77a3159a33a2b2249d07c2 Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Fri, 18 Sep 2020 18:38:45 -0300 Subject: [PATCH 022/334] Update instance.md Removed a paragraph that remained untranslated --- src/guide/instance.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/guide/instance.md b/src/guide/instance.md index 4d0ac26b7f..4cb2d00a11 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -138,7 +138,6 @@ Vue.createApp({ }) ``` -There are also other hooks which will be called at different stages of the instance's lifecycle, such as [mounted](../api/options-lifecycle-hooks.html#mounted), [updated](../api/options-lifecycle-hooks.html#updated), and [unmounted](../api/options-lifecycle-hooks.html#unmounted). All lifecycle hooks are called with their `this` context pointing to the current active instance invoking it. Existem também outros gatilhos que serão chamados em diferentes etapas do ciclo de vida da instância, como [`mounted`](../api/options-lifecycle-hooks.html#mounted), [`updated`](../api/options-lifecycle-hooks.html#updated), e [`unmounted`](../api/options-lifecycle-hooks.html#unmounted). Todos os gatilhos de ciclo de vida são executados com seu contexto `this` apontando para a atual instância ativa que o invoca. ::: tip From dbcf975ae5302bca8ca79c281a6dff6e74c9eb04 Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Fri, 18 Sep 2020 19:26:26 -0300 Subject: [PATCH 023/334] Update instance.md Link translation changed --- src/guide/instance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/instance.md b/src/guide/instance.md index 4cb2d00a11..43cd33b7da 100644 --- a/src/guide/instance.md +++ b/src/guide/instance.md @@ -116,7 +116,7 @@ const vm = Vue.createApp({ vm.$data.a // => 1 ``` -No futuro, você pode consultar a [documentação da API](../api/#Propriedades-de-Instancia) para a lista completa de propriedades e métodos da instância. +No futuro, você pode consultar a [documentação da API](../api/instance-properties.html) para a lista completa de propriedades e métodos da instância. ## Ciclo de Vida da Instância From fb526b14e6d7b54b612c44ab5a444ffb488db1c0 Mon Sep 17 00:00:00 2001 From: dumedeiros Date: Sat, 19 Sep 2020 15:17:24 -0300 Subject: [PATCH 024/334] docs: add portuguese translation to conditional section --- src/guide/conditional.md | 56 ++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/guide/conditional.md b/src/guide/conditional.md index 46dd36c805..71c379d4ba 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -1,50 +1,50 @@ -# Conditional Rendering +# Renderização Condicional ## `v-if` -The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value. +A diretiva `v-if` é usada para renderizar condicionalmente um bloco. O bloco só será renderizado se a expressão da diretiva retornar um valor verdadeiro. ```html -

Vue is awesome!

+

Vue é incrível!

``` -It is also possible to add an "else block" with `v-else`: +Também é possível adicionar um "bloco senão" usando `v-else`: ```html -

Vue is awesome!

-

Oh no 😢

+

Vue é incrível!

+

Oh não 😢

``` -### Conditional Groups with `v-if` on `