Hasta ahora hemos visto que toda componente debe definir la propiedad 'template' con los elementos HTML que representan la interfaz visual de la misma.
Normalmente como dicho valor requiere varias líneas lo más común es utilizar las comillas oblicuas `.....` que nos permiten crear string de varias líneas.
Si tenemos una componente que requiere un template muy largo la metodología de definir el valor del template directamente luego de la propiedad puede ser un poco engorroso. Veremos otras formas donde ubicar la definición del template.
Crear una componente llamada 'dias-semana' que defina una propiedad llamada 'seleccionado'. El objetivo de la misma es mostrar todos los días de la semana en una misma línea y con un color distinto aquel que coincide con el valor de la propiedad 'seleccionado'.
Definir el valor del atributo 'template' fuera de la clase.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<dias-semana seleccionado="sábado"></dias-semana>
</div>
<template id="dias-semana">
<div style="display: flex; flex-direction:row;justify-content:space-between;background:#ff0;font-size:1.5rem">
<div v-for="dia in dias">
<span v-if="seleccionado==dia" style="background:#000;color:#fff">{{dia}}</span>
<span v-else>{{dia}}</span>
</div>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('dias-semana',{
props: ['seleccionado'],
template:'#dias-semana',
data: function() {
return {
dias: ['lunes','martes','miércoles','jueves','viernes','sábado','domingo']
}
}
});
new Vue({
el:'#aplicacion'
})
</script>
</body>
</html>
Cuando declaramos la componente en la propiedad 'template' almacenamos un id del template creado previamente:
Vue.component('dias-semana',{
props: ['seleccionado'],
template:'#dias-semana',
El template se lo crea como cualquier etiqueta HTML, como no es una propia de HTML el navegador no la tiene en cuenta, pero Vue la puede localizar luego:
<template id="dias-semana">
<div style="display: flex; flex-direction:row;justify-content:space-between;background:#ff0;font-size:1.5rem">
<div v-for="dia in dias">
<span v-if="seleccionado==dia" style="background:#000;color:#fff">{{dia}}</span>
<span v-else>{{dia}}</span>
</div>
</div>
</template>
El objeto es dejar más ordenada la creación de la componente separando la plantilla visual de la misma.
Si ejecutamos esta aplicación tenemos:
Una tercer forma de ubicar el template es definirlo dentro de una etiqueta script:
<script id="dias-semana" type="text/template">
<div style="display: flex; flex-direction:row;justify-content:space-between;background:#ff0;font-size:1.5rem">
<div v-for="dia in dias">
<span v-if="seleccionado==dia" style="background:#000;color:#fff">{{dia}}</span>
<span v-else>{{dia}}</span>
</div>
</div>
</script>
Luego no debemos hacer ningún cambio en la componente ya que en la misma hacemos referencia a la propiedad id:
Vue.component('dias-semana',{
props: ['seleccionado'],
template:'#dias-semana',
Una cuarta forma de ubicar el valor del template es hacerlo directamente entre las etiquetas de comienzo y fin:
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<dias-semana seleccionado="sábado" inline-template>
<div style="display: flex; flex-direction:row;justify-content:space-between;background:#ff0;font-size:1.5rem">
<div v-for="dia in dias">
<span v-if="seleccionado==dia" style="background:#000;color:#fff">{{dia}}</span>
<span v-else>{{dia}}</span>
</div>
</div>
</dias-semana>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('dias-semana',{
props: ['seleccionado'],
data: function() {
return {
dias: ['lunes','martes','miércoles','jueves','viernes','sábado','domingo']
}
}
});
new Vue({
el:'#aplicacion'
})
</script>
</body>
</html>
Con esta metodología no disponemos la propiedad 'template' dentro de la creación de la componente:
Vue.component('dias-semana',{
props: ['seleccionado'],
data: function() {
return {
dias: ['lunes','martes','miércoles','jueves','viernes','sábado','domingo']
}
}
});
Pero en el HTML donde creamos la componente especificamos el 'template' propiamente dicho para nuestra componente:
<dias-semana seleccionado="sábado" inline-template>
<div style="display: flex; flex-direction:row;justify-content:space-between;background:#ff0;font-size:1.5rem">
<div v-for="dia in dias">
<span v-if="seleccionado==dia" style="background:#000;color:#fff">{{dia}}</span>
<span v-else>{{dia}}</span>
</div>
</div>
</dias-semana>
Es importante definir la propiedad inline-template cuando creamos la componente.