Componentes de un solo archivo de Vue.js

Descubra cómo Vue le ayuda a crear un único archivo que es responsable de todo lo que se refiere a un único componente, centralizando la responsabilidad por la apariencia y el comportamiento.

Un componente de Vue se puede declarar en un archivo JavaScript (.js) como esto:

Vue.component('component-name', {
  /* options */
})

o tambien:

new Vue({
  /* options */
})

o se puede especificar en un.vueexpediente.

los.vueEl archivo es bastante bueno porque te permite definir

Lógica de JavaScript
Plantilla de código HTML
Estilo CSS

todo en un solo archivo, y como tal obtuvo el nombre deComponente de archivo único.

He aquí un ejemplo:

<template>
  <p>{{ hello }}</p>
</template>
<script>
export default {
data() {
return {
hello: ‘Hello World!’
}
}
}
</script>
<style scoped>
p {
color: blue;
}
</style>

Todo esto es posible gracias al uso de webpack. La CLI de Vue hace que esto sea muy fácil y compatible desde el primer momento..vuelos archivos no se pueden usar sin una configuración de paquete web y, como tal, no son muy adecuados para aplicaciones que solo usan Vue en una página sin ser una aplicación completa de una sola página (SPA).

Dado que los componentes de un solo archivo dependen de Webpack, obtenemos de forma gratuita la posibilidad de utilizar funciones web modernas.

Su CSS se puede definir usando SCSS o Stylus, la plantilla se puede construir usando Pug, y todo lo que necesita hacer para que esto suceda es declarar a Vue qué preprocesador de lenguaje va a usar.

La lista de preprocesadores compatibles incluye

Mecanografiado
SCSS
Hablar con descaro a
Menos
PostCSS
Doguillo

Podemos usar JavaScript moderno (ES6-7-8) independientemente del navegador de destino, usando la integración de Babel y los módulos ES también, por lo que podemos usarimport/exportdeclaraciones.

Podemos usar módulos CSS para definir el alcance de nuestro CSS.

Hablando de CSS de alcance, los componentes de un solo archivo hacen que sea absolutamente fácil escribir CSS que nofugaa otros componentes, usando<style scoped>etiquetas.

Si omitesscoped, el CSS que defina será global. Pero agregando eso, Vue agrega automáticamente una clase específica al componente, única para su aplicación, por lo que se garantiza que el CSS no se filtrará a otros componentes.

Tal vez su JavaScript sea enorme debido a alguna lógica de la que debe ocuparse. ¿Qué sucede si desea utilizar un archivo separado para su JavaScript?

Puedes usar elsrcatributo para exteriorizarlo:

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>

Esto también funciona para tu CSS:

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>
<style src="./hello.css"></style>

Fíjate cómo usé

export default {
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}

en el JavaScript del componente para configurar los datos.

Otras formas comunes que verá son

export default {
  data: function() {
    return {
      name: 'Flavio'
    }
  }
}

(lo anterior es equivalente a lo que hicimos antes)

export default {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

esto es diferente porque usa una función de flecha. Las funciones de flecha están bien hasta que necesitamos acceder a un método de componente, ya que necesitamos hacer uso dethisy dicha propiedad no está vinculada al componente que utiliza funciones de flecha. Entonces es obligatorio usarregularfunciones en lugar de funciones de flecha.

También puede ver

module.exports = {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

esto usa la sintaxis CommonJS, y también funciona, aunque se recomienda usar la sintaxis de los módulos ES, ya que es un estándar de JavaScript.

Descarga mi gratisManual de Vue

Componentes de un solo archivo de Vue.js

Descubra cómo Vue le ayuda a crear un único archivo que es responsable de todo lo que se refiere a un único componente, centralizando la responsabilidad por la apariencia y el comportamiento.

Más tutoriales de vue: