Especificação da Sintaxe ​

Visão Geral ​

Um componente de ficheiro único da Vue, tradicionalmente usando a extensão de ficheiro *.vue, é um formato de ficheiro personalizado que usa uma sintaxe semelhante ao HTML para descrever um componente da Vue. Um componente de ficheiro único da Vue é sintaticamente compatível com a HTML.

Cara ficheiro *.vue é composto por três tipos de blocos da linguagem de alto nível: <template>, <script>, e <style>, e opcionalmente blocos personalizados adicionais:

<template>  <div class="example">{{ msg }}</div> </template>  <script> export default {  data() {  return {  msg: 'Hello world!'  }  } } </script>  <style> .example {  color: red; } </style>  <custom1>  This could be e.g. documentation for the component. </custom1>

Blocos de Linguagem ​

<template> ​

• Cada ficheiro *.vue pode conter no máximo um bloco <template> de alto nível.

• O conteúdo será extraído e passado ao @vuw/compiler-dom, pré-compilado dentro de funções de interpretação de JavaScript, e anexado ao componente exportado como sua opção render.

<script> ​

• Cada ficheiro *.vue poder conter no máximo um bloco <script> de alto nível (excluindo <script setup>).

• O programa é executado como um módulo de ECMAScript.

• A exportação padrão deve ser um objeto de opções de componente da Vue, ou como um objeto simples ou como valor de retorno da defineComponent.

<script setup> ​

• Cada ficheiro *.vue pode conter no máximo um bloco <script setup> (excluindo o <script> normal).

• O programa é pré-processado e usado como a função setup() do componente, o que significa que será executado para cada instância do componente. Os vínculos de alto nível no <script setup> são automaticamente expostos ao modelo de marcação. Para mais detalhes, consulte a documentação dedicada ao <script setup>.

<style> ​

• Um único ficheiro *.vue pode conter vários marcadores de <style>.

• Um marcador <style> pode ter os atributos scoped ou module (consulte Funcionalidades de Estilo do Componente de Ficheiro Único por mais detalhes) para ajudar a encapsular os estilos ao componente atual. Vários marcadores de <style> com diferentes modos de encapsulamento podem ser misturados no mesmo componente.

Blocos Personalizados ​

Os blocos personalizados podem ser incluídos num ficheiro *.vue por qualquer necessidade específica do projeto, por exemplo um bloco <docs>. Alguns exemplos do mundo real de blocos personalizados incluem:

• Gridsome: <page-query>
• vite-plugin-vue-gql: <gql>
• vue-i18n: <i18n>

A manipulação dos blocos personalizados dependerá do ferramental - se quisermos construir as nossas próprias integrações de bloco personalizado, podemos consultar a seção de ferramental de integrações de bloco personalizado do Componente de Ficheiro Único por mais detalhes.

Inferência Automática de Nome ​

Um componente de ficheiro único infere automaticamente o nome do componente a partir do seu nome de ficheiro nos seguintes casos:

• Formatação do aviso de desenvolvimento
• Inspeção das ferramentas de programação
• Auto-referência recursiva, por exemplo, um ficheiro nomeado FooBar.vue pode refer-se a si mesmo como <FooBar/> no seu modelo de marcação. Isto tem a menor prioridade do que os componentes registados ou importados explicitamente.

Pré-Processadores ​

Os blocos podem declarar linguagens pré-processadoras usando o atributo lang. O caso mais comum é usar TypeScript para o bloco <script>:

<script lang="ts">  // usar TypeScript </script>

lang pode ser aplicado à qualquer bloco - por exemplo, podemos usar o <style> com a Sass e o <template> com a Pug:

<template lang="pug"> p {{ msg }} </template>  <style lang="scss">  $primary-color: #333;  body {  color: $primary-color;  } </style>

Nota que a integração com os vários pré-processadores pode diferir conforme a cadeia de ferramenta. Consulte a respetiva documentação por exemplos:

• Vite
• Vue CLI
• webpack + vue-loader

Importações com src ​

Se preferirmos separar os nossos componentes *.vue em vários ficheiros, podemos usar o atributo src para importar um ficheiro externo para um bloco de linguagem:

<template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script>

Devemos estar ciente de que as importações de src seguem as mesmas regras de resolução de caminho que as requisições de módulo da Webpack, o que significa que:

• Os caminhos relativos precisam começar com ./
• Nós podemos importar recursos a partir das dependências do npm:

<!-- importar um ficheiro dum pacote "todomvc-app-css" instalado --> <style src="todomvc-app-css/index.css" />

As importações de src também funcionam com os blocos personalizados, por exemplo:

<unit-test src="./unit-test.js"> </unit-test>

Comentários ​

Dentro de cada bloco usaremos a sintaxe de comentário da linguagem em uso (HTML, CSS, JavaScript, Pug, etc.). Para comentários de alto nível, usamos a sintaxe de comentário da HTML: <!-- eis o conteúdo do comentário -->