Vue - Hola Mundo!
En el ejemplo del hola mundo se puede observar como en el archivo HTML se creo un elemento div
con un id="hola"
y el cual contiene un elemento dentro de un par de llaves {{texto}}
id="hola"
Con esteid
se permite relacionar el contenido deldiv
con vue{{texto}}
Este elemento permite renderizar el contenido que se encuentra en vue, en este caso el texto ‘Hola mundo!’
<div id="hola">
{{ texto }}
</div>
En el archivo JS se coloca toda la logica, en este caso solo consta de 2 elementos en particular el
y data
el
este elemento define un identificador el cual enlaza la logica de vue a un elemento del HTML en particular. En este ejemplo el elementodiv
data
es uno de los elementos que nos proporciona vue para interactuar con el HTML,data
permite definir variables y pasarlas al HTML. En este casodata
contiene la variabletexto
la cual a su vez contiene una cadena de texto ‘Hola mundo!’ la cual es llamada en el HTML con el elemento{{texto}}
.
var app = new Vue({
el: '#hola',
data: {
texto: 'Hola mundo!'
}
});
Resultado: