{
  "version": 1.1,
  "tags": [
    {
      "name": "Transition",
      "description": {
        "kind": "markdown",
        "value": "\nFornece efeitos de transição animados para um **único** elemento ou componente.\n\n- **Propriedades**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * Usado para gerar automaticamente nomes de classes CSS de transição.\n     * exemplo `name: 'fade'` expandirá automaticamente para `.fade-enter`,\n     * `.fade-enter-active`, etc.\n     */\n    name?: string\n    /**\n     * Decide aplicar classes CSS de transição.\n     * Padrão: true\n     */\n    css?: boolean\n    /**\n     * Especifica o tipo de eventos de transição à aguardar\n     * para determinar a transição e o tempo.\n     * O comportamento padrão é detetar automaticamente o tipo\n     * que tiver a maior duração.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * Especifica durações explícitas para as transições.\n     * O comportamento padrão é esperar pelo primeiro evento `transitionend`\n     * ou `animationend` no elemento de transição raiz.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * Controla a sequência de tempo das transições que entram ou saem.\n     * O comportamento padrão é simultâneo.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * Define aplicar a transição na interpretação inicial.\n     * Padrão: false\n     */\n    appear?: boolean\n\n    /**\n     * Propriedades para personalizar as classes de transição.\n     * Use kebab-case nos modelos de marcação, exemplo enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **Eventos**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (apenas `v-show`)\n  - `@appear-cancelled`\n\n- **Exemplo**\n\n  Elemento simples:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">conteúdo alternado</div>\n  </Transition>\n  ```\n\n  Forçar uma transição mudando o atributo `key`:\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  Componente dinâmico, com o modo de transição + animação ao aparecer:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  Ouvir eventos de transição:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">conteúdo ativado</div>\n  </Transition>\n  ```\n\n- **Consultar também:** [Guia - Transição](https://pt.vuejs.org/guide/built-ins/transition.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#transition"
    },
    {
      "name": "TransitionGroup",
      "description": {
        "kind": "markdown",
        "value": "\nFornece efeitos de transição para **múltiplos** elementos ou componentes numa lista.\n\n- **Propriedades**\n\n  `<TransitionGroup>` aceita as mesmas propriedades que o `<Transition>` exceto `mode`, e mais duas propriedades adicionais:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * Se não definido, desenha um fragmento.\n     */\n    tag?: string\n    /**\n     * Para personalizar as classes CSS aplicadas durante as transições de movimento.\n     * Use kebab-case em modelos de marcação, exemplo move-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **Eventos**\n\n  `<TransitionGroup>` emite os mesmos eventos que `<Transition>`.\n\n- **Detalhes**\n\n  Por padrão, `<TransitionGroup>` não desenha um elemento de DOM que envolve, mas pode ser definido através da propriedade `tag`.\n\n  Note que todo filho num `<transition-group>` deve ser [**identificado unicamente**](https://pt.vuejs.org/guide/essentials/list.html#maintaining-state-with-key) para que as animações funcionem apropriadamente.\n\n  `<TransitionGroup>` suporta transições de movimento através de transformações de CSS. Quando a posição dum filho na tela é mudada após uma atualização, será aplicada uma classe de movimento CSS (gerada automaticamente pelo atributo `name` ou configurada pela propriedade `move-class`). Se a propriedade de CSS `transform` é passível de transição quando a classe de movimento é aplicada, o elemento será suavemente animado até o seu destino usando a [técnica FLIP](https://aerotwist.com/blog/flip-your-animations/).\n\n- **Exemplo**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **Consultar também:** [Guia - `TransitionGroup`](https://pt.vuejs.org/guide/built-ins/transition-group.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#transitiongroup"
    },
    {
      "name": "KeepAlive",
      "description": {
        "kind": "markdown",
        "value": "\nArmazena para consulta imediata os componentes alternados dinamicamente envolvidos dentro.\n\n- **Propriedades**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * Se especificado, apenas componentes com nomes correspondidos\n     * pelo `include` estarão na memória de consulta imediata.\n     */\n    include?: MatchPattern\n    /**\n     * Qualquer componente com um nome correspondidos pelo `exclude`\n     * não estarão na memória de consulta imediata.\n     */\n    exclude?: MatchPattern\n    /**\n     * O número máximo de instâncias de componente à armazenar\n     * na memória de consulta imediata.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **Detalhes**\n\n  Quando envolvido em torno dum componente dinâmico, `<KeepAlive>` armazena para consulta imediata as instâncias de componente inativo sem destruí-las.\n\n  Só pode existir uma instância de componente como filho direto de `<KeepAlive>` em qualquer momento.\n\n  Quando um componente é alternado dentro de `<KeepAlive>`, seus gatilhos de ciclo de vida `activated` e `deactivated` são invocados de acordo, fornecendo uma alternativa ao `mounted` e `unmounted`, que não são chamados. Isto aplica-se ao filho direto de `<KeepAlive>` e também a todos os seus descendentes.\n\n- **Exemplo**\n\n  Uso básico:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  Quando usado com os ramos `v-if` / `v-else`, só deve existir um componente desenhado de cada vez:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  Usado em conjunto com `<Transition>`:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  Usando `include` / `exclude`:\n\n  ```html\n  <!-- sequência de caracteres delimitada por vírgula -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- regex (use `v-bind`) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- vetor (use `v-bind`) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  Uso com `max`:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **Consultar também:** [Guia - `KeepAlive`](https://pt.vuejs.org/guide/built-ins/keep-alive.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#keepalive"
    },
    {
      "name": "Teleport",
      "description": {
        "kind": "markdown",
        "value": "\nDesenha o conteúdo da sua ranhura numa outra parte do DOM.\n\n- **Propriedades**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * Obrigatório. Específica o contentor alvo.\n     * Pode ser ou um seletor ou um elemento verdadeiro.\n     */\n    to: string | HTMLElement\n    /**\n     * Quando `true`, o conteúdo continuará na sua localização\n     * original ao invés de ser movido para o contentor alvo.\n     * Pode ser mudado dinamicamente.\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **Exemplo**\n\n  Especificando o contentor alvo:\n\n  ```html\n  <teleport to=\"#some-id\" />\n  <teleport to=\".some-class\" />\n  <teleport to=\"[data-teleport]\" />\n  ```\n\n  Desativar condicionalmente:\n\n  ```html\n  <teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </teleport>\n  ```\n\n- **Consultar também:** [Guia - `Teleport`](https://pt.vuejs.org/guide/built-ins/teleport.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#teleport"
    },
    {
      "name": "Suspense",
      "description": {
        "kind": "markdown",
        "value": "\nUsado para orquestrar dependências assíncronas encaixadas numa árvore de componente.\n\n- **Propriedades**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n  }\n  ```\n\n- **Eventos**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **Detalhes**\n\n  `<Suspense>` aceita duas ranhuras: a ranhura `#default` e a ranhura `#fallback`. Ele exibirá o conteúdo da ranhura de retorno (`#fallback`) enquanto desenha a ranhura padrão (`#default`) na memória.\n\n  Se encontrar dependências assíncronas ([Componentes Assíncronos](https://pt.vuejs.org/guide/components/async.html) e componentes com [`async setup()`](https://pt.vuejs.org/guide/built-ins/suspense.html#async-setup)) enquanto desenha a ranhura padrão, aguardará até todos serem resolvidos antes de exibir a ranhura padrão.\n\n- **Consultar também:** [Guia - `Suspense`](https://pt.vuejs.org/guide/built-ins/suspense.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#suspense"
    },
    {
      "name": "component",
      "description": {
        "kind": "markdown",
        "value": "\nUma \"meta componente\" para desenhar componentes ou elementos dinâmicos.\n\n- **Propriedades**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **Detalhes**\n\n  O verdadeiro componente à desenhar é determinado pela propriedade `is`.\n\n  - Quando `is` for uma sequência de caracteres, poderia ser ou nome dum marcador de HTML ou o nome dum componente registado.\n\n  - Alternativamente, `is` também pode ser diretamente vinculado à definição dum componente.\n\n- **Exemplo**\n\n  Interpretação dos componentes com nome registado (API de Opções):\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  Interpretação dos componentes com a definição (API de Composição com `<script setup></script>`):\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  </script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  Interpretação dos elementos de HTML:\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  Os todos os [componentes embutidos](./built-in-components) podem ser passados para `is`, mas devemos registá-los se quisermos passá-los pelo nome. Por exemplo:\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  O registo não é obrigatório se passarmos o próprio componente à `is` no lugar do seu nome, por exemplo no `<script setup>`.\n\n  Se `v-model` for usada num marcador `<component>`, o compilador do modelo de marcação a expandirá à uma propriedade `modelValue` e um ouvinte de evento `update:modelValue`, tal como faria com qualquer outro componente. No entanto, isto não será compatível com os elementos de HTML nativos, tais como `<input>` ou `<select>`. Como resultado, usar `v-model` com um elemento nativo criado dinamicamente não funcionará:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n  \n  const tag = ref('input')\n  const username = ref('')\n  </script>\n\n  <template>\n    <!-- Isto não funcionará porque 'input' é um elemento de HTML nativo -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  Na prática, este caso extremo não é comum, porque os campos de formulário nativos normalmente são envolvidos dentro de componentes em aplicações reais. Se precisarmos usar diretamente um elemento nativo então podemos dividir a `v-model` num atributo e evento manualmente.\n\n- **Consulte também** [Componentes Dinâmicos](https://pt.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
      },
      "attributes": [],
      "references": "api/built-in-special-elements.html#component"
    },
    {
      "name": "slot",
      "description": {
        "kind": "markdown",
        "value": "\nDenota as saídas de conteúdo da ranhura nos modelos de marcação\n\n- **Propriedades**\n\n  ```ts\n  interface SlotProps {\n    /**\n     * Quaisquer propriedades passadas ao <slot>\n     * são passadas como argumentos para ranhuras isoladas\n     */\n    [key: string]: any\n    /**\n     * Reservada para especificação do nome da ranhura.\n     */\n    name?: string\n  }\n  ```\n\n- **Detalhes**\n\n  O elemento `<slot>` pode usar o atributo `name` para especificar um nome de ranhura. Quando nenhum `name` for especificado, desenhará a ranhura padrão. Os atributos adicionais passados ao elemento da ranhura serão passados como propriedades de ranhura à ranhura isolada definida no pai.\n\n  O próprio elemento será substituído pelo seu conteúdo de ranhura correspondente.\n\n  Os elementos de `<slot>` nos modelos de marcação da Vue são compilados para JavaScript, então não são para serem confundidos com os [elementos `<slot>` nativos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).\n\n- **Consulte também** [Componentes - Ranhuras](https://pt.vuejs.org/guide/components/slots.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-special-elements.html#slot"
    },
    {
      "name": "template",
      "description": {
        "kind": "markdown",
        "value": "\nO marcador `<template>` é usado como um espaço reservado quando queremos usar uma diretiva embutida sem desenhar um elemento no DOM.\n\n- **Detalhes**\n\n  O manipulação especial do `<template>` apenas é acionada se for usada com uma destas diretivas:\n\n  - `v-if`, `v-else-if`, ou `v-else`\n  - `v-for`\n  - `v-slot`\n  \n  Se nenhuma destas diretivas estiver presente, então será desenhado como um [elemento `<template>` nativo](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template).\n\n  Um `<template>` com uma `v-for` também pode ter um [atributo `key`](https://pt.vuejs.org/api/built-in-special-attributes.html#key). Todos os outros atributos e diretivas serão descartados, porque não são relevantes sem um elemento correspondente.\n\n  Os componentes de ficheiro único usam [marcador `<template>` de alto nível](https://pt.vuejs.org/api/sfc-spec.html#language-blocks) para envolver todo o modelo de marcação. Este uso é separado do uso de `<template>` descrito acima. Este marcador de alto nível não faz parte do próprio modelo de marcação e suporta a sintaxe de modelo de marcação, tais como as diretivas.\n\n- **Consulte também**\n  - [Guia - `v-if` sobre o `<template>`](https://pt.vuejs.org/guide/essentials/conditional.html#v-if-on-template) \n  - [Guia - `v-for` sobre o `<template>`](https://pt.vuejs.org/guide/essentials/list.html#v-for-on-template) \n  - [Guia - Ranhuras Nomeadas](https://pt.vuejs.org/guide/components/slots.html#named-slots) \n"
      },
      "attributes": [],
      "references": "api/built-in-special-elements.html#template"
    }
  ],
  "globalAttributes": [
    {
      "name": "v-text",
      "description": {
        "kind": "markdown",
        "value": "Atualiza o conteúdo de texto do elemento.\n\n- **Espera:** `string`\n\n- **Detalhes**\n\n  `v-text` funciona definindo a propriedade [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) do elemento, sobrescreverá qualquer conteúdo existente dentro do elemento. Se precisarmos de atualizar a parte da `textContent`, devemos usar as [interpolações de bigodes](https://pt.vuejs.org/guide/essentials/template-syntax.html#text-interpolation).\n\n- **Exemplo**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- é o mesmo que -->\n  <span>{{msg}}</span>\n  ```\n\n- **Consultar também** [Sintaxe do Modelo de Marcação - Interpolação de Texto](https://pt.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)"
      },
      "references": "api/built-in-directives.html#v-text"
    },
    {
      "name": "v-html",
      "description": {
        "kind": "markdown",
        "value": "Atualiza a [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) do elemento.\n\n- **Espera:** `string`\n\n- **Detalhes:**\n\n  Os conteúdos da `v-html` são inseridos como HTML simples - a sintaxe de modelo de marcação da Vue não será processada. Se estivermos a tentar compor modelos de marcação usando  `v-html`, vamos tentar repensar a solução usando componentes.\n\n  :::warning NOTA DE SEGURANÇA\n  Interpretar dinamicamente HTML arbitrário na nossa aplicação pode ser muito perigoso porque pode facilmente conduzir a [ataques de XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Só deveríamos usar `v-html` sobre conteúdo confiável e **nunca** sobre conteúdo fornecido pelo utilizador.\n  :::\n\n  Nos [Componentes de Ficheiro Único](https://pt.vuejs.org/guide/scaling-up/sfc.html), os estilos `scoped` não serão aplicados ao conteúdo dentro de `v-html`, porque este HTML não é processado pelo compilador de modelos de marcação da Vue. Se quisermos mirar o conteúdo de `v-html` com CSS isolada, podemos usar os [módulos de CSS](./sfc-css-features#css-modules) ou elemento `<style>` adicional e global com uma estratégia de isolamento manual, como a BEM.\n\n- **Exemplo**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **Consultar também** [Sintaxe do Modelo de Marcação - HTML Puro](https://pt.vuejs.org/guide/essentials/template-syntax.html#raw-html)"
      },
      "references": "api/built-in-directives.html#v-html"
    },
    {
      "name": "v-show",
      "description": {
        "kind": "markdown",
        "value": "Alterna a visibilidade do elemento baseado na veracidade do valor da expressão.\n\n- **Espera:** `any`\n\n- **Detalhes**\n\n  `v-show` funciona definindo a propriedade de CSS `display` através de estilos em linha, e tentará respeitar o valor inicial da `display` quando o elemento estiver visível. Também aciona transições quando sua condição muda.\n\n- **Consultar também** [Interpretação Condicional - `v-show`](https://pt.vuejs.org/guide/essentials/conditional.html#v-show)"
      },
      "references": "api/built-in-directives.html#v-show"
    },
    {
      "name": "v-if",
      "description": {
        "kind": "markdown",
        "value": "Interpreta condicionalmente um elemento ou um fragmento de modelo de marcação baseado na veracidade do valor da expressão.\n\n- **Espera:** `any`\n\n- **Detalhes**\n\n  Quando um elemento de `v-if` é alternado, o elemento e suas diretivas ou componentes contidos são destruídos e construídos novamente. Se a condição inicial for falsa, então o conteúdo interno não será interpretado de todo.\n\n  Pode ser usada no `<template>` para denotar um bloco condicional contendo apenas texto ou vários elementos.\n\n  Esta diretiva aciona transições quando sua condição muda.\n\n  Quando usada em conjunto, a `v-if` tem uma prioridade superior à `v-for`. Não recomendados usar estas duas diretivas ao mesmo tempo sobre um elemento — consulte o [guia de interpretação de lista](https://pt.vuejs.org/guide/essentials/list.html#v-for-with-v-if) por mais detalhes.\n\n- **Consultar também** [Interpretação Condicional - `v-if`](https://pt.vuejs.org/guide/essentials/conditional.html#v-if)"
      },
      "references": "api/built-in-directives.html#v-if"
    },
    {
      "name": "v-else",
      "valueSet": "v",
      "description": {
        "kind": "markdown",
        "value": "Denota um \"bloco `else`\" para a `v-if` ou para uma cadeia `v-if` / `v-else-if`.\n\n- **Não espera expressões**\n\n- **Detalhes**\n\n  - Restrição: o anterior elemento irmão deve ter a `v-if` ou `v-else-if`.\n\n  - Pode ser usada no `<template>` para denotar um bloco condicional contendo apenas texto ou vários elementos.\n\n- **Exemplo**\n\n  ```html\n  <div v-if=\"Math.random() > 0.5\">\n    Now you see me\n  </div>\n  <div v-else>\n    Now you don't\n  </div>\n  ```\n\n- **Consultar também** [Interpretação Condicional - `v-else`](https://pt.vuejs.org/guide/essentials/conditional.html#v-else)"
      },
      "references": "api/built-in-directives.html#v-else"
    },
    {
      "name": "v-else-if",
      "description": {
        "kind": "markdown",
        "value": "Denota o \"bloco `else if`\" para a `v-if`. Pode ser encadeada.\n\n- **Espera:** `any`\n\n- **Detalhes**\n\n  - Restrição: o anterior elemento irmão deve ter a `v-if` ou `v-else-if`.\n\n  - Pode ser usada no `<template>` para denotar um bloco condicional contendo apenas texto ou vários elementos.\n\n- **Exemplo**\n\n  ```html\n  <div v-if=\"type === 'A'\">\n    A\n  </div>\n  <div v-else-if=\"type === 'B'\">\n    B\n  </div>\n  <div v-else-if=\"type === 'C'\">\n    C\n  </div>\n  <div v-else>\n    Not A/B/C\n  </div>\n  ```\n\n- **Consultar também** [Interpretação Condicional - `v-else-if`](https://pt.vuejs.org/guide/essentials/conditional.html#v-else-if)"
      },
      "references": "api/built-in-directives.html#v-else-if"
    },
    {
      "name": "v-for",
      "description": {
        "kind": "markdown",
        "value": "Interpreta o elemento ou bloco de modelo de marcação várias vezes baseada na fonte dos dados.\n\n- **Espera:** `Array | Object | number | string | Iterable`\n\n- **Detalhes**\n\n  O valor da diretiva deve usar a sintaxe especial `alias in expression` para fornecer um pseudónimo para o elemento atual a ser iterado:\n\n  ```html\n  <div v-for=\"item in items\">\n    {{ item.text }}\n  </div>\n  ```\n\n  Alternativamente, também podemos especificar um pseudónimo para o índice (ou a chave se usada sobre um objeto):\n\n  ```html\n  <div v-for=\"(item, index) in items\"></div>\n  <div v-for=\"(value, key) in object\"></div>\n  <div v-for=\"(value, name, index) in object\"></div>\n  ```\n\n  O comportamento padrão da `v-for` tentará remendar os elementos no lugar sem movê-los. Para forçar a reordenação de elementos, devemos fornecer uma sugestão de ordenação com o atributo especial `key`:\n\n  ```html\n  <div v-for=\"item in items\" :key=\"item.id\">\n    {{ item.text }}\n  </div>\n  ```\n\n  `v-for` também pode trabalhar com valores que implementam o [Protocolo Iterável](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol), incluindo os `Map` e `Set` nativos.\n\n- **Consultar também**\n  - [Interpretação de Lista](https://pt.vuejs.org/guide/essentials/list.html)"
      },
      "references": "api/built-in-directives.html#v-for"
    },
    {
      "name": "v-on",
      "description": {
        "kind": "markdown",
        "value": "Anexa um ouvinte de evento ao elemento.\n\n- **Atalho:** `@`\n\n- **Espera:** `Function | Inline Statement | Object (sem argumento)`\n\n- **Argumento:** `event` (opcional se estivermos usando a sintaxe de Objeto)\n\n- **Modificadores**\n\n  - `.stop` - chama `event.stopPropagation()`.\n  - `.prevent` - chama `event.preventDefault()`.\n  - `.capture` - adiciona ouvinte de evento no modo de captura.\n  - `.self` - apenas aciona o manipulador se o evento fosse despachado a partir deste elemento.\n  - `.{keyAlias}` - apenas aciona o manipulador sobre certas teclas.\n  - `.once` - aciona o manipulador no máximo uma vez.\n  - `.left` - apenas aciona o manipulador para os eventos de rato do botão esquerdo.\n  - `.right` - apenas aciona o manipulador para os eventos de rato do botão direito.\n  - `.middle` - apenas aciona o manipulador para os eventos de rato do botão do meio.\n  - `.passive` - anexa um evento de DOM com `{ passive: true }`.\n\n- **Detalhes**\n\n  O tipo de evento é denotado pelo argumento. A expressão pode ser um nome de método, uma declaração em linha, ou omitida se existirem modificadores presentes.\n\n  Quando usada num elemento normal, apenas ouve os [**eventos de DOM nativos**](https://developer.mozilla.org/en-US/docs/Web/Events). Quando usada num componente de elemento personalizado, ouve os **eventos personalizados** emitidos sobre este componente filho.\n\n  Quando ouvimos os eventos de DOM nativos, o método recebe o evento nativo como único argumento. Se usarmos a declaração em linha, a declaração tem acesso à propriedade `$event` especial: `v-on:click=\"handle('ok', $event)\"`.\n\n  `v-on` também suporta vínculo a um objeto de pares de evento / ouvinte sem um argumento. Nota que quando usamos a sintaxe de objeto, esta não suporta quaisquer modificadores.\n\n- **Exemplo**\n\n  ```html\n  <!-- manipulador de método -->\n  <button v-on:click=\"doThis\"></button>\n\n  <!-- evento dinâmico -->\n  <button v-on:[event]=\"doThis\"></button>\n\n  <!-- declaração em linha -->\n  <button v-on:click=\"doThat('hello', $event)\"></button>\n\n  <!-- atalho -->\n  <button @click=\"doThis\"></button>\n\n  <!-- atalho de evento dinâmico -->\n  <button @[event]=\"doThis\"></button>\n\n  <!-- parar propagação -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- impedir o padrão -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- impedir o padrão sem expressão -->\n  <form @submit.prevent></form>\n\n  <!-- encadear modificadores -->\n  <button @click.stop.prevent=\"doThis\"></button>\n\n  <!-- modificador de tecla usando pseudónimo de tecla -->\n  <input @keyup.enter=\"onEnter\" />\n\n  <!-- o evento de clique será acionado no máximo uma vez -->\n  <button v-on:click.once=\"doThis\"></button>\n\n  <!-- sintaxe de objeto -->\n  <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n  ```\n\n  Ouvindo eventos personalizados dum componente filho (o manipulador é chamado quando \"my-event\" é emitido sobre o filho):\n\n  ```html\n  <MyComponent @my-event=\"handleThis\" />\n\n  <!-- declaração em linha -->\n  <MyComponent @my-event=\"handleThis(123, $event)\" />\n  ```\n\n- **Consultar também**\n  - [Manipulação de Eventos](https://pt.vuejs.org/guide/essentials/event-handling.html)\n  - [Componentes - Eventos Personalizados](https://pt.vuejs.org/guide/essentials/component-basics.html#listening-to-events)"
      },
      "references": "api/built-in-directives.html#v-on"
    },
    {
      "name": "v-bind",
      "description": {
        "kind": "markdown",
        "value": "Vincula dinamicamente um ou mais atributos, ou uma propriedade de componente à uma expressão.\n\n- **Atalho:**\n  - `:` ou `.` (quando usamos o modificador `.prop`)\n  - Omitir o valor (quando o atributo e o valor vinculado tiverem o mesmo nome) <sup class=\"vt-badge\">3.4+</sup>\n\n- **Espera:** `any (com argumento) | Object (sem argumento)`\n\n- **Argumento:** `attrOrProp (opcional)`\n\n- **Modificadores**\n\n  - `.camel` - transforma o nome de atributo em caixa espetada em caixa de camelo.\n  - `.prop` - força um vínculo a ser definido como uma propriedade do DOM. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - força um vínculo a ser definido como um atributo de DOM. <sup class=\"vt-badge\">3.2+</sup>\n\n- **Uso**\n\n  Quando usada para vincular o atributo `class` ou `style`, `v-bind` suporta tipos de valores adicionar como Vetor ou Objeto. Consulte a seção do guia ligado abaixo por mais detalhes.\n\n  Quando definimos um vínculo num elemento, a Vue por padrão verifica se o elemento tem a chave definida como uma propriedade usando uma verificação do operador `in`. Se a propriedade for definida, a Vue definirá o valor como uma propriedade de DOM ao invés dum atributo. Isto deve funciona na maioria dos casos, mas podemos sobrepor este comportamento ao usar explicitamente os modificadores `.prop` ou `.attr`. Isto é algumas vezes necessário, especialmente quando [trabalhamos com elementos personalizados](https://pt.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  Quando usada para vínculos de propriedade de componente, a propriedade deve ser declarada apropriadamente no componente filho.\n\n  Quando usada sem um argumento, pode ser usada para vincular um objeto contendo pares de nome-valor de atributo.\n\n- **Exemplo**\n\n  ```html\n  <!-- vincular um atributo -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- nome de atributo dinâmico -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- atalho -->\n  <img :src=\"imageSrc\" />\n\n  <!-- atalho de mesmo nome (3.4+), expande a `:src=\"src\"` -->\n  <img :src />\n\n  <!-- atalho de nome de atributo dinâmico -->\n  <button :[key]=\"value\"></button>\n\n  <!-- com concatenação de sequência de caracteres em linha -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- vínculos de classe -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- vínculos de estilo -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- vincular um objeto de atributos -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- vincular propriedades. -->\n  <!-- \"prop\" deve ser declarada no componente filho. -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- passar as propriedades do pai em comum com um componente filho -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  O modificador `.prop` também tem um atalho dedicado `.`:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- equivalente a -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  O modificador `.camel` permite a camelização dum nome de atributo de `v-bind` quando usamos modelos de marcação no DOM, por exemplo o atributo `viewBox` de SVG:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  `.camel` não é necessário se estivermos a usar modelos de marcação de sequência de caracteres, pré-compilar o modelo de marcação com uma etapa de construção.\n\n- **Consultar também**\n  - [Vínculos de Classe e Estilo](https://pt.vuejs.org/guide/essentials/class-and-style.html)\n  - [Componentes - Detalhes da Passagem de Propriedade](https://pt.vuejs.org/guide/components/props.html#prop-passing-details)"
      },
      "references": "api/built-in-directives.html#v-bind"
    },
    {
      "name": "v-model",
      "description": {
        "kind": "markdown",
        "value": "Cria um vínculo bidirecional num elemento de entrada de formulário ou um componente.\n\n- **Espera:** variar baseado no valor do elemento de entradas de formulário ou na saída de componentes\n\n- **Limitado a:**\n\n  - `<input>`\n  - `<select>`\n  - `<textarea>`\n  - componentes\n\n- **Modificadores**\n\n  - [`.lazy`](https://pt.vuejs.org/guide/essentials/forms.html#lazy) - ouve os eventos de `change` ao invés de `input`\n  - [`.number`](https://pt.vuejs.org/guide/essentials/forms.html#number) - converte uma sequência de caracteres de entrada válida em números.\n  - [`.trim`](https://pt.vuejs.org/guide/essentials/forms.html#trim) - apara a entrada\n\n- **Consultar também**\n\n  - [Vínculos de Entrada de Formulário](https://pt.vuejs.org/guide/essentials/forms.html)\n  - [Eventos de Componente - Uso com `v-model`](https://pt.vuejs.org/guide/components/v-model.html)"
      },
      "references": "api/built-in-directives.html#v-model"
    },
    {
      "name": "v-slot",
      "description": {
        "kind": "markdown",
        "value": "Denota ranhuras nomeadas ou ranhuras isoladas que esperam receber propriedades.\n\n- **Atalho:** `#`\n\n- **Espera:** expressão de JavaScript que é válido numa posição de argumento de função, incluindo suporte para desestruturação. Opcional - apenas necessário se esperamos propriedades serem passadas para a ranhura.\n\n- **Argumento:** nome da ranhura (opcional, predefinido para `default`)\n\n- **Limitado a:**\n\n  - `<template>`\n  - [componentes](https://pt.vuejs.org/guide/components/slots.html#scoped-slots) (para única ranhura padrão com propriedades)\n\n- **Exemplo**\n\n  ```html\n  <!-- Ranhuras nomeadas -->\n  <BaseLayout>\n    <template v-slot:header>\n      Header content\n    </template>\n\n    <template v-slot:default>\n      Default slot content\n    </template>\n\n    <template v-slot:footer>\n      Footer content\n    </template>\n  </BaseLayout>\n\n  <!-- Ranhura nomeada que recebe propriedades -->\n  <InfiniteScroll>\n    <template v-slot:item=\"slotProps\">\n      <div class=\"item\">\n        {{ slotProps.item.text }}\n      </div>\n    </template>\n  </InfiniteScroll>\n\n  <!-- Ranhura padrão que recebe propriedades, com desestruturação -->\n  <Mouse v-slot=\"{ x, y }\">\n    Mouse position: {{ x }}, {{ y }}\n  </Mouse>\n  ```\n\n- **Consultar também**\n  - [Componentes - Ranhuras](https://pt.vuejs.org/guide/components/slots.html)"
      },
      "references": "api/built-in-directives.html#v-slot"
    },
    {
      "name": "v-pre",
      "valueSet": "v",
      "description": {
        "kind": "markdown",
        "value": "Ignora a compilação para este elemento e todos os seus filhos.\n\n- **Não espera expressão**\n\n- **Detalhes**\n\n  Dentro do elemento com `v-pre`, toda a sintaxe de modelo de marcação da Vue será preservada e desenhada como está. O caso de uso mais comum disto é a exibição de marcadores de bigodes puros.\n\n- **Exemplo**\n\n  ```html\n  <span v-pre>{{ this will not be compiled }}</span>\n  ```"
      },
      "references": "api/built-in-directives.html#v-pre"
    },
    {
      "name": "v-once",
      "valueSet": "v",
      "description": {
        "kind": "markdown",
        "value": "Desenha o elemento e o componente apenas uma vez, e ignora as futuras atualizações.\n\n- **Não espera expressão**\n\n- **Detalhes**\n\n  Nos redesenhos subsequentes, o elemento ou componente e todos os seus filhos serão tratados como conteúdo estático e ignorados. Isto pode ser usado para otimizar o desempenho da atualização.\n\n  ```html\n  <!-- elemento único -->\n  <span v-once>This will never change: {{msg}}</span>\n  <!-- o elemento tem filhos -->\n  <div v-once>\n    <h1>comment</h1>\n    <p>{{msg}}</p>\n  </div>\n  <!-- componente -->\n  <MyComponent v-once :comment=\"msg\"></MyComponent>\n  <!-- diretiva `v-for` -->\n  <ul>\n    <li v-for=\"i in list\" v-once>{{i}}</li>\n  </ul>\n  ```\n\n  Desde a 3.2, também podemos memorizar parte do modelo de marcação com condições de invalidação usando a [`v-memo`](#v-memo).\n\n- **Consultar também**\n  - [Sintaxe de Vínculo de Dados - Interpolações](https://pt.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n  - [`v-memo`](#v-memo)"
      },
      "references": "api/built-in-directives.html#v-once"
    },
    {
      "name": "v-memo",
      "description": {
        "kind": "markdown",
        "value": "- **Espera:** `any[]`\n\n- **Detalhes**\n\n  Memoriza uma sub-árvore do modelo de marcação. Pode ser usada em ambos elementos e componentes. A diretiva espera um vetor de valores de dependência de comprimento fixo à comparar para a memorização. Se todos os valores no vetor fossem os mesmos que os da última interpretação, então as atualizações para a sub-árvore inteira serão ignoradas. Por exemplo:\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  Quando o componente redesenha-se, se ambos `valueA` e `valueB` continuarem os mesmos, todas as atualizações para este `<div>` e seus filhos serão ignoradas. De fato, mesmo a criação nó virtual do DOM virtual também será ignorada uma vez que a cópia memorizada da sub-árvore pode ser usada novamente.\n\n  É importante especificar o vetor de memorização corretamente, de outro modo podemos ignorar atualizações que deveriam de fato ser aplicadas. `v-memo` com um vetor de dependência vazio (`v-memo=\"[]\"`) seria funcionalmente equivalente à `v-once`.\n\n  **Uso com `v-for`**\n\n  `v-memo` é fornecida exclusivamente para micro otimizações em cenários de desempenho crítico e deveriam ser raramente necessários. O caso de uso mais comum onde isto pode ser útil é quando desenhamos grandes listas `v-for` (onde `length > 1000`):\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n    <p>...more child nodes</p>\n  </div>\n  ```\n\n  Quando o estado `selected` do componente mudar, será criada uma grande quantidade de nós virtuais, embora a maioria dos itens permaneça exatamente igual. O uso de `v-memo` neste contexto está essencialmente a dizer \"apenas atualize este item se tiver passado de não selecionado para selecionado, ou o contrário\". Isto permite que todos os itens não afetados reusarem seus anteriores nós virtuais e ignorar a diferenciação inteiramente. Nota que não precisamos incluir `item.id` no vetor de dependência da `v-memo` neste contexto, uma vez que a Vue atualmente a infere a partir da `:key` do item.\n\n  :::warning AVISO\n  Quando usamos a `v-memo` com a `v-for`, devemos certificar-nos que são usados no mesmo elemento. **`v-memo` não funciona dentro da `v-for`**.\n  :::\n\n  `v-memo` também pode ser usada nos componentes para manualmente impedir atualizações indesejadas em certos casos extremos onde a verificação da atualização do componente filho não foi otimizado. Mas novamente, é responsabilidade do programador especificar os vetores de dependência correta para evitar ignorar atualizações necessárias.\n\n- **Consultar também**\n  - [`v-once`](#v-once)"
      },
      "references": "api/built-in-directives.html#v-memo"
    },
    {
      "name": "v-cloak",
      "valueSet": "v",
      "description": {
        "kind": "markdown",
        "value": "Usada para esconder o modelo de marcação que ainda não foi compilado até que estiver pronto.\n\n- **Não espera expressão**\n\n- **Detalhes**\n\n  **Esta diretiva apenas é necessária nas configurações sem etapa de construção.**\n\n  Quando usamos os modelos de marcação no DOM, pode existir um \"piscar de modelos de marcação não compilados\": o utilizador pode ver os marcadores de bigodes puros até o componente montado substituí-los com componente desenhado.\n\n  `v-cloak` permanecerá no elemento até que a instância do componente associado for montada. Combinada com as regras de CSS como `[v-cloak] { display: none }`, pode ser usada para esconder os modelos de marcação puros até o componente estiver pronto.\n\n- **Exemplo**\n\n  ```css\n  [v-cloak] {\n    display: none;\n  }\n  ```\n\n  ```html\n  <div v-cloak>\n    {{ message }}\n  </div>\n  ```\n\n  O `<div>` não será visível até que a compilação estiver concluída."
      },
      "references": "api/built-in-directives.html#v-cloak"
    },
    {
      "name": "key",
      "description": {
        "kind": "markdown",
        "value": "O atributo especial `key` é primariamente usado como uma sugestão para o algoritmo do DOM virtual da Vue identificar os nós virtuais quando diferenciar a nova lista de nós contra a antiga lista.\n\n- **Espera:** `number | string | symbol`\n\n- **Detalhes**\n\n  Sem chaves, a Vue usa um algoritmo que minimiza o movimento de elemento e tenta remendar ou reusar elementos do mesmo tipo no lugar o máximo possível. Com chaves, reorganizará os elementos baseado na mudança de ordem das chaves, e os elementos com chaves que não estão mais presentes sempre serão removidos ou destruídos.\n\n  Os filhos do mesmo pai comum devem ter **chaves únicas**. As chaves duplicadas causarão erros de interpretação.\n\n  O caso de uso mais comum é combinado com `v-for`:\n\n  ```html\n  <ul>\n    <li v-for=\"item in items\" :key=\"item.id\">...</li>\n  </ul>\n  ```\n\n  Também pode ser usado para forçar a substituição dum elemento ou componente ao invés de reusá-lo. Isto pode ser útil quando queremos:\n\n  - Acionar corretamente os gatilhos do ciclo de vida dum componente\n  - Acionar transições\n\n  Por exemplo:\n\n  ```html\n  <transition>\n    <span :key=\"text\">{{ text }}</span>\n  </transition>\n  ```\n\n  Quando `text` mudar, o `<span>` sempre será substituído ao invés de ser remendado, depois uma transição será acionada.\n\n- **Consulte também** [Guia - Interpretação de Lista - Mantendo o Estado com `key`](https://pt.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)"
      },
      "references": "api/built-in-special-attributes.html#key"
    },
    {
      "name": "ref",
      "description": {
        "kind": "markdown",
        "value": "Denota uma [referência do modelo de marcação](https://pt.vuejs.org/guide/essentials/template-refs.html).\n\n- **Espera:** `string | Function`\n\n- **Detalhes**\n\n  `ref` é usado para registar uma referência à um elemento ou à um componente filho.\n\n  Na API de Opções, a referência será registada sob o objeto `this.$refs` do componente:\n\n  ```html\n  <!-- armazenado como this.$refs.p -->\n  <p ref=\"p\">hello</p>\n  ```\n\n  Na API de Composição, a referência será armazenada em uma `ref` com o nome correspondente:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n\n  const p = ref()\n  </script>\n\n  <template>\n    <p ref=\"p\">hello</p>\n  </template>\n  ```\n\n  Se usado sobre um elemento de DOM simples, a referência será este elemento; se usada sobre um componente filho, a referência será a instância do componente filho.\n\n  Alternativamente, a `ref` pode aceitar um valor de função que fornece controlo total sobre onde armazenar a referência:\n\n  ```html\n  <ChildComponent :ref=\"(el) => child = el\" />\n  ```\n\n  Uma nota importante sobre o tempo de registo da referência: uma vez que as próprias referências são criadas como resultado da função de interpretação, devemos esperar até o componente ser montado antes de acessá-las.\n\n  `this.$refs` também não é reativa, portanto não devemos tentar usá-la nos modelos de marcação para vínculo de dados.\n\n- **Consulte também**\n  - [Guia - Referências do Modelo de Marcação](https://pt.vuejs.org/guide/essentials/template-refs.html)\n  - [Guia - Tipos para Referências do Modelo de Marcação](https://pt.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" data-text=\"typescript\" />\n  - [Guia - Tipos para Referências do Modelo de Marcação do Componente](https://pt.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" data-text=\"typescript\" />"
      },
      "references": "api/built-in-special-attributes.html#ref"
    },
    {
      "name": "is",
      "description": {
        "kind": "markdown",
        "value": "Usado para vincular os [componentes dinâmicos](https://pt.vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Espera:** `string | Component`\n\n- **Uso sobre os elementos nativos** <sup class=\"vt-badge\">3.1+</sup>\n\n  Quando o atributo `is` for usado sobre um elemento de HTML nativo, será interpretado como um [elemento embutido personalizado](https://html.spec.whatwg.org/multipage/custom-elements#custom-elements-customized-builtin-example), que é uma funcionalidade da plataforma da Web nativa.\n\n  Existe, no entanto, um caso de uso onde podemos precisar que a Vue substitua um elemento nativo por um elemento da Vue, como explicado nas [Advertências de Analise do Modelo de Marcação de DOM](https://pt.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats). Nós podemos prefixar o valor do atributo `is` com `vue:` assim a Vue interpretará o elemento como um componente de Vue:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **Consulte também**\n\n  - [Elementos Especiais Embutidos - `<component>`](https://pt.vuejs.org/api/built-in-special-elements.html#component)\n  - [Componentes Dinâmicos](https://pt.vuejs.org/guide/essentials/component-basics.html#dynamic-components)"
      },
      "references": "api/built-in-special-attributes.html#is"
    }
  ]
}