├── .editorconfig ├── .github ├── pull_request_template.md └── workflows │ └── pr.yaml ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── assets ├── diagrams.sketch ├── lifecycle-diagram.svg ├── scoped-slot-diagram.svg ├── slot-render-diagram.svg └── transitions-diagram.ai.zip ├── netlify.toml ├── package.json ├── scripts └── tag-alert-blocks.js ├── src ├── .vuepress │ ├── components │ │ ├── AppBanner.vue │ │ ├── FirstExample.vue │ │ ├── MigrationBadges.vue │ │ ├── VideoLesson.vue │ │ ├── common │ │ │ ├── codepen-snippet.vue │ │ │ └── vuemastery-video-modal.vue │ │ ├── community │ │ │ ├── partners │ │ │ │ ├── index.vue │ │ │ │ ├── partner-item.vue │ │ │ │ └── partners.js │ │ │ ├── team │ │ │ │ ├── emeriti.js │ │ │ │ ├── get-position-button.vue │ │ │ │ ├── index.vue │ │ │ │ ├── members.js │ │ │ │ ├── partners.js │ │ │ │ ├── utils.js │ │ │ │ ├── vuer-language.vue │ │ │ │ └── vuer-profile.vue │ │ │ └── themes │ │ │ │ ├── index.vue │ │ │ │ ├── theme-data.js │ │ │ │ ├── theme-item.vue │ │ │ │ └── theme-provider.vue │ │ ├── guide │ │ │ └── contributing │ │ │ │ ├── translations-data.js │ │ │ │ └── translations.vue │ │ ├── search │ │ │ └── index.vue │ │ └── support │ │ │ ├── Coins.vue │ │ │ ├── OpenCollectiveGroup.vue │ │ │ ├── SponsorGroup.vue │ │ │ └── SponsorImageLink.vue │ ├── config.js │ ├── markdown │ │ └── highlight.js │ ├── public │ │ ├── images │ │ │ ├── AccessibilityChromeDeveloperTools.png │ │ │ ├── AccessibleARIAdescribedby.png │ │ │ ├── AccessibleARIAlabelDevTools.png │ │ │ ├── AccessibleARIAlabelledbyDevTools.png │ │ │ ├── AccessibleLabelChromeDevTools.png │ │ │ ├── breakpoint_hit.png │ │ │ ├── breakpoint_set.png │ │ │ ├── coin-bch.png │ │ │ ├── coin-btc.png │ │ │ ├── coin-eth.png │ │ │ ├── coin-ltc.png │ │ │ ├── components.png │ │ │ ├── components_provide.png │ │ │ ├── config_add.png │ │ │ ├── css-vs-js-ease.svg │ │ │ ├── devtools-timetravel.gif │ │ │ ├── dom-tree.png │ │ │ ├── editable-svg-icons-sizes.png │ │ │ ├── editable-svg-icons.jpg │ │ │ ├── icons │ │ │ │ ├── android-icon-144x144.png │ │ │ │ ├── android-icon-192x192.png │ │ │ │ ├── android-icon-36x36.png │ │ │ │ ├── android-icon-48x48.png │ │ │ │ ├── android-icon-72x72.png │ │ │ │ ├── android-icon-96x96.png │ │ │ │ ├── apple-icon-114x114.png │ │ │ │ ├── apple-icon-120x120.png │ │ │ │ ├── apple-icon-144x144.png │ │ │ │ ├── apple-icon-152x152.png │ │ │ │ ├── apple-icon-180x180.png │ │ │ │ ├── apple-icon-57x57.png │ │ │ │ ├── apple-icon-60x60.png │ │ │ │ ├── apple-icon-72x72.png │ │ │ │ ├── apple-icon-76x76.png │ │ │ │ ├── apple-icon-precomposed.png │ │ │ │ ├── apple-icon.png │ │ │ │ ├── bacancy_technology.png │ │ │ │ ├── bulb.svg │ │ │ │ ├── danger.svg │ │ │ │ ├── favicon-16x16.png │ │ │ │ ├── favicon-32x32.png │ │ │ │ ├── favicon-96x96.png │ │ │ │ ├── favicon.ico │ │ │ │ ├── info.svg │ │ │ │ ├── ms-icon-144x144.png │ │ │ │ ├── ms-icon-150x150.png │ │ │ │ ├── ms-icon-310x310.png │ │ │ │ ├── ms-icon-70x70.png │ │ │ │ └── stop.svg │ │ │ ├── lifecycle.svg │ │ │ ├── options-api.png │ │ │ ├── oxford-comma.jpg │ │ │ ├── partners │ │ │ │ ├── monterail.png │ │ │ │ └── vehikl.png │ │ │ ├── paypal.png │ │ │ ├── reactivity-spreadsheet.mp4 │ │ │ ├── scoped-slot.png │ │ │ ├── sfc-with-preprocessors.png │ │ │ ├── sfc.png │ │ │ ├── slot.png │ │ │ ├── sponsors │ │ │ │ ├── bacancy_technology.png │ │ │ │ ├── bestvpn_co.png │ │ │ │ ├── dcloud.gif │ │ │ │ ├── devexpress.png │ │ │ │ ├── fastcoding_inc.svg │ │ │ │ ├── firestick_tricks.png │ │ │ │ ├── flatlogic_templates.svg │ │ │ │ ├── foo.png │ │ │ │ ├── frontendlove.png │ │ │ │ ├── hbuilder.png │ │ │ │ ├── html_burger.png │ │ │ │ ├── inkoop.png │ │ │ │ ├── intygrate.png │ │ │ │ ├── ionic.png │ │ │ │ ├── isolutions_uk_limited.png │ │ │ │ ├── laravel.png │ │ │ │ ├── moovweb.png │ │ │ │ ├── neds.png │ │ │ │ ├── onsen_ui.png │ │ │ │ ├── passionate_people.png │ │ │ │ ├── retool.png │ │ │ │ ├── roadster.png │ │ │ │ ├── shopware_ag.png │ │ │ │ ├── storyblok.svg │ │ │ │ ├── tidelift.png │ │ │ │ ├── usave.png │ │ │ │ ├── vehikl.png │ │ │ │ ├── vpnranks.png │ │ │ │ ├── vuejobs.png │ │ │ │ ├── vuemastery.png │ │ │ │ ├── vueschool.png │ │ │ │ └── y8.png │ │ │ ├── state.png │ │ │ ├── transition.png │ │ │ ├── transitions.svg │ │ │ └── v-bind-instead-of-sync.png │ │ ├── logo.png │ │ └── manifest.json │ ├── styles │ │ └── index.styl │ └── theme │ │ ├── LICENSE │ │ ├── README.md │ │ ├── components │ │ ├── AlgoliaSearchBox.vue │ │ ├── BuySellAds.vue │ │ ├── CarbonAds.vue │ │ ├── DropdownLink.vue │ │ ├── DropdownTransition.vue │ │ ├── Home.vue │ │ ├── NavLink.vue │ │ ├── NavLinks.vue │ │ ├── Navbar.vue │ │ ├── Newsletter.vue │ │ ├── Page.vue │ │ ├── PageEdit.vue │ │ ├── PageNav.vue │ │ ├── Sidebar.vue │ │ ├── SidebarButton.vue │ │ ├── SidebarGroup.vue │ │ ├── SidebarLink.vue │ │ ├── SidebarLinks.vue │ │ ├── sponsors │ │ │ ├── OpenCollectiveSponsors.vue │ │ │ ├── PatreonSponsors.vue │ │ │ ├── SpecialSponsorBlock.vue │ │ │ ├── SpecialSponsors.vue │ │ │ └── SponsorsLayout.vue │ │ └── ui │ │ │ ├── HomeActionLink.vue │ │ │ ├── RoundedButton.vue │ │ │ └── SocialIcon.vue │ │ ├── data │ │ └── patreon-sponsors.js │ │ ├── global-components │ │ ├── ActionLink.vue │ │ ├── Badge.vue │ │ └── VideoBanner.vue │ │ ├── index.js │ │ ├── layouts │ │ ├── 404.vue │ │ └── Layout.vue │ │ ├── noopModule.js │ │ ├── package.json │ │ ├── styles │ │ ├── _settings.scss │ │ ├── arrow.styl │ │ ├── code.styl │ │ ├── config.styl │ │ ├── custom-blocks.styl │ │ ├── index.styl │ │ ├── mixins.scss │ │ ├── mobile.styl │ │ ├── toc.styl │ │ └── wrapper.styl │ │ └── util │ │ └── index.js ├── README.md ├── api │ ├── application-api.md │ ├── application-config.md │ ├── basic-reactivity.md │ ├── built-in-components.md │ ├── composition-api.md │ ├── computed-watch-api.md │ ├── directives.md │ ├── effect-scope.md │ ├── global-api.md │ ├── index.md │ ├── instance-methods.md │ ├── instance-properties.md │ ├── options-api.md │ ├── options-assets.md │ ├── options-composition.md │ ├── options-data.md │ ├── options-dom.md │ ├── options-lifecycle-hooks.md │ ├── options-misc.md │ ├── reactivity-api.md │ ├── refs-api.md │ ├── sfc-script-setup.md │ ├── sfc-spec.md │ ├── sfc-style.md │ ├── sfc-tooling.md │ └── special-attributes.md ├── coc │ └── index.md ├── community │ ├── join.md │ ├── partners.md │ ├── team.md │ └── themes.md ├── cookbook │ ├── automatic-global-registration-of-base-components.md │ ├── debugging-in-vscode.md │ ├── editable-svg-icons.md │ └── index.md ├── examples │ ├── commits.md │ ├── dynamic-components │ │ ├── index.html │ │ ├── package.json │ │ ├── sandbox.config.json │ │ └── style.css │ ├── elastic-header.md │ ├── grid-component.md │ ├── markdown.md │ ├── modal.md │ ├── select2.md │ ├── svg.md │ ├── todomvc.md │ └── tree-view.md ├── guide │ ├── a11y-basics.md │ ├── a11y-resources.md │ ├── a11y-semantics.md │ ├── a11y-standards.md │ ├── change-detection.md │ ├── class-and-style.md │ ├── component-attrs.md │ ├── component-basics.md │ ├── component-custom-events.md │ ├── component-dynamic-async.md │ ├── component-edge-cases.md │ ├── component-props.md │ ├── component-provide-inject.md │ ├── component-registration.md │ ├── component-slots.md │ ├── component-template-refs.md │ ├── composition-api-introduction.md │ ├── composition-api-lifecycle-hooks.md │ ├── composition-api-provide-inject.md │ ├── composition-api-setup.md │ ├── composition-api-template-refs.md │ ├── computed.md │ ├── conditional.md │ ├── contributing │ │ ├── doc-style-guide.md │ │ ├── translations.md │ │ └── writing-guide.md │ ├── custom-directive.md │ ├── data-methods.md │ ├── events.md │ ├── forms.md │ ├── installation.md │ ├── instance.md │ ├── introduction.md │ ├── list.md │ ├── migration │ │ ├── array-refs.md │ │ ├── async-components.md │ │ ├── attribute-coercion.md │ │ ├── attrs-includes-class-style.md │ │ ├── children.md │ │ ├── custom-directives.md │ │ ├── custom-elements-interop.md │ │ ├── data-option.md │ │ ├── emits-option.md │ │ ├── events-api.md │ │ ├── filters.md │ │ ├── fragments.md │ │ ├── functional-components.md │ │ ├── global-api-treeshaking.md │ │ ├── global-api.md │ │ ├── inline-template-attribute.md │ │ ├── introduction.md │ │ ├── key-attribute.md │ │ ├── keycode-modifiers.md │ │ ├── listeners-removed.md │ │ ├── migration-build.md │ │ ├── mount-changes.md │ │ ├── props-data.md │ │ ├── props-default-this.md │ │ ├── render-function-api.md │ │ ├── slots-unification.md │ │ ├── suspense.md │ │ ├── transition-as-root.md │ │ ├── transition-group.md │ │ ├── transition.md │ │ ├── v-bind.md │ │ ├── v-if-v-for.md │ │ ├── v-model.md │ │ ├── v-on-native-modifier-removed.md │ │ ├── vnode-lifecycle-events.md │ │ └── watch.md │ ├── mixins.md │ ├── mobile.md │ ├── optimizations.md │ ├── plugins.md │ ├── reactivity-computed-watchers.md │ ├── reactivity-fundamentals.md │ ├── reactivity.md │ ├── render-function.md │ ├── routing.md │ ├── security.md │ ├── single-file-component.md │ ├── ssr.md │ ├── ssr │ │ ├── build-config.md │ │ ├── getting-started.md │ │ ├── hydration.md │ │ ├── introduction.md │ │ ├── routing.md │ │ ├── server.md │ │ ├── structure.md │ │ └── universal.md │ ├── state-management.md │ ├── teleport.md │ ├── template-syntax.md │ ├── testing.md │ ├── tooling │ │ └── deployment.md │ ├── transitions-enterleave.md │ ├── transitions-list.md │ ├── transitions-overview.md │ ├── transitions-state.md │ ├── typescript-support.md │ └── web-components.md ├── search │ └── README.md ├── style-guide │ └── README.md └── support-vuejs │ └── README.md └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | indent_style = space 4 | indent_size = 2 5 | end_of_line = lf 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | 9 | [*.md] 10 | trim_trailing_whitespace = false 11 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | closes #? 5 | -------------------------------------------------------------------------------- /.github/workflows/pr.yaml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [pull_request] 4 | 5 | defaults: 6 | run: 7 | shell: bash 8 | 9 | jobs: 10 | tag-alert-blocks: 11 | name: Tag alert blocks 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v2 15 | - run: | 16 | git fetch --no-tags --prune --depth=1 origin +refs/heads/master:refs/remotes/origin/master 17 | - uses: actions/github-script@v1 18 | with: 19 | github-token: ${{secrets.GITHUB_TOKEN}} 20 | script: | 21 | const path = require('path') 22 | const { isUsingAlertBlock } = require(path.resolve(process.cwd(), 'scripts/tag-alert-blocks.js')) 23 | 24 | isUsingAlertBlock().then(ok => { 25 | if (ok) { 26 | github.issues.addLabels({ 27 | issue_number: context.issue.number, 28 | owner: context.repo.owner, 29 | repo: context.repo.repo, 30 | labels: ['review-alert-box'] 31 | }) 32 | } 33 | }) 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### OSX ### 2 | # General 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Thumbnails 8 | ._* 9 | 10 | # Files that might appear in the root of a volume 11 | .DocumentRevisions-V100 12 | .fseventsd 13 | .Spotlight-V100 14 | .TemporaryItems 15 | .Trashes 16 | .VolumeIcon.icns 17 | .com.apple.timemachine.donotpresent 18 | 19 | # Directories potentially created on remote AFP share 20 | .AppleDB 21 | .AppleDesktop 22 | Network Trash Folder 23 | Temporary Items 24 | .apdisk 25 | 26 | ### Node ### 27 | # Logs 28 | logs 29 | *.log 30 | npm-debug.log* 31 | yarn-debug.log* 32 | yarn-error.log* 33 | lerna-debug.log* 34 | 35 | # Diagnostic reports (https://nodejs.org/api/report.html) 36 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 37 | 38 | # Runtime data 39 | pids 40 | *.pid 41 | *.seed 42 | *.pid.lock 43 | 44 | # Directory for instrumented libs generated by jscoverage/JSCover 45 | lib-cov 46 | 47 | # Coverage directory used by tools like istanbul 48 | coverage 49 | *.lcov 50 | 51 | # nyc test coverage 52 | .nyc_output 53 | 54 | # node-waf configuration 55 | .lock-wscript 56 | 57 | # Compiled binary addons (https://nodejs.org/api/addons.html) 58 | build/Release 59 | 60 | # Dependency directories 61 | node_modules/ 62 | jspm_packages/ 63 | 64 | # TypeScript v1 declaration files 65 | typings/ 66 | 67 | # TypeScript cache 68 | *.tsbuildinfo 69 | 70 | # Optional npm cache directory 71 | .npm 72 | 73 | # Optional eslint cache 74 | .eslintcache 75 | 76 | # Optional REPL history 77 | .node_repl_history 78 | 79 | # Output of 'npm pack' 80 | *.tgz 81 | 82 | # Yarn Integrity file 83 | .yarn-integrity 84 | 85 | # dotenv environment variables file 86 | .env 87 | .env.test 88 | 89 | # parcel-bundler cache (https://parceljs.org/) 90 | .cache 91 | 92 | # rollup.js default build output 93 | dist/ 94 | 95 | # vuepress build output 96 | .vuepress/dist 97 | 98 | # Serverless directories 99 | .serverless/ 100 | 101 | # Temporary folders 102 | tmp/ 103 | temp/ 104 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.language": "en,pt-BR", 3 | "cSpell.enableFiletypes": [ 4 | "svg", 5 | "vue", 6 | "vue-html", 7 | "html", 8 | "css", 9 | "javascript" 10 | ], 11 | "cSpell.words": [ 12 | "vuejs", 13 | "codepen", 14 | "vuemastery" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 vuejs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuejs-br/docs-next 2 | 3 | Este é o repositório oficial da tradução para português brasileiro da documentação do [Vue.js](https://v3.vuejs.org/). Este _site_ é produzido com [VuePress](https://vuepress.vuejs.org/). Todo o conteúdo é escrito em Markdown e os arquivos podem ser encontrados em `src`. 4 | 5 | > Nota da equipe de tradução: o trabalho nesta nova versão da documentação ainda está em andamento, portanto muitos conteúdos estão em seu estado original (em inglês). Ajuda é muito bem-vinda! 6 | 7 | ## Traduzindo 8 | 9 | Se você quer participar da tradução, ajudando a traduzir conteúdos que ainda permanecem em inglês e/ou ajudando a revisar conteúdos já traduzidos, sinta-se em casa. Para entender como tudo funciona e saber por onde começar, leia nosso guia de [Contribuição com a Documentação](https://vuejsbr-docs-next.netlify.app/guide/contributing/translations.html). 10 | 11 | > O _workflow_ para a realização da tradução está detalhadamente descrito em [Como colaborar com a versão em português?](https://vuejsbr-docs-next.netlify.app/guide/contributing/translations.html#como-colaborar-com-a-versao-em-portugues) Ler é o primeiro passo para todo colaborador em potencial. 12 | 13 | ## Escrevendo 14 | 15 | Se você quer participar ajudando na construção e atualização da documentação principal (em inglês), veja o [Guia de Escrita](https://v3.vuejs.org/guide/writing-guide.html) para regras e recomendações sobre escrever e manter a documentação. 16 | 17 | > Neste momento a documentação principal (em inglês) está em beta: o time está atualmente no meio de muitas mudanças e não está recebendo contribuições. Todo o conteúdo está sujeito a mudanças. Se você viu algo que gostaria de trazer à atenção do time, [crie uma _issue_](https://github.com/vuejs/docs-next/issues/new) e todos farão o possível para analisar. No entanto, provavelmente você precisará esperar até que todo o conteúdo esteja finalizado. 18 | 19 | ## Desenvolvendo 20 | 21 | Se deseja executar o projeto localmente, seja para contribuir com a documentação ou seja para olhar como as coisas funcionam, sigua os passos a seguir. 22 | 23 | 1. Clone este repositório: 24 | 25 | ```bash 26 | git clone https://github.com/vuejs-br/docs-next.git 27 | ``` 28 | 29 | 2. Instale as dependências: 30 | 31 | ```bash 32 | yarn # or npm install 33 | ``` 34 | 35 | 3. Inicie um ambiente de desenvolvimento local: 36 | 37 | ```bash 38 | yarn serve # or npm run serve 39 | ``` 40 | 41 | ## Publicando 42 | 43 | [![Netlify Status](https://api.netlify.com/api/v1/badges/35e551aa-2430-4ca9-aae6-72ba49d7ffec/deploy-status)](https://app.netlify.com/sites/vuejsbr-docs-next/deploys) 44 | 45 | O _site_ é automaticamente publicado quando _commits_ chegam em `master`, via [Netlify](https://www.netlify.com/). 46 | 47 | O processo é disparado somente por um grupo de contribuidores selecionados para isso, a fim de manter a organização do projeto. Colabore apenas enviando _pull requests_ e, depois de revisados e aceitos, serão mesclados em `master` pela equipe. Ou seja, não se preocupe com a publicação, o _deploy_ é automático. 48 | -------------------------------------------------------------------------------- /assets/diagrams.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/assets/diagrams.sketch -------------------------------------------------------------------------------- /assets/transitions-diagram.ai.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/assets/transitions-diagram.ai.zip -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/guide/" 3 | to = "/guide/introduction.html" 4 | 5 | [[redirects]] 6 | from = "guide/doc-style-guide.html" 7 | to = "/guide/contributing/doc-style-guide.html" 8 | 9 | [[redirects]] 10 | from = "/guide/writing-guide.html" 11 | to = "/guide/contributing/writing-guide.html" 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "@vuepress/plugin-pwa": "^1.5.4", 4 | "sass": "^1.32.0", 5 | "sass-loader": "^8.0.2", 6 | "vuepress": "^1.5.4" 7 | }, 8 | "scripts": { 9 | "dev": "yarn serve", 10 | "serve": "vuepress dev src", 11 | "build": "vuepress build src" 12 | }, 13 | "dependencies": { 14 | "@docsearch/css": "^1.0.0-alpha.27", 15 | "@docsearch/js": "^1.0.0-alpha.27", 16 | "algoliasearch": "^4.4.0", 17 | "intersection-observer": "^0.11.0", 18 | "showdown": "^1.9.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scripts/tag-alert-blocks.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const { exec } = require('child_process') 4 | 5 | /** 6 | * Execute a command and return stdout as string. 7 | * @param {string} command 8 | * @returns {Promise} 9 | */ 10 | function run(command) { 11 | return new Promise((resolve, reject) => { 12 | exec(command, { encoding: 'utf-8' }, (error, stdout) => 13 | error ? reject(error) : resolve(stdout) 14 | ) 15 | }) 16 | } 17 | 18 | const ALERT_BLOCK = /^\+\s*:::\s?(\w+)/m 19 | 20 | async function isUsingAlertBlock(base = 'origin/master') { 21 | const result = await run(`git diff --name-only ${base}`) 22 | const files = ( 23 | await Promise.all( 24 | result 25 | .trim() 26 | .split(/\r?\n/) 27 | .map(file => 28 | run(`git diff ${base} -- ${file}`) 29 | .then(diff => ALERT_BLOCK.test(diff)) 30 | .then(usesAlertBlock => (usesAlertBlock ? file : '')) 31 | ) 32 | ) 33 | ).filter(Boolean) 34 | 35 | if (files.length) { 36 | return true 37 | } 38 | 39 | return false 40 | } 41 | 42 | module.exports = { isUsingAlertBlock } 43 | -------------------------------------------------------------------------------- /src/.vuepress/components/AppBanner.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 34 | 35 | 99 | -------------------------------------------------------------------------------- /src/.vuepress/components/FirstExample.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 28 | 29 | 41 | -------------------------------------------------------------------------------- /src/.vuepress/components/MigrationBadges.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 38 | 39 | 85 | -------------------------------------------------------------------------------- /src/.vuepress/components/VideoLesson.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 23 | 24 | 51 | -------------------------------------------------------------------------------- /src/.vuepress/components/common/codepen-snippet.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 93 | 94 | 105 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/partners/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/team/emeriti.js: -------------------------------------------------------------------------------- 1 | import { shuffle } from 'lodash' 2 | 3 | export default shuffle([ 4 | { 5 | name: 'Sarah Drasner', 6 | city: 'Denver, CO, USA', 7 | languages: ['en'], 8 | work: { 9 | role: 'Director of Engineering, Core Developer Web', 10 | org: 'Google', 11 | orgUrl: 'https://google.com', 12 | }, 13 | github: 'sdras', 14 | twitter: 'sarah_edo', 15 | codepen: 'sdras', 16 | reposOfficial: ['vuejs.org'], 17 | reposPersonal: [ 18 | 'vue-vscode-snippets', 19 | 'intro-to-vue', 20 | 'vue-vscode-extensionpack', 21 | 'ecommerce-netlify', 22 | ], 23 | links: ['https://sarah.dev/'], 24 | }, 25 | { 26 | name: 'Chris Fritz', 27 | title: 'Good Word Putter-Togetherer', 28 | city: 'Durham, NC, USA', 29 | languages: ['en', 'de'], 30 | github: 'chrisvfritz', 31 | twitter: 'chrisvfritz', 32 | work: { 33 | role: 'Educator & Consultant', 34 | }, 35 | reposPersonal: ['vue-enterprise-boilerplate'], 36 | }, 37 | { 38 | name: 'Blake Newman', 39 | title: 'Performance Specializer & Code Deleter', 40 | city: 'London, UK', 41 | languages: ['en'], 42 | work: { 43 | role: 'Software Engineer', 44 | org: 'Attest', 45 | orgUrl: 'https://www.askattest.com/', 46 | }, 47 | github: 'blake-newman', 48 | twitter: 'blakenewman', 49 | }, 50 | { 51 | name: 'kingwl', 52 | title: 'New Bee', 53 | city: 'Beijing, China', 54 | languages: ['zh'], 55 | work: { 56 | role: 'Software Development Engineer', 57 | org: 'Chaitin', 58 | orgUrl: 'https://chaitin.cn/', 59 | }, 60 | github: 'kingwl', 61 | reposOfficial: ['vue'], 62 | }, 63 | { 64 | name: 'Alan Song', 65 | title: 'Regent of Routing', 66 | city: 'Hangzhou, China', 67 | languages: ['zh', 'en'], 68 | work: { 69 | role: 'Cofounder', 70 | org: 'Futurenda', 71 | orgUrl: 'https://www.futurenda.com/', 72 | }, 73 | github: 'fnlctrl', 74 | reposOfficial: ['vue-router'], 75 | }, 76 | { 77 | name: 'defcc', 78 | title: 'Details Deity & Bug Surgeon', 79 | city: 'Chongqing, China', 80 | languages: ['zh', 'en'], 81 | github: 'defcc', 82 | work: { 83 | org: 'zbj.com', 84 | orgUrl: 'http://www.zbj.com/', 85 | }, 86 | }, 87 | { 88 | name: 'gebilaoxiong', 89 | title: 'Issue Annihilator', 90 | city: 'Chongqing, China', 91 | languages: ['zh', 'en'], 92 | github: 'gebilaoxiong', 93 | work: { 94 | org: 'zbj.com', 95 | orgUrl: 'http://www.zbj.com/', 96 | }, 97 | }, 98 | { 99 | name: 'Denis Karabaza', 100 | title: 'Director of Directives (Emoji-Human Hybrid)', 101 | city: 'Dubna, Russia', 102 | languages: ['ru', 'en'], 103 | github: 'simplesmiler', 104 | twitter: 'simplesmiler', 105 | work: { 106 | role: 'Software Engineer', 107 | org: 'Neolant', 108 | orgUrl: 'http://neolant.ru/', 109 | }, 110 | }, 111 | { 112 | name: 'Edd Yerburgh', 113 | title: 'Testatron Alpha 9000', 114 | city: 'London, UK', 115 | languages: ['en'], 116 | github: 'eddyerburgh', 117 | twitter: 'EddYerburgh', 118 | work: { 119 | role: 'Full Stack Developer', 120 | }, 121 | reposOfficial: ['vue-test-utils'], 122 | reposPersonal: ['avoriaz'], 123 | links: ['https://www.eddyerburgh.me'], 124 | }, 125 | ]) 126 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/team/get-position-button.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 52 | 53 | 69 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/team/utils.js: -------------------------------------------------------------------------------- 1 | export const minimizeLink = link => { 2 | return link 3 | .replace(/^https?:\/\/(www\.)?/, '') 4 | .replace(/\/$/, '') 5 | .replace(/^mailto:/, '') 6 | } 7 | 8 | export const generateGithubUrl = (handle, repo) => { 9 | if (repo && repo.url) { 10 | return repo.url 11 | } 12 | 13 | if (repo && repo.includes('/')) { 14 | // If the repo name has a slash, it must be an organization repo. 15 | // In such a case, we discard the (personal) handle. 16 | return `https://github.com/${repo.replace(/\/\*$/, '')}` 17 | } 18 | 19 | return `https://github.com/${handle}/${repo || ''}` 20 | } 21 | 22 | export const getPreferredLanguageCode = () => { 23 | const nav = window.navigator 24 | 25 | return nav.languages 26 | // The preferred language set in the browser 27 | ? nav.languages[0] 28 | : ( 29 | // The system language in IE 30 | nav.userLanguage || 31 | // The language in the current page 32 | nav.language 33 | ) 34 | } 35 | 36 | /** 37 | * Calculates great-circle distances between the two points – that is, the shortest distance over the earth’s surface – using the Haversine formula. 38 | * @param {Number} lat1 The latitude of the 1st location. 39 | * @param {Number} lon1 The longitude of the 1st location. 40 | * @param {Number} lat2 The latitude of the 2nd location. 41 | * @param {Number} lon2 The longitude of the 2nd location. 42 | */ 43 | export const getDistanceFromLatLonInKm = (lat1, lon1, lat2, lon2) => { 44 | const R = 6371 // Radius of the earth in km 45 | const dLat = deg2rad(lat2 - lat1) // deg2rad below 46 | const dLon = deg2rad(lon2 - lon1) 47 | const a = 48 | Math.sin(dLat / 2) * Math.sin(dLat / 2) + 49 | Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 50 | Math.sin(dLon / 2) * Math.sin(dLon / 2) 51 | const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)) 52 | 53 | return R * c // Distance in km 54 | } 55 | 56 | function deg2rad(deg) { 57 | return deg * (Math.PI/180) 58 | } 59 | 60 | export const kmToMi = km => km * 0.62137 61 | 62 | export const roundDistance = num => Number(Math.ceil(num).toPrecision(2)) 63 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/team/vuer-language.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 71 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/themes/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/themes/theme-item.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 26 | 27 | 98 | -------------------------------------------------------------------------------- /src/.vuepress/components/community/themes/theme-provider.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 42 | 43 | 67 | -------------------------------------------------------------------------------- /src/.vuepress/components/guide/contributing/translations-data.js: -------------------------------------------------------------------------------- 1 | export const labels = { 2 | language: 'Linguagem', 3 | github: 'GitHub', 4 | lastCommit: 'Último commit', 5 | last90Days: 'Últimos 90 dias', 6 | loadDetails: 'Carregar Detalhes', 7 | commits: 'commits', 8 | loading: 'Carregando...' 9 | } 10 | 11 | // Repos are in alphabetical order by the language code 12 | // You may need to clear your sessionStorage when adding a new item to this list 13 | export const repos = [ 14 | { lang: 'en-us', owner: 'vuejs', repo: 'docs', branch: 'master', url: 'https://v3.vuejs.org/' }, 15 | { lang: 'fr', owner: 'demahom18', repo: 'docs-next', branch: 'master', url: 'https://vue3-fr.netlify.app' }, 16 | { lang: 'id', owner: 'vuejs-id', repo: 'docs-next', branch: 'indonesian', url: 'https://v3-vuejsid-docs.netlify.app/' }, 17 | { lang: 'ja', owner: 'vuejs-jp', repo: 'ja.vuejs.org', branch: 'lang-ja', url: 'https://v3.ja.vuejs.org/' }, 18 | { lang: 'ko', owner: 'vuejs-kr', repo: 'docs-next', branch: 'rootKoKr', url: 'https://v3.ko.vuejs.org/' }, 19 | { lang: 'pt-br', owner: 'vuejs-br', repo: 'docs-next', branch: 'master', url: 'https://vuejsbr-docs-next.netlify.app/' }, 20 | { lang: 'ru', owner: 'translation-gang', repo: 'docs-next', branch: 'master', url: 'https://v3.ru.vuejs.org/' }, 21 | { lang: 'zh-cn', owner: 'vuejs', repo: 'docs-next-zh-cn', branch: 'master', url: 'https://v3.cn.vuejs.org/' } 22 | ] 23 | -------------------------------------------------------------------------------- /src/.vuepress/components/support/OpenCollectiveGroup.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /src/.vuepress/components/support/SponsorGroup.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /src/.vuepress/components/support/SponsorImageLink.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 32 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibilityChromeDeveloperTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/AccessibilityChromeDeveloperTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleARIAdescribedby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/AccessibleARIAdescribedby.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleARIAlabelDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/AccessibleARIAlabelDevTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleARIAlabelledbyDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/AccessibleARIAlabelledbyDevTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/AccessibleLabelChromeDevTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/AccessibleLabelChromeDevTools.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/breakpoint_hit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/breakpoint_hit.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/breakpoint_set.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/breakpoint_set.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-bch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/coin-bch.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-btc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/coin-btc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-eth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/coin-eth.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/coin-ltc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/coin-ltc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/components.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/components_provide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/components_provide.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/config_add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/config_add.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/devtools-timetravel.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/devtools-timetravel.gif -------------------------------------------------------------------------------- /src/.vuepress/public/images/dom-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/dom-tree.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/editable-svg-icons-sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/editable-svg-icons-sizes.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/editable-svg-icons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/editable-svg-icons.jpg -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/android-icon-144x144.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/android-icon-192x192.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/android-icon-36x36.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/android-icon-48x48.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/android-icon-72x72.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/android-icon-96x96.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-114x114.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-144x144.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-57x57.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-60x60.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-72x72.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-76x76.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/apple-icon.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/bacancy_technology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/bacancy_technology.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/bulb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | bulb 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/danger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | danger 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/favicon-16x16.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/favicon-32x32.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/favicon-96x96.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/favicon.ico -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | info 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/ms-icon-150x150.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/ms-icon-310x310.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/icons/ms-icon-70x70.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/icons/stop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | stop 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/.vuepress/public/images/options-api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/options-api.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/oxford-comma.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/oxford-comma.jpg -------------------------------------------------------------------------------- /src/.vuepress/public/images/partners/monterail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/partners/monterail.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/partners/vehikl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/partners/vehikl.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/paypal.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/reactivity-spreadsheet.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/reactivity-spreadsheet.mp4 -------------------------------------------------------------------------------- /src/.vuepress/public/images/scoped-slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/scoped-slot.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sfc-with-preprocessors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sfc-with-preprocessors.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sfc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sfc.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/slot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/slot.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/bacancy_technology.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/bacancy_technology.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/bestvpn_co.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/bestvpn_co.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/dcloud.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/dcloud.gif -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/devexpress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/devexpress.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/firestick_tricks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/firestick_tricks.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/foo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/foo.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/frontendlove.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/frontendlove.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/hbuilder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/hbuilder.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/html_burger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/html_burger.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/inkoop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/inkoop.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/intygrate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/intygrate.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/ionic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/ionic.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/isolutions_uk_limited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/isolutions_uk_limited.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/laravel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/laravel.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/moovweb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/moovweb.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/neds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/neds.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/onsen_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/onsen_ui.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/passionate_people.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/passionate_people.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/retool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/retool.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/roadster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/roadster.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/shopware_ag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/shopware_ag.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/tidelift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/tidelift.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/usave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/usave.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vehikl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/vehikl.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vpnranks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/vpnranks.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vuejobs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/vuejobs.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vuemastery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/vuemastery.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/vueschool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/vueschool.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/sponsors/y8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/sponsors/y8.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/state.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/transition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/transition.png -------------------------------------------------------------------------------- /src/.vuepress/public/images/v-bind-instead-of-sync.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/images/v-bind-instead-of-sync.png -------------------------------------------------------------------------------- /src/.vuepress/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuejs-br/docs-next/f2396a6f81e0aebb68cb3d2b3fe25f596ee8df1d/src/.vuepress/public/logo.png -------------------------------------------------------------------------------- /src/.vuepress/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Vue.js", 3 | "short_name": "Vue.js", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#3eaf7c", 7 | "description": "Documentação do framework Vue.js", 8 | "icons": [ 9 | { 10 | "src": "images/icons/android-icon-48x48.png", 11 | "sizes": "48x48", 12 | "type": "image/png" 13 | }, 14 | { 15 | "src": "images/icons/android-icon-72x72.png", 16 | "sizes": "72x72", 17 | "type": "image/png" 18 | }, 19 | { 20 | "src": "images/icons/android-icon-96x96.png", 21 | "sizes": "96x96", 22 | "type": "image/png" 23 | }, 24 | { 25 | "src": "images/icons/apple-icon-144x144.png", 26 | "sizes": "144x144", 27 | "type": "image/png" 28 | }, 29 | { 30 | "src": "images/icons/android-icon-192x192.png", 31 | "sizes": "192x192", 32 | "type": "image/png" 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /src/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | .demo { 2 | font-family: sans-serif; 3 | border: 1px solid #eee; 4 | border-radius: 2px; 5 | padding: 20px 30px; 6 | margin-top: 1em; 7 | margin-bottom: 40px; 8 | user-select: none; 9 | overflow-x: auto; 10 | } 11 | 12 | .custom-block { 13 | padding: 0.1rem 1.5rem; 14 | margin: 2em 0; 15 | border-left-width: 0.5rem; 16 | border-left-style: solid; 17 | position: relative; 18 | border-bottom-right-radius: 2px; 19 | border-top-right-radius: 2px; 20 | margin: 1rem 0; 21 | 22 | &::before { 23 | position: absolute; 24 | top: 19px; 25 | left: -14px; 26 | color: #fff; 27 | width: 20px; 28 | height: 20px; 29 | border-radius: 100%; 30 | text-align: center; 31 | line-height: 20px; 32 | font-weight: bold; 33 | font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; 34 | font-size: 14px; 35 | } 36 | 37 | p { 38 | color: #222; 39 | } 40 | 41 | .custom-block-title { 42 | font-weight: 600; 43 | margin-bottom: -0.4rem; 44 | } 45 | 46 | &.info { 47 | border-color: #007bff; 48 | background-color: #f8f8f8; 49 | 50 | &::before { 51 | content: url('/images/icons/info.svg'); 52 | width: 25px; 53 | height: 25px; 54 | left: -16px; 55 | box-sizing: border-box; 56 | } 57 | } 58 | 59 | &.tip { 60 | border-color: #42b983; 61 | background-color: #f8f8f8; 62 | 63 | &::before { 64 | content: url('/images/icons/bulb.svg'); 65 | width: 25px; 66 | height: 25px; 67 | left: -16px; 68 | } 69 | } 70 | 71 | &.warning { 72 | border-color: #f4cd00; 73 | background-color: #f8f8f8; 74 | 75 | .custom-block-title { 76 | color: #222; 77 | } 78 | 79 | &::before { 80 | content: url('/images/icons/danger.svg'); 81 | width: 25px; 82 | height: 25px; 83 | left: -16px; 84 | box-sizing: border-box; 85 | } 86 | } 87 | 88 | &.danger { 89 | border-color: #f66; 90 | background-color: #f8f8f8; 91 | 92 | .custom-block-title { 93 | color: #222; 94 | } 95 | 96 | &::before { 97 | content: url('/images/icons/stop.svg'); 98 | width: 25px; 99 | height: 25px; 100 | left: -16px; 101 | } 102 | } 103 | 104 | &.details { 105 | display: block; 106 | position: relative; 107 | border-radius: 2px; 108 | margin: 1.6em 0; 109 | padding: 1.6em; 110 | background-color: #eee; 111 | h4 { 112 | margin-top: 0; 113 | } 114 | figure, 115 | p { 116 | &:last-child { 117 | margin-bottom: 0; 118 | padding-bottom: 0; 119 | } 120 | } 121 | summary { 122 | outline: none; 123 | cursor: pointer; 124 | } 125 | } 126 | } 127 | 128 | .sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) { 129 | font-size: inherit; 130 | cursor: pointer!important; 131 | font-weight: bold; 132 | opacity: 1!important; 133 | } 134 | 135 | .badge { 136 | background-color: #b00000; 137 | font-size: 0.8rem; 138 | border: 2px solid #b00000; 139 | border-radius: 5px; 140 | margin-right: 0.5rem; 141 | color: #fff; 142 | padding: 0.25rem 0.25rem; 143 | } 144 | 145 | .dropdown-wrapper .nav-dropdown .dropdown-item h4 { 146 | margin-bottom: 0.3rem!important; 147 | } 148 | -------------------------------------------------------------------------------- /src/.vuepress/theme/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-present, Yuxi (Evan) You 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/.vuepress/theme/README.md: -------------------------------------------------------------------------------- 1 | # @vuepress/theme-default 2 | 3 | > theme-default for VuePress 4 | 5 | ## Plugins 6 | 7 | The default theme has the following plugin built in: 8 | 9 | - [@vuepress/plugin-active-header-links](https://github.com/vuejs/vuepress/tree/master/packages/@vuepress/plugin-active-header-links) 10 | - [@vuepress/plugin-google-analytics](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-google-analytics) 11 | - [@vuepress/plugin-search](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-search) 12 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/BuySellAds.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 51 | 52 | 116 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/CarbonAds.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | 28 | 80 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/DropdownTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/NavLink.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 116 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/Newsletter.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 92 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/Page.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | 24 | 40 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | 25 | 62 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/SidebarButton.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 41 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/SidebarLinks.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 103 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/OpenCollectiveSponsors.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 51 | 52 | 59 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/PatreonSponsors.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 52 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/SpecialSponsorBlock.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/SpecialSponsors.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 50 | 51 | 82 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/sponsors/SponsorsLayout.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/ui/RoundedButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 37 | -------------------------------------------------------------------------------- /src/.vuepress/theme/components/ui/SocialIcon.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 46 | 47 | 85 | -------------------------------------------------------------------------------- /src/.vuepress/theme/global-components/ActionLink.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 91 | 92 | 119 | -------------------------------------------------------------------------------- /src/.vuepress/theme/global-components/Badge.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 52 | -------------------------------------------------------------------------------- /src/.vuepress/theme/global-components/VideoBanner.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 28 | 29 | 69 | -------------------------------------------------------------------------------- /src/.vuepress/theme/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | // Theme API. 4 | module.exports = (options, ctx) => { 5 | const { themeConfig, siteConfig } = ctx 6 | 7 | // resolve algolia 8 | const isAlgoliaSearch = 9 | themeConfig.algolia || 10 | Object.keys((siteConfig.locales && themeConfig.locales) || {}).some( 11 | base => themeConfig.locales[base].algolia 12 | ) 13 | 14 | const enableSmoothScroll = themeConfig.smoothScroll === true 15 | 16 | return { 17 | alias() { 18 | return { 19 | '@AlgoliaSearchBox': isAlgoliaSearch 20 | ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue') 21 | : path.resolve(__dirname, 'noopModule.js') 22 | } 23 | }, 24 | 25 | plugins: [ 26 | ['@vuepress/active-header-links', options.activeHeaderLinks], 27 | '@vuepress/search', 28 | '@vuepress/plugin-nprogress', 29 | [ 30 | 'container', 31 | { 32 | type: 'tip', 33 | defaultTitle: { 34 | '/': 'TIP', 35 | '/zh/': '提示' 36 | } 37 | } 38 | ], 39 | [ 40 | 'container', 41 | { 42 | type: 'warning', 43 | defaultTitle: { 44 | '/': 'WARNING', 45 | '/zh/': '注意' 46 | } 47 | } 48 | ], 49 | [ 50 | 'container', 51 | { 52 | type: 'danger', 53 | defaultTitle: { 54 | '/': 'WARNING', 55 | '/zh/': '警告' 56 | } 57 | } 58 | ], 59 | [ 60 | 'container', 61 | { 62 | type: 'details', 63 | before: info => 64 | `
${ 65 | info ? `${info}` : '' 66 | }\n`, 67 | after: () => '
\n' 68 | } 69 | ], 70 | ['smooth-scroll', enableSmoothScroll] 71 | ] 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/.vuepress/theme/layouts/404.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 42 | -------------------------------------------------------------------------------- /src/.vuepress/theme/noopModule.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/.vuepress/theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuejs-org-theme", 3 | "version": "0.1.0-alpha", 4 | "description": "Vuejs.org v2.0 VuePress Theme", 5 | "keywords": [ 6 | "documentation", 7 | "generator", 8 | "vue", 9 | "vuepress" 10 | ], 11 | "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/theme-default#readme", 12 | "bugs": { 13 | "url": "https://github.com/vuejs/vuepress/issues" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/vuejs/vuepress.git", 18 | "directory": "packages/@vuepress/theme-default" 19 | }, 20 | "license": "MIT", 21 | "author": "Ben Hong", 22 | "main": "index.js", 23 | "dependencies": { 24 | "@vuepress/plugin-active-header-links": "^1.3.1", 25 | "@vuepress/plugin-nprogress": "^1.3.1", 26 | "@vuepress/plugin-search": "^1.3.1", 27 | "docsearch.js": "^2.5.2", 28 | "lodash": "^4.17.15", 29 | "stylus": "^0.54.5", 30 | "stylus-loader": "^3.0.2", 31 | "vuepress-plugin-container": "^2.0.2", 32 | "vuepress-plugin-smooth-scroll": "^0.0.3" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | }, 37 | "maintainers": [ 38 | { 39 | "name": "Ben Hong", 40 | "email": "ben@bencodezen.io" 41 | } 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/_settings.scss: -------------------------------------------------------------------------------- 1 | // colors 2 | 3 | $dark: #273849; 4 | $medium: #304455; 5 | $light: #4f5959; 6 | $green: #42b983; 7 | $border: #dddddd; 8 | $codebg: #f8f8f8; 9 | $red: #f66; 10 | $info: #1c90f3; 11 | 12 | $MQNarrow: 959px; 13 | $MQMobile: 719px; 14 | $MQMobileNarrow: 419px; 15 | 16 | $fontHome: 'Open Sans', 'Inter', Roboto, Oxygen, Fira Sans, Helvetica Neue, 17 | sans-serif; 18 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/arrow.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | .arrow 4 | display inline-block 5 | width 0 6 | height 0 7 | &.up 8 | border-left 4px solid transparent 9 | border-right 4px solid transparent 10 | border-bottom 6px solid $arrowBgColor 11 | &.down 12 | border-left 4px solid transparent 13 | border-right 4px solid transparent 14 | border-top 6px solid $arrowBgColor 15 | &.right 16 | border-top 4px solid transparent 17 | border-bottom 4px solid transparent 18 | border-left 6px solid $arrowBgColor 19 | &.left 20 | border-top 4px solid transparent 21 | border-bottom 4px solid transparent 22 | border-right 6px solid $arrowBgColor 23 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/config.styl: -------------------------------------------------------------------------------- 1 | $contentClass = '.theme-default-content' 2 | $fontPrimary = 'Inter', Roboto, Oxygen, Fira Sans,Helvetica Neue, sans-serif; 3 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/custom-blocks.styl: -------------------------------------------------------------------------------- 1 | .custom-block 2 | .custom-block-title 3 | font-weight 600 4 | margin-bottom -0.4rem 5 | &.tip, &.warning, &.danger 6 | padding .1rem 1.5rem 7 | border-left-width .5rem 8 | border-left-style solid 9 | margin 1rem 0 10 | &.tip 11 | background-color #f3f5f7 12 | border-color #42b983 13 | &.warning 14 | background-color rgba(255,229,100,.3) 15 | border-color darken(#ffe564, 35%) 16 | color darken(#ffe564, 70%) 17 | .custom-block-title 18 | color darken(#ffe564, 50%) 19 | &.danger 20 | background-color #ffe6e6 21 | border-color darken(red, 20%) 22 | color darken(red, 70%) 23 | .custom-block-title 24 | color darken(red, 40%) 25 | &.details 26 | display block 27 | position relative 28 | border-radius 2px 29 | margin 1.6em 0 30 | padding 1.6em 31 | background-color #eee 32 | h4 33 | margin-top 0 34 | figure, p 35 | &:last-child 36 | margin-bottom 0 37 | padding-bottom 0 38 | summary 39 | outline none 40 | cursor pointer 41 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin breakpoint($breakpoint) { 2 | @media (min-width: $breakpoint) { 3 | @content; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/mobile.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | $mobileSidebarWidth = $sidebarWidth * 0.82 4 | 5 | // narrow desktop / iPad 6 | @media (max-width: $MQNarrow) 7 | .sidebar 8 | font-size 15px 9 | width $mobileSidebarWidth 10 | .page 11 | padding-left $mobileSidebarWidth 12 | 13 | // wide mobile 14 | @media (max-width: $MQMobile) 15 | .sidebar 16 | transform translateX(-100%) 17 | transition transform .2s ease 18 | .page 19 | padding-left 0 20 | .theme-container 21 | &.sidebar-open 22 | .sidebar 23 | transform translateX(0) 24 | &.no-navbar 25 | .sidebar 26 | padding-top: 0 27 | 28 | // narrow mobile 29 | @media (max-width: $MQMobileNarrow) 30 | h1 31 | font-size 1.9rem 32 | {$contentClass} 33 | div[class*="language-"] 34 | margin 0.85rem -1.5rem 35 | border-radius 0 36 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/toc.styl: -------------------------------------------------------------------------------- 1 | .table-of-contents 2 | .badge 3 | vertical-align middle 4 | -------------------------------------------------------------------------------- /src/.vuepress/theme/styles/wrapper.styl: -------------------------------------------------------------------------------- 1 | $wrapper 2 | max-width $contentWidth 3 | margin 0 auto 4 | padding 2rem 2.5rem 5 | @media (max-width: $MQNarrow) 6 | padding 2rem 2rem 7 | @media (max-width: $MQMobileNarrow) 8 | padding 2rem 1.5rem 9 | 10 | html.with-beta-banner & 11 | padding-top calc(2rem + 3rem) 12 | 13 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | heroImage: /logo.png 4 | heroText: Vue.js 5 | tagline: O Framework
JavaScript Progressivo 6 | actionButtons: 7 | - text: Por que Vue? 8 | link: / 9 | extraClass: vuemastery-trigger primary 10 | icon: fa fa-play-circle 11 | - text: Começar 12 | link: /guide/introduction 13 | - text: GitHub 14 | link: https://github.com/vuejs/vue-next 15 | extraClass: github grey 16 | icon: fa fa-github 17 | target: _blank 18 | features: 19 | - title: Acessível 20 | details: Já conhece HTML, CSS e JavaScript? Leia o guia e comece a criar aplicações sem perder tempo! 21 | - title: Versátil 22 | details: Ecossistema com adoção incremental, escala de uma simples biblioteca à um framework completo. 23 | - title: Performático 24 | details: | 25 | 20KB min+gzip Runtime
26 | DOM Virtual Incrivelmente Rápido
27 | Esforço Mínimo para Otimizações 28 | footer: | 29 | Distribuído sob a Licença MIT
30 | Copyright © 2014-2021 Evan You 31 | socialIcons: 32 | - type: GitHub 33 | link: https://github.com/vuejs/vue-next 34 | - type: Twitter 35 | link: https://twitter.com/vuejs 36 | - type: Medium 37 | link: https://medium.com/the-vue-point 38 | --- 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/api/effect-scope.md: -------------------------------------------------------------------------------- 1 | # API do Escopo de Efeito 2 | 3 | :::info 4 | Escopo de efeito é uma API avançada destinada principalmente a autores de bibliotecas. Para obter detalhes sobre como aproveitar essa API, consulte o [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md) correspondente. 5 | ::: 6 | 7 | ## `effectScope` 8 | 9 | Cria um objeto de escopo de efeito que pode capturar os efeitos reativos (por exemplo, computados e observadores) criados dentro dele para que esses efeitos possam ser descartados juntos. 10 | 11 | **Tipando:** 12 | 13 | ```ts 14 | function effectScope(detached?: boolean): EffectScope 15 | 16 | interface EffectScope { 17 | run(fn: () => T): T | undefined // indefinido se o escopo estiver inativo 18 | stop(): void 19 | } 20 | ``` 21 | 22 | **Exemplo:** 23 | 24 | ```js 25 | const scope = effectScope() 26 | 27 | scope.run(() => { 28 | const doubled = computed(() => counter.value * 2) 29 | 30 | watch(doubled, () => console.log(doubled.value)) 31 | 32 | watchEffect(() => console.log('Contagem: ', doubled.value)) 33 | }) 34 | 35 | // para descartar todos os efeitos no escopo 36 | scope.stop() 37 | ``` 38 | 39 | ## `getCurrentScope` 40 | 41 | Retorna o [escopo de efeito](#effectscope) atualmente ativo se houver um. 42 | 43 | **Tipando:** 44 | 45 | ```ts 46 | function getCurrentScope(): EffectScope | undefined 47 | ``` 48 | 49 | ## `onScopeDispose` 50 | 51 | Registra um _callback_ de descarte no [escopo de efeito](#effectscope) atualmente ativo. O _callback_ será invocado quando o escopo de efeito associado for interrompido. 52 | 53 | Este método pode ser usado como um substituto de `onUnmounted` "não acoplado a componentes" em funções de composição reutilizáveis, uma vez que a função `setup()` de cada componente Vue também é invocada em um escopo de efeito. 54 | 55 | **Tipando:** 56 | 57 | ```ts 58 | function onScopeDispose(fn: () => void): void 59 | ``` 60 | -------------------------------------------------------------------------------- /src/api/index.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | A API do Vue.js contém as seguintes categorias: 4 | 5 | - [Configuração da Aplicação](/api/application-config.html) 6 | - [API da Aplicação](/api/application-api.html) 7 | - [API Global](/api/global-api.html) 8 | - [API de Opções](/api/options-api.html) 9 | - [Propriedades da Instância](/api/instance-properties.html) 10 | - [Métodos de Instância](/api/instance-methods.html) 11 | - [Diretivas](/api/directives.html) 12 | - [Atributos Especiais](/api/special-attributes.html) 13 | - [Componentes Integrados](/api/built-in-components.html) 14 | - [API de Reatividade](/api/reactivity-api.html) 15 | - [API de Composição](/api/composition-api.html) 16 | -------------------------------------------------------------------------------- /src/api/options-api.md: -------------------------------------------------------------------------------- 1 | # API de Opções 2 | 3 | A API de Opções contém as seguintes seções: 4 | 5 | - [Dados](/api/options-data.html) 6 | - [DOM](/api/options-dom.html) 7 | - [Gatilhos do Ciclo de Vida](/api/options-lifecycle-hooks.html) 8 | - [Recursos](/api/options-assets.html) 9 | - [Composição](/api/options-composition.html) 10 | - [Diversos](/api/options-misc.html) 11 | -------------------------------------------------------------------------------- /src/api/options-assets.md: -------------------------------------------------------------------------------- 1 | # Recursos 2 | 3 | ## directives 4 | 5 | - **Tipo:** `Object` 6 | 7 | - **Detalhes:** 8 | 9 | Um conjunto de diretivas que será disponibilizado para a instância do componente. 10 | 11 | - **Exemplo:** 12 | 13 | ```js 14 | const app = createApp({}) 15 | 16 | app.component('focused-input', { 17 | directives: { 18 | focus: { 19 | mounted(el) { 20 | el.focus() 21 | } 22 | } 23 | }, 24 | template: `` 25 | }) 26 | ``` 27 | 28 | - **Ver também:** [Diretivas Personalizadas](../guide/custom-directive.html) 29 | 30 | ## components 31 | 32 | - **Tipo:** `Object` 33 | 34 | - **Detalhes:** 35 | 36 | Um conjunto de componentes que será disponibilizado para a instância do componente. 37 | 38 | - **Exemplo:** 39 | 40 | ```js 41 | const Foo = { 42 | template: `
Foo
` 43 | } 44 | 45 | const app = createApp({ 46 | components: { 47 | Foo 48 | }, 49 | template: `` 50 | }) 51 | ``` 52 | 53 | - **Ver também:** [Básico sobre Componentes](../guide/component-basics.html) 54 | -------------------------------------------------------------------------------- /src/api/options-dom.md: -------------------------------------------------------------------------------- 1 | # DOM 2 | 3 | ## `template` 4 | 5 | - **Tipo:** `string` 6 | 7 | - **Detalhes:** 8 | 9 | Um _template_ string a ser usado como marcação para a instância do componente. O _template_ **substituirá** o `innerHTML` do elemento montado. Qualquer marcação existente dentro do elemento montado será ignorada, a menos que os _slots_ de distribuição de conteúdo estejam presentes no _template_. 10 | 11 | Se a string começar com `#` ela será usada como um `querySelector` e usará o `innerHTML` do elemento selecionado como a _template_ string. Isso permite o uso do truque comum ` 11 | Vue classes 12 | 13 | 14 | 15 |
16 | 24 | 25 | 26 |
27 | 28 | 55 | 56 | -------------------------------------------------------------------------------- /src/examples/dynamic-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dynamic-components", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "serve" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/codesandbox-app/static-template.git" 12 | }, 13 | "keywords": [], 14 | "author": "Ives van Hoorne", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/codesandbox-app/static-template/issues" 18 | }, 19 | "homepage": "https://github.com/codesandbox-app/static-template#readme", 20 | "devDependencies": { 21 | "serve": "^11.2.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/examples/dynamic-components/sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "template": "static" 3 | } 4 | -------------------------------------------------------------------------------- /src/examples/dynamic-components/style.css: -------------------------------------------------------------------------------- 1 | .tab-button { 2 | padding: 6px 10px; 3 | border-top-left-radius: 3px; 4 | border-top-right-radius: 3px; 5 | border: 1px solid #ccc; 6 | cursor: pointer; 7 | background: #f0f0f0; 8 | margin-bottom: -1px; 9 | margin-right: -1px; 10 | } 11 | .tab-button:hover { 12 | background: #e0e0e0; 13 | } 14 | .tab-button.active { 15 | background: #e0e0e0; 16 | } 17 | .tab { 18 | border: 1px solid #ccc; 19 | padding: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /src/examples/elastic-header.md: -------------------------------------------------------------------------------- 1 | # Exemplo de Cabeçalho Elástico 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/examples/grid-component.md: -------------------------------------------------------------------------------- 1 | # Componente de Grade 2 | 3 | > Este é um exemplo de como criar um componente de grade reutilizável e usá-lo com dados externos. 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/markdown.md: -------------------------------------------------------------------------------- 1 | # Editor de Markdown 2 | 3 | > Um editor de Markdown simples 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/modal.md: -------------------------------------------------------------------------------- 1 | # Componente Modal 2 | 3 | > Funcionalidades utilizadas: componente, passagem de prop, inserção de conteúdo, transições. 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/select2.md: -------------------------------------------------------------------------------- 1 | # Exemplo de Componente _Wrapper_ 2 | 3 | > Neste exemplo, estamos integrando um plugin jQuery de terceiros (select2) envolvendo-o dentro de um componente personalizado. 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/svg.md: -------------------------------------------------------------------------------- 1 | # Gráfico SVG 2 | 3 | > Este exemplo mostra uma combinação de componente personalizado, dado computado, vínculo bidirecional e suporte a SVG. 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/examples/todomvc.md: -------------------------------------------------------------------------------- 1 | # TodoMVC 2 | 3 | > Esta é uma implementação TodoMVC totalmente compatível com especificações em menos de 120 linhas efetivas de JavaScript (excluindo comentários e linhas em branco). 4 | 5 | :::warning Aviso 6 | Observe que, se o seu navegador estiver configurado para bloquear dados/_cookies_ de terceiros, o exemplo abaixo não funcionará, pois os dados do **localStorage** não serão salvos. 7 | ::: 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/examples/tree-view.md: -------------------------------------------------------------------------------- 1 | # Visualização em Árvore 2 | 3 | > Exemplo de implementação de visualização em árvore mostrando o uso recursivo de componentes. 4 | 5 | -------------------------------------------------------------------------------- /src/guide/a11y-standards.md: -------------------------------------------------------------------------------- 1 | # Padrões 2 | 3 | A Iniciativa de Acessibilidade Web (WAI) do Consórcio da World Wide Web (W3C) desenvolve padrões de acessibilidade web para diferentes componentes: 4 | 5 | - [Diretrizes de Acessibilidade do Agente do Usuário (UAAG)](https://www.w3.org/WAI/standards-guidelines/uaag/) 6 | - Browsers web e players de mídia, incluindo alguns aspectos de tecnologias assistivas 7 | - [Diretrizes de Acessibilidade da Ferramenta de Autoria (ATAG)](https://www.w3.org/WAI/standards-guidelines/atag/) 8 | - Ferramentas de autoria 9 | - [Diretrizes de Acessibilidade de Conteúdo da Web (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) 10 | - Conteúdo Web - usado por desenvolvedores, ferramentas de autoria e ferramentas de avaliação de acessibilidade 11 | 12 | ## Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) 13 | 14 | [WCAG 2.1](https://www.w3.org/TR/WCAG21/) estende-se a partir do [WCAG 2.0](https://www.w3.org/TR/WCAG20/) e permite a implementação de novas tecnologias, abordando as mudanças da web. O W3C encoraja o uso da versão mais atual do WCAG ao desenvolver ou atualizar as políticas de acessibilidade Web. 15 | 16 | ### Quatro Princípios Orientadores Principais da WCAG 2.1 (POUR): 17 | 18 | - [Perceptível](https://www.w3.org/TR/WCAG21/#perceivable) 19 | - Os usuários devem ser capazes de perceber a informação sendo apresentada 20 | - [Operável](https://www.w3.org/TR/WCAG21/#operable) 21 | - Formulários, controles e navegação da interface são operáveis 22 | - [Compreensível](https://www.w3.org/TR/WCAG21/#understandable) 23 | - As informações e a operação da interface do usuário devem ser compreensíveis para todos os usuários 24 | - [Robusto](https://www.w3.org/TR/WCAG21/#robust) 25 | - Os usuários devem ser capazes de acessar o conteúdo conforme as tecnologias avançam 26 | 27 | ### Iniciativa de Acessibilidade da Web - Aplicativos de Internet Rica Acessíveis (WAI-ARIA) 28 | 29 | O WAI-ARIA do W3C fornece orientação sobre como construir conteúdo dinâmico e controles de interface de usuário avançados. 30 | 31 | - [Aplicativos de Internet Rica Acessíveis (WAI-ARIA) 1.2](https://www.w3.org/TR/wai-aria-1.2/) 32 | - [WAI-ARIA Práticas de Autoria 1.2](https://www.w3.org/TR/wai-aria-practices-1.2/) 33 | -------------------------------------------------------------------------------- /src/guide/component-edge-cases.md: -------------------------------------------------------------------------------- 1 | # Lidando com Casos Extremos 2 | 3 | > Esta página assume que você já leu o [Básico sobre Componentes](component-basics.md). Leia lá primeiro se o desenvolvimento de componentes for novidade para você. 4 | 5 | ::: tip NOTA 6 | Todos os recursos dessa página documentam o tratamento de casos extremos, ou seja, situações incomuns que às vezes exigem que as regras do Vue sejam levemente contornadas. Observe, entretanto, que todos eles têm desvantagens ou situações onde podem ser perigosos. Estes detalhes são expostos em cada caso, portanto, lembre-se ao decidir usar cada recurso. 7 | ::: 8 | 9 | ## Controlando Atualizações 10 | 11 | Graças ao sistema de reatividade do Vue, ele sempre sabe quando atualizar a interface (se você usá-lo corretamente). Porém, há casos incomuns em que possa querer forçar uma atualização, mesmo que nenhum dado reativo tenha mudado. Também há casos em que possa querer prevenir atualizações desnecessárias. 12 | 13 | ### Forçando uma Atualização 14 | 15 | Se você precisar forçar uma atualização no Vue, em 99,99% dos casos você cometeu um erro em algum lugar. Por exemplo, você pode estar contando com um estado que não é monitorado pelo sistema de reatividade do Vue, por exemplo, contando com uma propriedade `data` adicionada após a criação do componente. 16 | 17 | No entanto, se você descartou a opção acima e se encontra nessa situação extremamente rara de ter que forçar manualmente uma atualização, você pode fazer isso com [`$forceUpdate`](../api/instance-methods.html#forceupdate). 18 | 19 | ### Componentes Estáticos Econômicos com `v-once` 20 | 21 | Renderizar elementos HTML puros é algo bem rápido no Vue mas, algumas vezes, você pode ter um componente que possui **uma grande quantidade** de conteúdo estático. Nesses casos, você pode garantir que ele seja avaliado somente uma vez e então armazenado em cache, adicionando a diretiva `v-once` ao elemento raiz, como mostrado abaixo: 22 | 23 | ```js 24 | app.component('terms-of-service', { 25 | template: ` 26 |
27 |

Termos de serviço

28 | ... muito conteúdo estático ... 29 |
30 | `, 31 | }) 32 | ``` 33 | 34 | ::: tip DICA 35 | Como de costume, tente não abusar deste padrão. Embora seja conveniente nos raros casos em que você precisar renderizar muito conteúdo estático, isso simplesmente não é necessário a menos que você realmente observe uma renderização lenta - além disso, pode causar muita confusão posteriormente. Por exemplo, imagine outro desenvolvedor que não está familiarizado com o `v-once` ou simplesmente não o notou no _template_. Ele pode vir a perder horas tentando entender o porquê de o _template_ não estar sendo atualizado. 36 | ::: 37 | -------------------------------------------------------------------------------- /src/guide/component-template-refs.md: -------------------------------------------------------------------------------- 1 | # *refs* de Template 2 | 3 | > Esta página assume que você já leu o [Básico de Componentes](component-basics.md). Leia lá primeiro se você for novo em componentes. 4 | 5 | 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: 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | Isso pode ser útil quando você deseja, por exemplo, de forma programática, aplicar o _focus_ nesse _input_ na montagem do componente: 12 | 13 | ```js 14 | const app = Vue.createApp({}) 15 | 16 | app.component('base-input', { 17 | template: ` 18 | 19 | `, 20 | methods: { 21 | focusInput() { 22 | this.$refs.input.focus() 23 | } 24 | }, 25 | mounted() { 26 | this.focusInput() 27 | } 28 | }) 29 | ``` 30 | 31 | 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: 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | ```js 38 | this.$refs.usernameInput.focusInput() 39 | ``` 40 | 41 | ::: warning Atenção 42 | `$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` de dentro de _templates_ ou dados computados. 43 | ::: 44 | 45 | **Veja também**: [Usando _refs_ de _templates_ na Composition API](/guide/composition-api-template-refs.html#template-refs) 46 | -------------------------------------------------------------------------------- /src/guide/composition-api-lifecycle-hooks.md: -------------------------------------------------------------------------------- 1 | # Gatilhos de Ciclo de Vida 2 | 3 | > Esta seção usa a sintaxe de [componente single-file](single-file-component.html) para exemplos de código 4 | 5 | > Este guia assume que você já leu a [Introdução à API de Composição](composition-api-introduction.html) e [Fundamentos da Reatividade](reactivity-fundamentals.html). Leia elas primeiro se você for novo no assunto de API de Composição. 6 | 7 | Assista à um vídeo grátis sobre Gatilhos de Ciclo de Vida no Vue Mastery 8 | 9 | Você pode acessar um gatilho de ciclo de vida de um componente prefixando o gatilho com "on". 10 | 11 | A tabela a seguir contém como os gatilhos de ciclo de vida são chamados dentro de [setup()](composition-api-setup.html): 12 | 13 | | API de Opções | Gatilho dentro de `setup` | 14 | | ----------------- | -------------------------- | 15 | | `beforeCreate` | Não é necessário\* | 16 | | `created` | Não é necessário\* | 17 | | `beforeMount` | `onBeforeMount` | 18 | | `mounted` | `onMounted` | 19 | | `beforeUpdate` | `onBeforeUpdate` | 20 | | `updated` | `onUpdated` | 21 | | `beforeUnmount` | `onBeforeUnmount` | 22 | | `unmounted` | `onUnmounted` | 23 | | `errorCaptured` | `onErrorCaptured` | 24 | | `renderTracked` | `onRenderTracked` | 25 | | `renderTriggered` | `onRenderTriggered` | 26 | | `activated` | `onActivated` | 27 | | `deactivated` | `onDeactivated` | 28 | 29 | :::tip Nota 30 | Visto que `setup` é executado em torno dos gatilhos de ciclo de vida `beforeCreate` e `created`, você não precisa defini-los explicitamente. Em outras palavras, qualquer código que seria escrito dentro desses gatilhos deve ser escrito diretamente na função `setup`. 31 | ::: 32 | 33 | Essas funções aceitam um retorno de chamada que será executado quando o gatilho for chamado pelo componente: 34 | 35 | ```js 36 | // MyBook.vue 37 | 38 | export default { 39 | setup() { 40 | // mounted 41 | onMounted(() => { 42 | console.log('Componente montado!') 43 | }) 44 | } 45 | } 46 | ``` 47 | -------------------------------------------------------------------------------- /src/guide/contributing/doc-style-guide.md: -------------------------------------------------------------------------------- 1 | # Guia de Estilização da Documentação 2 | 3 | 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. 4 | 5 | ## Alertas 6 | 7 | VuePress oferece um _plug-in_ de contêiner personalizado para blocos de alerta. Existem quatro tipos: 8 | 9 | - **Informações**: Para exibir informações neutras 10 | - **Dica**: Para exibir informações positivas e incentivadas 11 | - **Aviso**: Para exibir informações que os usuários devem estar cientes, pois há um baixo a moderado risco 12 | - **Perigo**: Para exibir informações negativas e/ou de alto risco para o usuário 13 | 14 | **Markdown de Exemplo** 15 | 16 | ``` 17 | ::: info 18 | Você pode encontrar mais informações neste _site_. 19 | ::: 20 | 21 | ::: tip 22 | Esta é uma ótima dica para se lembrar! 23 | ::: 24 | 25 | ::: warning 26 | Isso é algo para ser cauteloso. 27 | ::: 28 | 29 | ::: danger DANGER 30 | Isso é algo que não recomendamos. Use por sua conta e risco. 31 | ::: 32 | ``` 33 | 34 | **Resultado Renderizado** 35 | 36 | ::: info 37 | Você pode encontrar mais informações neste _site_. 38 | ::: 39 | 40 | ::: tip 41 | Esta é uma ótima dica para se lembrar! 42 | ::: 43 | 44 | ::: warning 45 | Isso é algo para ser cauteloso. 46 | ::: 47 | 48 | ::: danger DANGER 49 | Isso é algo que não recomendamos. Use por sua conta e risco. 50 | ::: 51 | 52 | ## Blocos de Código 53 | 54 | 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: 55 | 56 | **Markdown de Exemplo** 57 | 58 | ```` 59 | ```js 60 | export default { 61 | name: 'MyComponent' 62 | } 63 | ``` 64 | ```` 65 | 66 | **Resultado Renderizado** 67 | 68 | ```js 69 | export default { 70 | name: 'MyComponent' 71 | } 72 | ``` 73 | 74 | ### Destacando Linhas 75 | 76 | Para adicionar destaques de linha aos blocos de código, você precisa acrescentar o número da linha entre chaves. 77 | 78 | #### Linha Única 79 | 80 | **Markdown de Exemplo** 81 | 82 | ```` 83 | ```js{2} 84 | export default { 85 | name: 'MyComponent', 86 | props: { 87 | type: String, 88 | item: Object 89 | } 90 | } 91 | ``` 92 | ```` 93 | 94 | **Resultado Renderizado** 95 | 96 | ```js{2} 97 | export default { 98 | name: 'MyComponent', 99 | props: { 100 | type: String, 101 | item: Object 102 | } 103 | } 104 | ``` 105 | 106 | #### Grupos de Linhas 107 | 108 | **Markdown de Exemplo** 109 | 110 | ```` 111 | ```js{4-5} 112 | export default { 113 | name: 'MyComponent', 114 | props: { 115 | type: String, 116 | item: Object 117 | } 118 | } 119 | ``` 120 | ```` 121 | 122 | **Resultado Renderizado** 123 | 124 | ```js{4-5} 125 | export default { 126 | name: 'MyComponent', 127 | props: { 128 | type: String, 129 | item: Object 130 | } 131 | } 132 | ``` 133 | 134 | #### Múltiplas Seções 135 | 136 | **Markdown de Exemplo** 137 | 138 | ```` 139 | ```js{2,4-5} 140 | export default { 141 | name: 'MyComponent', 142 | props: { 143 | type: String, 144 | item: Object 145 | } 146 | } 147 | ``` 148 | ```` 149 | 150 | **Resultado Renderizado** 151 | 152 | ```js{2,4-5} 153 | export default { 154 | name: 'MyComponent', 155 | props: { 156 | type: String, 157 | item: Object 158 | } 159 | } 160 | ``` 161 | -------------------------------------------------------------------------------- /src/guide/migration/array-refs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Array Refs no v-for 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # {{ $frontmatter.title }} 8 | 9 | No Vue 2, usar o atributo `ref` dentro do `v-for` irá preencher a propriedade `$refs` correspondente com um Array de `refs`. Este comportamento se torna ambíguo e ineficiente quando existem `v-for` aninhados. 10 | 11 | No Vue 3, tal uso não mais criará automaticamente um Array em `$refs`. Para recuperar várias referências de uma única ligação, vincule `ref` à uma função que forneça mais flexibilidade (este é um novo recurso): 12 | 13 | ```html 14 |
15 | ``` 16 | 17 | Com API de Opções: 18 | 19 | ```js 20 | export default { 21 | data() { 22 | return { 23 | itemRefs: [] 24 | } 25 | }, 26 | methods: { 27 | setItemRef(el) { 28 | if (el) { 29 | this.itemRefs.push(el) 30 | } 31 | } 32 | }, 33 | beforeUpdate() { 34 | this.itemRefs = [] 35 | }, 36 | updated() { 37 | console.log(this.itemRefs) 38 | } 39 | } 40 | ``` 41 | 42 | Com API de Composição: 43 | 44 | ```js 45 | import { onBeforeUpdate, onUpdated } from 'vue' 46 | 47 | export default { 48 | setup() { 49 | let itemRefs = [] 50 | const setItemRef = el => { 51 | if (el) { 52 | itemRefs.push(el) 53 | } 54 | } 55 | onBeforeUpdate(() => { 56 | itemRefs = [] 57 | }) 58 | onUpdated(() => { 59 | console.log(itemRefs) 60 | }) 61 | return { 62 | setItemRef 63 | } 64 | } 65 | } 66 | ``` 67 | 68 | Observe que: 69 | 70 | - `itemRefs` não precisa ser um Array: também pode ser um objeto onde as referências são definidas por suas chaves de iteração. 71 | 72 | - Isso também permite que `itemRefs` sejam reativos e observados, se necessário. 73 | 74 | ## Estratégia de Migração 75 | 76 | [Sinalizadores na compilação de migração:](migration-build.html#configuracao-de-compatibilidade) 77 | 78 | - `V_FOR_REF` 79 | - `COMPILER_V_FOR_REF` 80 | -------------------------------------------------------------------------------- /src/guide/migration/attrs-includes-class-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: $attrs inclui classe e estilo 3 | badges: 4 | - breaking 5 | --- 6 | 7 | # `$attrs` inclui `class` & `style` 8 | 9 | ## Visão Geral 10 | 11 | `$attrs` agora contém _todos_ atributos passados ​​para um componente, incluindo `class` e `style`. 12 | 13 | ## Comportamento v2.x 14 | 15 | Os atributos `class` e `style` recebem algum tratamento especial na implementação do DOM virtual do Vue 2. Por essa razão, eles _não_ são incluídos em `$attrs`, enquanto todos os outros atributos são. 16 | 17 | Um efeito colateral disso se manifesta ao usar `inheritAttrs: false`: 18 | 19 | - Atributos em `$attrs` não são mais adicionados automaticamente ao elemento raiz, deixando para o desenvolvedor decidir onde adicioná-los. 20 | - Mas `class` e `style`, não sendo parte de `$attrs`, ainda serão aplicados ao elemento raiz do componente: 21 | 22 | ```vue 23 | 28 | 33 | ``` 34 | 35 | quando usado assim: 36 | 37 | ```html 38 | 39 | ``` 40 | 41 | ...irá gerar este HTML: 42 | 43 | ```html 44 | 47 | ``` 48 | 49 | ## Comportamento v3.x 50 | 51 | `$attrs` contém _todos_ atributos, o que facilita a aplicação de todos eles a um elemento diferente. O exemplo acima agora gera o seguinte HTML: 52 | 53 | ```html 54 | 57 | ``` 58 | 59 | ## Estratégia de Migração 60 | 61 | Em componentes que usam `inheritAttrs: false`, certifique-se de que o estilo ainda funcione como pretendido. Se você confiava anteriormente no comportamento especial de `class` e `style`, alguns visuais podem ser quebrados, pois esses atributos agora podem ser aplicados a outro elemento. 62 | 63 | [Sinalizador na compilação de migração: `INSTANCE_ATTRS_CLASS_STYLE`](migration-build.html#configuracao-de-compatibilidade) 64 | 65 | ## Veja também 66 | 67 | - [RFC Relevante](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md) 68 | - [Guia de migração - `$listeners` removido](./listeners-removed.md) 69 | - [Guia de migração - Nova opção _Emits_](./emits-option.md) 70 | - [Guia de migração - modificador `.native` removido](./v-on-native-modifier-removed.md) 71 | - [Guia de migração - Mudanças na API de Funções de Renderização](./render-function-api.md) 72 | -------------------------------------------------------------------------------- /src/guide/migration/children.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - removed 4 | --- 5 | 6 | # $children 7 | 8 | ## Visão Geral 9 | 10 | A propriedade de instância `$children` foi removida do Vue 3.0 e não é mais suportada. 11 | 12 | ## Sintaxe v2.x 13 | 14 | Na v2.x, os desenvolvedores podiam acessar componentes filhos diretos da instância atual com `this.$children`: 15 | 16 | ```vue 17 | 23 | 24 | 36 | ``` 37 | 38 | ## Atualização v3.x 39 | 40 | Na v3.x, a propriedade `$children` foi removida e não é mais suportada. Em vez disso, se você precisar acessar uma instância de componente filho, recomendamos usar [$refs](/guide/component-template-refs.html#refs-de-template). 41 | 42 | ## Estratégia de Migração 43 | 44 | [Sinalizador na compilação de migração: `INSTANCE_CHILDREN`](migration-build.html#configuracao-de-compatibilidade) 45 | -------------------------------------------------------------------------------- /src/guide/migration/emits-option.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Opção emits 3 | badges: 4 | - new 5 | --- 6 | 7 | # Opção `emits` 8 | 9 | ## Visão Geral 10 | 11 | O Vue 3 agora oferece uma opção `emits`, semelhante à opção `props` existente. Esta opção pode ser usada para definir os eventos que um componente pode emitir para seu pai. 12 | 13 | ## Comportamento v2.x 14 | 15 | No Vue 2, você pode definir as props que um componente recebe, mas não pode declarar quais eventos ele pode emitir: 16 | 17 | ```vue 18 | 24 | 29 | ``` 30 | 31 | ## Comportamento v3.x 32 | 33 | Semelhante a props, os eventos que o componente emite agora podem ser definidos com a opção `emits`: 34 | 35 | ```vue 36 | 42 | 48 | ``` 49 | 50 | A opção também aceita um objeto, que permite ao desenvolvedor definir validadores para os argumentos que são passados ​​com o evento emitido, semelhante aos validadores nas definições de `props`. 51 | 52 | Para obter mais informações sobre isso, leia a [documentação da API para este recurso](../../api/options-data.md#emits). 53 | 54 | ## Estratégia de Migração 55 | 56 | É altamente recomendado que você documente todos os eventos emitidos por cada um de seus componentes usando `emits`. 57 | 58 | Isso é especialmente importante por causa da [remoção do modificador `.native`](./v-on-native-modifier-removed.md). Quaisquer escutadores para eventos que não são declarados com `emits` agora serão incluídos no `$attrs` do componente, que por padrão será vinculado ao nó raiz do componente. 59 | 60 | ### Exemplo 61 | 62 | Para componentes que reemitem eventos nativos para seus pais, isso agora levaria ao disparo de dois eventos: 63 | 64 | ```vue 65 | 68 | 73 | ``` 74 | 75 | Quando um pai escuta o evento `click` no componente: 76 | 77 | ```html 78 | 79 | ``` 80 | 81 | agora seria acionado _duas vezes_: 82 | 83 | - Uma vez de `$emit()`. 84 | - Uma vez de um escutador de evento nativo aplicado ao elemento raiz. 85 | 86 | Aqui você tem duas opções: 87 | 88 | 1. Declare corretamente o evento `click`. Isso é útil se você realmente adicionar alguma lógica a esse manipulador de eventos em ``. 89 | 2. Remova a reemissão do evento, pois o pai agora pode escutar o evento nativo facilmente, sem adicionar `.native`. Adequado quando você realmente apenas reemite o evento de qualquer maneira. 90 | 91 | ## Veja também 92 | 93 | - [RFC relevante](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md) 94 | - [Guia de migração - modificador `.native` removido](./v-on-native-modifier-removed.md) 95 | - [Guia de migração - `$listeners` removido](./listeners-removed.md) 96 | - [Guia de migração - `$attrs` inclui `class` e `style`](./attrs-includes-class-style.md) 97 | - [Guia de migração - Mudanças na API de Funções de Renderização](./render-function-api.md) 98 | -------------------------------------------------------------------------------- /src/guide/migration/filters.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - removed 4 | --- 5 | 6 | # Filtros 7 | 8 | ## Visão Geral 9 | 10 | Filtros foram removidos do Vue 3.0 e não são mais suportados. 11 | 12 | ## Sintaxe v2.x 13 | 14 | Na v2.x, desenvolvedores poderiam utilizar `filters` para aplicar formatações comuns em texto. 15 | 16 | Por exemplo: 17 | 18 | ```html 19 | 23 | 24 | 39 | ``` 40 | 41 | Embora isso pareça ser uma conveniência, requer uma sintaxe personalizada que quebra a suposição de que as expressões entre chaves sejam "apenas JavaScript", o que tem custos de aprendizado e implementação. 42 | 43 | ## Atualização v3.x 44 | 45 | Na v3.x, `filters` foram removidos e não mais suportados. Ao invés disso, recomendamos utilizar chamadas à metodos ou propriedades computadas. 46 | 47 | Utilizando o exemplo acima, aqui está um exemplo de como isso pode ser implementado. 48 | 49 | ```html 50 | 54 | 55 | 70 | ``` 71 | 72 | ## Estratégia de Migração 73 | 74 | Ao invés de utilizar filtros, recomendamos substituí-los por propriedades computadas ou métodos. 75 | 76 | [Sinalizadores na compilação de migração:](migration-build.html#configuracao-de-compatibilidade) 77 | 78 | - `FILTERS` 79 | - `COMPILER_FILTERS` 80 | 81 | ### Filtros Globais 82 | 83 | Se você estiver usando filtros que foram registrados globalmente e usados em todo o seu aplicativo, provavelmente não é conveniente substituí-los por propriedades computadas ou métodos em cada componente individual. 84 | 85 | Em vez disso, você pode disponibilizar seus filtros globais para todos os componentes por meio de [propriedades globais](../../api/application-config.html#globalproperties): 86 | 87 | ```js 88 | // main.js 89 | const app = createApp(App) 90 | 91 | app.config.globalProperties.$filters = { 92 | currencyUSD(value) { 93 | return '$' + value 94 | } 95 | } 96 | ``` 97 | 98 | Então você pode corrigir todos os _templates_ usando este objeto `$filters` assim: 99 | 100 | ```html 101 | 105 | ``` 106 | 107 | Observe que, com essa abordagem, você só pode usar métodos, não propriedades computadas, quais só fazem sentido quando definidas no contexto de um componente individual. -------------------------------------------------------------------------------- /src/guide/migration/fragments.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - new 4 | --- 5 | 6 | # Fragmentos 7 | 8 | ## Visão Geral 9 | 10 | No Vue 3, os componentes agora tem suporte oficial para componentes com nós multi-raiz, ou seja, fragmentos! 11 | 12 | ## Sintaxe v2.x 13 | 14 | Na v2.x, componentes multi-raiz não eram suportados e iriam emitir um aviso no caso de um usuário acidentalmente criar um. Como resultado, vários componentes são envolvidos em uma única `
` de forma a corrigir esse erro. 15 | 16 | ```html 17 | 18 | 25 | ``` 26 | 27 | ## Sintaxe v3.x 28 | 29 | Na v3.x, componentes agora podem ter vários nós raiz! No entanto, isso requer aos desenvolvedores definir explicitamente onde os atributos deveriam ser distribuídos. 30 | 31 | ```html 32 | 33 | 38 | ``` 39 | 40 | Para mais informações sobre como a herança de atributos funciona, veja [Atributos Não-Propriedades](/guide/component-attrs.html). 41 | -------------------------------------------------------------------------------- /src/guide/migration/inline-template-attribute.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # Atributo _Inline Template_ 7 | 8 | ## Visão Geral 9 | 10 | O suporte ao [recurso _inline-template_](https://br.vuejs.org/v2/guide/components-edge-cases.html#Templates-Inline) foi removido. 11 | 12 | ## Sintaxe v2.x 13 | 14 | Na versão 2.x, o Vue disponibilizava o atributo `inline-template` em componentes filhos para usar seu conteúdo interno como _template_ ao invés de o tratar como conteúdo distribuído. 15 | 16 | ```html 17 | 18 |
19 |

Estes são compilados como template do próprio componente.

20 |

Não como conteúdo da transclusão do componente pai.

21 |
22 | 23 | ``` 24 | 25 | ## Sintaxe v3.x 26 | 27 | Esta funcionalidade não receberá mais suporte. 28 | 29 | ## Estratégia de Migração 30 | 31 | A maioria dos casos de uso de `inline-template` assume um ambiente sem ferramentas de compilação, onde todos os _templates_ são escritos diretamente dentro da página HTML. 32 | 33 | [Sinalizador na compilação de migração: `COMPILER_INLINE_TEMPLATE`](migration-build.html#configuracao-de-compatibilidade) 34 | 35 | ### Opção #1: Utilize a tag ` 43 | ``` 44 | 45 | E no componente, aponte para o _template_ utilizando um seletor: 46 | 47 | ```js 48 | const MyComp = { 49 | template: '#my-comp-template' 50 | // ... 51 | } 52 | ``` 53 | 54 | Isto não requer nenhuma configuração de compilação, funciona em todos os navegadores, não está sujeito a quaisquer limitações da análise de HTML no-DOM (ex.: você pode usar nomes de propriedades em camelCase) e fornece destaque de sintaxe na maioria das IDEs. Em frameworks tradicionais que trabalham no lado do servidor, estes _templates_ podem ser divididos em partes de _templates_ do servidor (incluídas no _template_ HTML principal) para uma melhor manutenção. 55 | 56 | ### Opção #2: _Slot_ _Default_ 57 | 58 | Um componente que anteriormente utilizava `inline-template` também pode ser refatorado utilizando o _slot_ _default_ - o que torna a definição do escopo de dados mais explícita enquanto preserva a conveniência de escrever o conteúdo filho _inline_: 59 | 60 | ```html 61 | 62 | 63 | {{ msg }} {{ childState }} 64 | 65 | 66 | 67 | 68 | {{ parentMsg }} {{ childState }} 69 | 70 | ``` 71 | 72 | O componente filho, ao invés de não fornecer nenhum _template_, agora deve renderizar o _slot_ _default_\*: 73 | 74 | ```html 75 | 79 | 82 | ``` 83 | 84 | > - Nota: na versão 3.x, _slots_ podem ser renderizados como raiz com suporte nativo a [fragmentos](/guide/migration/fragments)! 85 | -------------------------------------------------------------------------------- /src/guide/migration/key-attribute.md: -------------------------------------------------------------------------------- 1 | --- 2 | badges: 3 | - breaking 4 | --- 5 | 6 | # Atributo `key` 7 | 8 | ## Visão Geral 9 | 10 | - **NOVO:** `key`s não são mais necessárias em _branches_ `v-if`/`v-else`/`v-else-if`, já que o Vue agora gera automaticamente `key`s únicas. 11 | - **BREAKING:** Se você informar `key`s manualmente, então cada _branch_ deve ter uma `key` única. Você não pode mais usar intencionalmente a mesma `key` para forçar reuso de _branch_. 12 | - **BREAKING:** `key`s de `