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 este id se permite relacionar el contenido del div con vue {{texto}} Este elemento permite renderizar el contenido que se encuentra en vue, en este caso el texto ‘Hola mundo!’

1
2
3

<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 elemento div
• 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 caso data contiene la variable texto la cual a su vez contiene una cadena de texto ‘Hola mundo!’ la cual es llamada en el HTML con el elemento {{texto}}.

1
2
3
4
5
6

var app = new Vue({
  el: '#hola',
  data: {
    texto: 'Hola mundo!'
  }
});

Resultado: