Vue.js

# Especificación de la Sintaxis SFC

# Introducción

Un archivo *.vue es un formato de archivo personalizado utilizando sintaxis similar a HTML para describir un componente Vue. Cada archivo *.vue consiste de tres tipos de bloques de lenguaje de nivel superior: <template>, <script>, y <style>, y opcionalmente bloques personalizados adicionales:

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: '¡Hola mundo!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  Este podría ser p. ej. documentación para el componente.
</custom1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Bloques de Lenguaje

# <template>

  • Cada archivo *.vue puede contener a lo más un bloque <template> de nivel superior al mismo tiempo.

  • Los contenidos será extraidos y pasados a @vue/compiler-dom, precompilados a funciones JavaScript de render, y adjuntados al componente exportado como su opción render.

# <script>

  • Cada archivo *.vue puede contener a lo más un bloque <script> al mismo tiempo (excepto <script setup>).

  • El script es ejecutado como un módulo ES.

  • La exportación por defecto debe ser un objeto de opciones de componente Vue, tanto un objeto plano como el valor retornado de defineComponent.

# <script setup>

  • Cada archivo *.vue puede contener a lo más un bloque <script setup> al mismo tiempo (excepto el <script> normal).

  • El script es preprocesado y utilizado como la función setup() del componente, lo que significa que será ejecutado para cada instancia del componente. Las vinculaciones de nivel superior en <script setup> son automáticamente expuestos a la plantilla. Para más detalles, vea documentación dedicada sobre <script setup>.

# <style>

  • Un solo archivo *.vue puede contener múltiples etiquetas <style>.

  • Una etiqueta <style> puede tener atributos scoped o module (vea características de estilos de sfc para más detalles) para ayudar a encapsular los estilos al componente actual. Múltiples etiquetas <style> con diferentes modos de encapsulación se pueden mezclar en el mismo componente.

# Bloques Personalizados

Se pueden incluir bloques personalizados adicionales en un archivo *.vue para cualquiera necesidad específica para el proyecto, por ejemplo un bloque <docs>. Algunos ejemplos de bloques personalizados del mundo real incluyen:

El manejamiento de bloques personalizados dependerá de las herramientas, si quiere construir sus propios integraciones de bloques personalizados, vea herramienta de sfc para más detalles.

# Inferencia de name Automática

Un SFC automáticamente infiere el nombre del componente de su nombre de archivo (filename) en los siguientes casos:

  • El formateo de advertencias de desarrollo (Dev warning formatting)
  • La inspección de DevTools (DevTools inspection)
  • La autorreferencia recursiva. P. ej. un archivo llamado FooBar.vue puede referirse como <FooBar/> en su plantilla. Este tiene menor prioridad que components registrados/importados explícitamente.

# Preprocesadores (Pre-Processors)

Los bloques pueden declarar lenguajes de preprocesadores utilizando el atributo lang. La más común caso es utilizar TypeScript para el bloque <script>:

<script lang="ts">
  // utilizar TypeScript
</script>
1
2
3

lang puede ser aplicado a cualquier bloque, por ejemplo podemos utilizar <style> con SASS (opens new window) y <template> con Pug (opens new window):

<template lang="pug">
p {{ msg }}
</template>

<style lang="scss">
  $primary-color: #333;
  body {
    color: $primary-color;
  }
</style>
1
2
3
4
5
6
7
8
9
10

Note que la integración con preprocesadores podría variar en función de la cadena de herramientas. Echa un vistazo a las documentaciones correspondientes para ejemplos:

# Importaciones de Src

Si prefiere dividir sus componentes *.vue en múltiples archivos, puede utilizar el atributo src para importar un archivo externo para un bloque de lenguaje:

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

Tenga en cuenta que las importaciones src siguen las mismas reglas de resolución de ruta como las solicitudes de recursos webpack, lo que significa:

  • las rutas relativas necesitan empezar con ./
  • Puede importar recursos de las dependencias npm:
<!-- importar un archivo del paquete npm instalado "todomvc-app-css" -->
<style src="todomvc-app-css/index.css">
1
2

Las importaciones src también funcionan con bloques personalizados, p. ej.:

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

# Comentarios

Dentro de cada bloque debe utilizar la sintaxis de comentario del lenguaje utilizado (HTML, CSS, JavaScript, Pug, etc.). Para comentarios de nivel superior, utilice la sintaxis de comentarios de HTML: <!-- comment contents here -->

← Herramientas →