Para crear una simple
aplicación ‘Hola Mundo’ vamos a crear un archivo HTML e importa
el script de VueJS:
<html>
<head>
<title>Hola
Mundo - VueJS</title>
</head>
<body>
</body>
<script
src="https://unpkg.com/vue"></script>
</html>
Y ahora
que hemos creado el documento, necesitaremos aniadir un elemento
donde se albergara nuestra aplicación:
<body>
<div
id=”app”>
</div>
</body>
Lo
siguiente sera crear un script donde existira el codigo de nuestra
aplicación:
<script
src="https://unpkg.com/vue"></script>
<script
type="text/javascript" >
var
App = new Vue({
el:
"#app",
data:
{
message:
"Hola Mundo!",
}
});
</script>
Al crear
una instancia de Vue tenemos que enlazar el elemento del DOM que
controlara la aplicación, en este caso ‘app’, y data es una
lista/diccionario donde podemos almacenar cualquier tipo de dato que
luego podemos mostrar reactivamente en el DOM.
Si nos
vamos al navegador web y al abrir este archivo ya sea utilizando un
servidor web como XAMPP o simplemente con doble clic, nos aparecera
un documento blanco, presionamos sobre el boton F12 para abrir la
consola y se nos mostrara lo siguiente:
Desde la
consola podemos modificar los valores de las variables de nuestra
aplicación, y Vue se encargara de actualizar el valor de esta en
todos los lugares que se utilice, por esto es llamado reactivo, ya
que realiza estos cambios en tiempo real:
No hay comentarios:
Publicar un comentario