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> '