En Vue, podemos aplicar reglas de estilos de manera global, para toda la aplicación o que solamente aplique en un único componente.
Vue es un marco que fue creado para aplicaciones modulares, es el nuevo esquema que no es tan nuevo, pero que poco a poco va evolucionando bajo un mismo lineamiento en el cual requerimos que todo sea perfectamente modular e integrable con otros módulos o submódulos; en vue a estos módulos se les llaman componentes en los cuales tenemos unas minis aplicaciones que hacen una tarea en particular; recordemos que, siguiente la estructura de una aplicación en Vue, en un componente, tenemos:
- template
- script
- css
Esto es un componente, en cuando al template y el script sabemos que fácilmente corresponde o vive en el mismo componente, pero el estilo al tratar con hojas de estilos en cascadas, CSS la cosa cambia un poco, ya que una de las características que tenemos en este lenguaje, es que es global a TODA la app, y a la final no importa cuantos desestructura tu app en componentes, que a la final va a ser UNA sola aplicación ejecutándose en un navegador; por lo tanto el CSS que coloques a la final en cada componente, se va a regar al resto cuando ejecutes tu app!
Suponte el siguiente esquema; tenemos en nuestro App.vue un template que carga dos componentes:
En el App.vue:
<template>
<mi-primer-componente/>
<hello-world/>
</template>
<script>
import MiPrimerComponente from ',/components/MiPrimerComponente'
import HelloWorld from './components/HelloWorld'
export default {
components: {
MiPrimerComponente,
HelloWorld
},
}
</script>Componente 1: Hello World:
Tiene un H1 al cual quiero colocar un color de azul
<template>
<h1>C1<h1/>
</template>
<style scoped>
h1 {
color: blue
}
</style>Componente 2: Mi Primer Componente
Tiene un H1 al cual quiero colocar un color de rojo
<template>
<h1>C2<h1/>
</template>
<style scoped>
h1 {
color: red;
}
</style>Cuando renderizas tu app, tienes el siguiente resultado:
Solamente te va a aparecer un solo color, que puede que sea rojo o puede que sea azul, pero NO es lo que especificamos, ya que queríamos un color para el H1 diferente por cada componente.
Definiendo el scope de estilos
Como indicamos, al tener componentes, es probable que no quieres que choquen tus estilos, por ejemplo puedes que tengas un componente de listado en el cual le das estilo a un div para que muestre un item, pero este elemento div, puedes que lo uses para el banner, footer, barra lateral y si no hacemos algo, chocaran estos estilos de una manera espantosa!
Para indicar que queremos que cada estilo se quede en su componente, tenemos el atributo scope, que le definimos a las hojas de estilo, por lo tanto, para nuestros componentes, si queremos que el estilo que definen sea local al mismo y NO extienda como una "Cascada" a otros componentes hermanos, hijos o padres...:
<style scoped>
h1 {
color: red;
}
</style>Tienes que colocar scoped para cada estilo que quieres que sea local a ese componente
Ya con esto, tenemos el resultado esperado:
- Andrés Cruz
In english
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter