@vue/language-service 1.9.0-alpha.3 → 2.0.1

package/data/template/pt.json

@@ -5,7 +5,7 @@
       "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- **Consulte também:** [Guia de `<Transition>`](https://pt.vuejs.org/guide/built-ins/transition.html)\n"
+        "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": [
@@ -51,7 +51,7 @@
       "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- **Consulte também:** [Guia - `TransitionGroup`](https://pt.vuejs.org/guide/built-ins/transition-group.html)\n"
+        "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": [
@@ -97,7 +97,7 @@
       "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- **Consulte também:** [Guia - `KeepAlive`](https://pt.vuejs.org/guide/built-ins/keep-alive.html)\n"
+        "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": [
@@ -143,7 +143,7 @@
       "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- **Consulte também:** [Guia - `Teleport`](https://pt.vuejs.org/guide/built-ins/teleport.html)\n"
+        "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": [
@@ -189,7 +189,7 @@
       "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- **Consulte também:** [Guia - `Suspense`](https://pt.vuejs.org/guide/built-ins/suspense.html)\n"
+        "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": [
@@ -375,7 +375,7 @@
       "name": "v-text",
       "description": {
         "kind": "markdown",
-        "value": "\nAtualiza 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- **Consulte também** [Sintaxe do Modelo de Marcação - Interpolação de Texto](https://pt.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n"
+        "value": "\nAtualiza 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)\n"
       },
       "references": [
         {
@@ -420,7 +420,7 @@
       "name": "v-html",
       "description": {
         "kind": "markdown",
-        "value": "\nAtualiza 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 à [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- **Consulte também** [Sintaxe do Modelo de Marcação - HTML Puro](https://pt.vuejs.org/guide/essentials/template-syntax.html#raw-html)\n"
+        "value": "\nAtualiza 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)\n"
       },
       "references": [
         {
@@ -465,7 +465,7 @@
       "name": "v-show",
       "description": {
         "kind": "markdown",
-        "value": "\nAlterna 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- **Consulte também** [Interpretação Condicional - `v-show`](https://pt.vuejs.org/guide/essentials/conditional.html#v-show)\n"
+        "value": "\nAlterna 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)\n"
       },
       "references": [
         {
@@ -510,7 +510,7 @@
       "name": "v-if",
       "description": {
         "kind": "markdown",
-        "value": "\nInterpreta 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- **Consulte também** [Interpretação Condicional - `v-if`](https://pt.vuejs.org/guide/essentials/conditional.html#v-if)\n"
+        "value": "\nInterpreta 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)\n"
       },
       "references": [
         {
@@ -556,7 +556,7 @@
       "valueSet": "v",
       "description": {
         "kind": "markdown",
-        "value": "\nDenota 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- **Consulte também** [Interpretação Condicional - `v-else`](https://pt.vuejs.org/guide/essentials/conditional.html#v-else)\n"
+        "value": "\nDenota 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)\n"
       },
       "references": [
         {
@@ -601,7 +601,7 @@
       "name": "v-else-if",
       "description": {
         "kind": "markdown",
-        "value": "\nDenota 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- **Consulte também** [Interpretação Condicional - `v-else-if`](https://pt.vuejs.org/guide/essentials/conditional.html#v-else-if)\n"
+        "value": "\nDenota 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)\n"
       },
       "references": [
         {
@@ -646,7 +646,7 @@
       "name": "v-for",
       "description": {
         "kind": "markdown",
-        "value": "\nInterpreta 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- **Consulte também**\n  - [Interpretação de Lista](https://pt.vuejs.org/guide/essentials/list.html)\n"
+        "value": "\nInterpreta 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)\n"
       },
       "references": [
         {
@@ -691,7 +691,7 @@
       "name": "v-on",
       "description": {
         "kind": "markdown",
-        "value": "\nAnexa 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- **Consulte 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)\n"
+        "value": "\nAnexa 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)\n"
       },
       "references": [
         {
@@ -736,7 +736,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\nVincula dinamicamente um ou mais atributos, ou uma propriedade de componente à uma expressão.\n\n- **Atalho:** `:` ou `.` (quando usamos o modificador `.prop`)\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 de espetada em caixa de camelo.\n  - `.prop` - força um vínculo à ser definido como uma propriedade do DOM. <sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - força um vínculo à 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 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- **Consulte 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)\n"
+        "value": "\nVincula 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)\n"
       },
       "references": [
         {
@@ -781,7 +781,7 @@
       "name": "v-model",
       "description": {
         "kind": "markdown",
-        "value": "\nCria 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- **Consulte 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)\n"
+        "value": "\nCria 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)\n"
       },
       "references": [
         {
@@ -826,7 +826,7 @@
       "name": "v-slot",
       "description": {
         "kind": "markdown",
-        "value": "\nDenota 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- **Consulte também**\n  - [Componentes - Ranhuras](https://pt.vuejs.org/guide/components/slots.html)\n"
+        "value": "\nDenota 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)\n"
       },
       "references": [
         {
@@ -916,7 +916,7 @@
       "name": "v-once",
       "description": {
         "kind": "markdown",
-        "value": "\nDesenha 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- **Consulte 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)\n"
+        "value": "\nDesenha 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)\n"
       },
       "references": [
         {
@@ -961,7 +961,7 @@
       "name": "v-memo",
       "description": {
         "kind": "markdown",
-        "value": "\n- **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- **Consulte também**\n  - [`v-once`](#v-once)\n"
+        "value": "\n- **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)\n"
       },
       "references": [
         {

package/data/template/zh-cn.json

@@ -5,7 +5,7 @@
       "name": "Transition",
       "description": {
         "kind": "markdown",
-        "value": "\n为**单个**元素或组件提供动画过渡效果。\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 用于自动生成过渡 CSS class 名。\n     * 例如 `name: 'fade'` 将自动扩展为 `.fade-enter`、\n     * `.fade-enter-active` 等。\n     */\n    name?: string\n    /**\n     * 是否应用 CSS 过渡 class。\n     * 默认：true\n     */\n    css?: boolean\n    /**\n     * 指定要等待的过渡事件类型\n     * 来确定过渡结束的时间。\n     * 默认情况下会自动检测\n     * 持续时间较长的类型。\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 显式指定过渡的持续时间。\n     * 默认情况下是等待过渡效果的根元素的第一个 `transitionend`\n     * 或`animationend`事件。\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 控制离开/进入过渡的时序。\n     * 默认情况下是同时的。\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 是否对初始渲染使用过渡。\n     * 默认：false\n     */\n    appear?: boolean\n\n    /**\n     * 用于自定义过渡 class 的 prop。\n     * 在模板中使用短横线命名，例如：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- **事件**\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` (`v-show` only)\n  - `@appear-cancelled`\n\n- **示例**\n\n  简单元素：\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  通过改变 `key` 属性来强制过度执行：\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  动态组件，初始渲染时带有过渡模式 + 动画出现：\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  监听过渡事件：\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **参考** [`<Transition>` 指南](https://cn.vuejs.org/guide/built-ins/transition.html)\n"
+        "value": "\n为**单个**元素或组件提供动画过渡效果。\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 用于自动生成过渡 CSS class 名。\n     * 例如 `name: 'fade'` 将自动扩展为 `.fade-enter`、\n     * `.fade-enter-active` 等。\n     */\n    name?: string\n    /**\n     * 是否应用 CSS 过渡 class。\n     * 默认：true\n     */\n    css?: boolean\n    /**\n     * 指定要等待的过渡事件类型\n     * 来确定过渡结束的时间。\n     * 默认情况下会自动检测\n     * 持续时间较长的类型。\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 显式指定过渡的持续时间。\n     * 默认情况下是等待过渡效果的根元素的第一个 `transitionend`\n     * 或`animationend`事件。\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 控制离开/进入过渡的时序。\n     * 默认情况下是同时的。\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 是否对初始渲染使用过渡。\n     * 默认：false\n     */\n    appear?: boolean\n\n    /**\n     * 用于自定义过渡 class 的 prop。\n     * 在模板中使用短横线命名，例如：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- **事件**\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` (`v-show` only)\n  - `@appear-cancelled`\n\n- **示例**\n\n  简单元素：\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  通过改变 `key` 属性来强制过度执行：\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  动态组件，初始渲染时带有过渡模式 + 动画出现：\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  监听过渡事件：\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **参考**[指南 - `<Transition>`](https://cn.vuejs.org/guide/built-ins/transition.html)\n"
       },
       "attributes": [],
       "references": [
@@ -736,7 +736,7 @@
       "name": "v-bind",
       "description": {
         "kind": "markdown",
-        "value": "\n动态的绑定一个或多个 attribute，也可以是组件的 prop。\n\n- **缩写：**`:` 或者 `.` (当使用 `.prop` 修饰符)\n\n- **期望：**`any (带参数) | Object (不带参数)`\n\n- **参数：**`attrOrProp (可选的)`\n\n- **修饰符**\n\n  - `.camel` - 将短横线命名的 attribute 转变为驼峰式命名。\n  - `.prop` - 强制绑定为 DOM property。<sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - 强制绑定为 DOM attribute。<sup class=\"vt-badge\">3.2+</sup>\n\n- **用途**\n\n  当用于绑定 `class` 或 `style` attribute，`v-bind` 支持额外的值类型如数组或对象。详见下方的指南链接。\n\n  在处理绑定时，Vue 默认会利用 `in` 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会将它作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 `.prop` 和 `.attr` 修饰符来强制绑定方式。有时这是必要的，特别是在和[自定义元素](https://cn.vuejs.org/guide/extras/web-components.html#passing-dom-properties)打交道时。\n\n  当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。\n\n  当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。\n\n- **示例**\n\n  ```html\n  <!-- 绑定 attribute -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 动态 attribute 名 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 缩写 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 缩写形式的动态 attribute 名 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 内联字符串拼接 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- class 绑定 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style 绑定 -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 绑定对象形式的 attribute -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop 绑定。“prop” 必须在子组件中已声明。 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 传递子父组件共有的 prop -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 修饰符也有专门的缩写，`.`：\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 等同于 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  当在 DOM 内模板使用 `.camel` 修饰符，可以驼峰化 `v-bind` attribute 的名称，例如 SVG `viewBox` attribute：\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  如果使用字符串模板或使用构建步骤预编译模板，则不需要 `.camel`。\n\n- **参考**\n  - [Class 与 Style 绑定](https://cn.vuejs.org/guide/essentials/class-and-style.html)\n  - [组件 -  Prop 传递细节](https://cn.vuejs.org/guide/components/props.html#prop-passing-details)\n"
+        "value": "\n动态的绑定一个或多个 attribute，也可以是组件的 prop。\n\n- **缩写：**\n  - `:` 或者 `.` (当使用 `.prop` 修饰符)\n  - 值可以省略 (当 attribute 和绑定的值同名时) <sup class=\"vt-badge\">3.4+</sup>\n\n- **期望：**`any (带参数) | Object (不带参数)`\n\n- **参数：**`attrOrProp (可选的)`\n\n- **修饰符**\n\n  - `.camel` - 将短横线命名的 attribute 转变为驼峰式命名。\n  - `.prop` - 强制绑定为 DOM property。<sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - 强制绑定为 DOM attribute。<sup class=\"vt-badge\">3.2+</sup>\n\n- **用途**\n\n  当用于绑定 `class` 或 `style` attribute，`v-bind` 支持额外的值类型如数组或对象。详见下方的指南链接。\n\n  在处理绑定时，Vue 默认会利用 `in` 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会将它作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 `.prop` 和 `.attr` 修饰符来强制绑定方式。有时这是必要的，特别是在和[自定义元素](https://cn.vuejs.org/guide/extras/web-components.html#passing-dom-properties)打交道时。\n\n  当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。\n\n  当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。\n\n- **示例**\n\n  ```html\n  <!-- 绑定 attribute -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 动态 attribute 名 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 缩写 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 缩写形式的动态 attribute 名 (3.4+)，扩展为 :src=\"src\" -->\n  <img :src />\n\n  <!-- 动态 attribute 名的缩写 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 内联字符串拼接 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- class 绑定 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style 绑定 -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 绑定对象形式的 attribute -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop 绑定。“prop” 必须在子组件中已声明。 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 传递子父组件共有的 prop -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 修饰符也有专门的缩写，`.`：\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 等同于 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  当在 DOM 内模板使用 `.camel` 修饰符，可以驼峰化 `v-bind` attribute 的名称，例如 SVG `viewBox` attribute：\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  如果使用字符串模板或使用构建步骤预编译模板，则不需要 `.camel`。\n\n- **参考**\n  - [Class 与 Style 绑定](https://cn.vuejs.org/guide/essentials/class-and-style.html)\n  - [组件 -  Prop 传递细节](https://cn.vuejs.org/guide/components/props.html#prop-passing-details)\n"
       },
       "references": [
         {

package/index.d.ts

@@ -0,0 +1,7 @@
+export * from '@volar/language-service';
+export * from '@vue/language-core';
+export * from './lib/ideFeatures/nameCasing';
+export * from './lib/types';
+import type { ServiceEnvironment, ServicePlugin } from '@volar/language-service';
+import type { VueCompilerOptions } from './lib/types';
+export declare function createVueServicePlugins(ts: typeof import('typescript'), getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions): ServicePlugin[];

package/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createVueServicePlugins = void 0;
+__exportStar(require("@volar/language-service"), exports);
+__exportStar(require("@vue/language-core"), exports);
+__exportStar(require("./lib/ideFeatures/nameCasing"), exports);
+__exportStar(require("./lib/types"), exports);
+const volar_service_emmet_1 = require("volar-service-emmet");
+const volar_service_json_1 = require("volar-service-json");
+const volar_service_pug_beautify_1 = require("volar-service-pug-beautify");
+const volar_service_typescript_1 = require("volar-service-typescript");
+const volar_service_typescript_twoslash_queries_1 = require("volar-service-typescript-twoslash-queries");
+const css_1 = require("./lib/plugins/css");
+const vue_autoinsert_dotvalue_1 = require("./lib/plugins/vue-autoinsert-dotvalue");
+const vue_autoinsert_parentheses_1 = require("./lib/plugins/vue-autoinsert-parentheses");
+const vue_autoinsert_space_1 = require("./lib/plugins/vue-autoinsert-space");
+const vue_codelens_references_1 = require("./lib/plugins/vue-codelens-references");
+const vue_directive_comments_1 = require("./lib/plugins/vue-directive-comments");
+const vue_document_drop_1 = require("./lib/plugins/vue-document-drop");
+const vue_extract_file_1 = require("./lib/plugins/vue-extract-file");
+const vue_sfc_1 = require("./lib/plugins/vue-sfc");
+const vue_template_1 = require("./lib/plugins/vue-template");
+const vue_toggle_v_bind_codeaction_1 = require("./lib/plugins/vue-toggle-v-bind-codeaction");
+const vue_twoslash_queries_1 = require("./lib/plugins/vue-twoslash-queries");
+const vue_visualize_hidden_callback_param_1 = require("./lib/plugins/vue-visualize-hidden-callback-param");
+function createVueServicePlugins(ts, getVueOptions) {
+    return [
+        (0, volar_service_typescript_1.create)(ts),
+        (0, volar_service_typescript_twoslash_queries_1.create)(),
+        (0, css_1.create)(),
+        (0, volar_service_pug_beautify_1.create)(),
+        (0, volar_service_json_1.create)(),
+        (0, vue_template_1.create)('html', ts, getVueOptions),
+        (0, vue_template_1.create)('pug', ts, getVueOptions),
+        (0, vue_sfc_1.create)(),
+        (0, vue_twoslash_queries_1.create)(ts),
+        (0, vue_codelens_references_1.create)(),
+        (0, vue_document_drop_1.create)(ts),
+        (0, vue_autoinsert_dotvalue_1.create)(ts),
+        (0, vue_autoinsert_parentheses_1.create)(ts),
+        (0, vue_autoinsert_space_1.create)(),
+        (0, vue_visualize_hidden_callback_param_1.create)(),
+        (0, vue_directive_comments_1.create)(),
+        (0, vue_extract_file_1.create)(ts),
+        (0, vue_toggle_v_bind_codeaction_1.create)(ts),
+        (0, volar_service_emmet_1.create)(),
+    ];
+}
+exports.createVueServicePlugins = createVueServicePlugins;
+//# sourceMappingURL=index.js.map

package/lib/ideFeatures/nameCasing.d.ts

@@ -0,0 +1,13 @@
+import type { ServiceContext } from '@volar/language-service';
+import type * as vscode from 'vscode-languageserver-protocol';
+import { AttrNameCasing, TagNameCasing } from '../types';
+export declare function convertTagName(context: ServiceContext, uri: string, casing: TagNameCasing): Promise<vscode.TextEdit[] | undefined>;
+export declare function convertAttrName(context: ServiceContext, uri: string, casing: AttrNameCasing): Promise<vscode.TextEdit[] | undefined>;
+export declare function getNameCasing(context: ServiceContext, uri: string): Promise<{
+    tag: TagNameCasing;
+    attr: AttrNameCasing;
+}>;
+export declare function detect(context: ServiceContext, uri: string): Promise<{
+    tag: TagNameCasing[];
+    attr: AttrNameCasing[];
+}>;

package/{out → lib}/ideFeatures/nameCasing.js

@@ -1,22 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.detect = exports.getNameCasing = exports.convertAttrName = exports.convertTagName = void 0;
+const vue = require("@vue/language-core");
 const language_core_1 = require("@vue/language-core");
-const helpers_1 = require("../helpers");
+const namedPipeClient = require("@vue/typescript-plugin/lib/client");
+const computeds_1 = require("computeds");
 const types_1 = require("../types");
-async function convertTagName(ts, context, uri, casing, vueCompilerOptions) {
-    const rootFile = context.documents.getSourceByUri(uri)?.root;
-    if (!(rootFile instanceof language_core_1.VueFile))
+async function convertTagName(context, uri, casing) {
+    const sourceFile = context.language.files.get(uri);
+    if (!sourceFile)
         return;
-    const desc = rootFile.sfc;
+    const rootCode = sourceFile?.generated?.code;
+    if (!(rootCode instanceof language_core_1.VueGeneratedCode))
+        return;
+    const desc = rootCode.sfc;
     if (!desc.template)
         return;
-    const languageService = context.inject('typescript/languageService');
     const template = desc.template;
-    const document = context.documents.getDocumentByFileName(rootFile.snapshot, rootFile.fileName);
+    const document = context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot);
     const edits = [];
-    const components = (0, helpers_1.getComponentNames)(ts, languageService, rootFile, vueCompilerOptions);
-    const tags = (0, helpers_1.getTemplateTagsAndAttrs)(rootFile);
+    const components = await namedPipeClient.getComponentNames(rootCode.fileName) ?? [];
+    const tags = getTemplateTagsAndAttrs(rootCode);
     for (const [tagName, { offsets }] of tags) {
         const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
         if (componentName) {
@@ -36,23 +40,25 @@ async function convertTagName(ts, context, uri, casing, vueCompilerOptions) {
     return edits;
 }
 exports.convertTagName = convertTagName;
-async function convertAttrName(ts, context, uri, casing, vueCompilerOptions) {
-    const rootFile = context.documents.getSourceByUri(uri)?.root;
-    if (!(rootFile instanceof language_core_1.VueFile))
+async function convertAttrName(context, uri, casing) {
+    const sourceFile = context.language.files.get(uri);
+    if (!sourceFile)
+        return;
+    const rootCode = sourceFile?.generated?.code;
+    if (!(rootCode instanceof language_core_1.VueGeneratedCode))
         return;
-    const desc = rootFile.sfc;
+    const desc = rootCode.sfc;
     if (!desc.template)
         return;
-    const languageService = context.inject('typescript/languageService');
     const template = desc.template;
-    const document = context.documents.getDocumentByFileName(rootFile.snapshot, rootFile.fileName);
+    const document = context.documents.get(uri, sourceFile.languageId, sourceFile.snapshot);
     const edits = [];
-    const components = (0, helpers_1.getComponentNames)(ts, languageService, rootFile, vueCompilerOptions);
-    const tags = (0, helpers_1.getTemplateTagsAndAttrs)(rootFile);
+    const components = await namedPipeClient.getComponentNames(rootCode.fileName) ?? [];
+    const tags = getTemplateTagsAndAttrs(rootCode);
     for (const [tagName, { attrs }] of tags) {
         const componentName = components.find(component => component === tagName || (0, language_core_1.hyphenateTag)(component) === tagName);
         if (componentName) {
-            const props = (0, helpers_1.getPropsByTag)(ts, languageService, rootFile, componentName, vueCompilerOptions);
+            const props = await namedPipeClient.getComponentProps(rootCode.fileName, componentName) ?? [];
             for (const [attrName, { offsets }] of attrs) {
                 const propName = props.find(prop => prop === attrName || (0, language_core_1.hyphenateAttr)(prop) === attrName);
                 if (propName) {
@@ -74,8 +80,8 @@ async function convertAttrName(ts, context, uri, casing, vueCompilerOptions) {
     return edits;
 }
 exports.convertAttrName = convertAttrName;
-async function getNameCasing(ts, context, uri, vueCompilerOptions) {
-    const detected = detect(ts, context, uri, vueCompilerOptions);
+async function getNameCasing(context, uri) {
+    const detected = await detect(context, uri);
     const [attr, tag] = await Promise.all([
         context.env.getConfiguration?.('vue.complete.casing.props', uri),
         context.env.getConfiguration?.('vue.complete.casing.tags', uri),
@@ -88,21 +94,20 @@ async function getNameCasing(ts, context, uri, vueCompilerOptions) {
     };
 }
 exports.getNameCasing = getNameCasing;
-function detect(ts, context, uri, vueCompilerOptions) {
-    const rootFile = context.documents.getSourceByUri(uri)?.root;
-    if (!(rootFile instanceof language_core_1.VueFile)) {
+async function detect(context, uri) {
+    const rootFile = context.language.files.get(uri)?.generated?.code;
+    if (!(rootFile instanceof language_core_1.VueGeneratedCode)) {
         return {
             tag: [],
             attr: [],
         };
     }
-    const languageService = context.inject('typescript/languageService');
     return {
-        tag: getTagNameCase(rootFile),
+        tag: await getTagNameCase(rootFile),
         attr: getAttrNameCase(rootFile),
     };
     function getAttrNameCase(file) {
-        const tags = (0, helpers_1.getTemplateTagsAndAttrs)(file);
+        const tags = getTemplateTagsAndAttrs(file);
         const result = [];
         for (const [_, { attrs }] of tags) {
             for (const [tagName] of attrs) {
@@ -122,9 +127,9 @@ function detect(ts, context, uri, vueCompilerOptions) {
         }
         return result;
     }
-    function getTagNameCase(file) {
-        const components = (0, helpers_1.getComponentNames)(ts, languageService, file, vueCompilerOptions);
-        const tagNames = (0, helpers_1.getTemplateTagsAndAttrs)(file);
+    async function getTagNameCase(file) {
+        const components = await namedPipeClient.getComponentNames(file.fileName) ?? [];
+        const tagNames = getTemplateTagsAndAttrs(file);
         const result = [];
         let anyComponentUsed = false;
         for (const component of components) {
@@ -155,4 +160,52 @@ function detect(ts, context, uri, vueCompilerOptions) {
     }
 }
 exports.detect = detect;
+const map = new WeakMap();
+function getTemplateTagsAndAttrs(sourceFile) {
+    if (!map.has(sourceFile)) {
+        const getter = (0, computeds_1.computed)(() => {
+            if (!(sourceFile instanceof vue.VueGeneratedCode))
+                return;
+            const ast = sourceFile.sfc.template?.ast;
+            const tags = new Map();
+            if (ast) {
+                for (const node of vue.eachElementNode(ast)) {
+                    if (!tags.has(node.tag)) {
+                        tags.set(node.tag, { offsets: [], attrs: new Map() });
+                    }
+                    const tag = tags.get(node.tag);
+                    const startTagHtmlOffset = node.loc.start.offset + node.loc.source.indexOf(node.tag);
+                    const endTagHtmlOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
+                    tag.offsets.push(startTagHtmlOffset);
+                    if (!node.isSelfClosing) {
+                        tag.offsets.push(endTagHtmlOffset);
+                    }
+                    for (const prop of node.props) {
+                        let name;
+                        let offset;
+                        if (prop.type === 7
+                            && prop.arg?.type === 4
+                            && prop.arg.isStatic) {
+                            name = prop.arg.content;
+                            offset = prop.arg.loc.start.offset;
+                        }
+                        else if (prop.type === 6) {
+                            name = prop.name;
+                            offset = prop.loc.start.offset;
+                        }
+                        if (name !== undefined && offset !== undefined) {
+                            if (!tag.attrs.has(name)) {
+                                tag.attrs.set(name, { offsets: [] });
+                            }
+                            tag.attrs.get(name).offsets.push(offset);
+                        }
+                    }
+                }
+            }
+            return tags;
+        });
+        map.set(sourceFile, getter);
+    }
+    return map.get(sourceFile)() ?? new Map();
+}
 //# sourceMappingURL=nameCasing.js.map

package/lib/plugins/css.d.ts

@@ -0,0 +1,2 @@
+import type { ServicePlugin } from '@volar/language-service';
+export declare function create(): ServicePlugin;