Una componente es generalmente una nueva etiqueta con una interfaz y comportamiento particular.
Veremos primero la sintaxis mínima necesaria para declarar y utilizar una componente básica con Vue.
Declarar una componente que muestre el mensaje "Hola Mundo"
<!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">
<hola-mundo></hola-mundo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('hola-mundo', {
template: `<p>
Hola mundo
</p>`
});
var app=new Vue({
el: '#aplicacion'
});
</script>
</body>
</html>
Hemos implementado la componente más sencilla que se pueda desarrollar con Vue. Seguramente lo mejor en este caso es escribir drectamente HTML que muestre el mensaje directo sin crear componentes:
<p>Hola mundo</p>
Lo primero que tenemos que hacer para crear una componente en Vue es llamar al método component y pasarle como primer parámetro el nombre de la componente y luego debemos iniciar obligatoriamente la propiedad 'template':
Vue.component('hola-mundo', {
template: `<p>
Hola mundo
</p>`
});
Recién luego de crear la componente debemos crear la instancia de la clase Vue:
var app=new Vue({
el: '#aplicacion'
});
En la vista de la página creamos una componente utilizando la nueva etiqueta creada con el método component de la clase Vue:
<hola-mundo></hola-mundo>
En la propiedad template definimos que se debe mostrar con la etiqueta 'hola-mundo'.
El lugar donde declaramos la etiqueta 'hola-mundo' se remplaza por el contenido de la propiedad 'template' de la componente:
<p> Hola mundo </p>
El resultado en el navegador tenemos el mensaje:
Algo importante que hay que tener en cuenta con la propiedad template es que siempre debe haber una etiqueta raiz y dentro de ella puede haber otras etiquetas HTML:
template: `<p>
Hola mundo
</p>`
En Javascript para definir string de múltiples lineas utilizamos el caracter de comillas especial `
template: `<p>
Hola mundo
</p>`
Con comillas comunes debemos concatenar todas las líneas:
template: '<div><p>Programa: xxxxxxxx</p>' +
'<p>Versión: xx</p></div> '