Hacer un hola mundo con VueJS 2

Vamos a aprender a incluir VueJS 2 en una página web y como hacer un hola mundo con VueJS 2.

Lo primero que tenemos que hacer es crear un fichero de JavaScript y definir una instancia de Vue que es la que va a controlar la interacción con el DOM etc.

Creamos el fichero main.js, creamos el objeto Vue, en la propiedad «el» definimos el nombre del elemento principal donde va a actuar Vue y en data definimos las propiedades de la clase.

new Vue({
	el: 'main',
	data: {
		hola: 'Hola mundo con VueJS 2 - victorroblesweb.es'
	}
});

Tenemos una propiedad hola con la cual podremos trabajar en las vistas.

Tenemos un fichero html en el cual importamos la libreria de Vue y mediante la interpolación {{ }} podemos mostrar el valor de la propiedad hola.

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>Hola mundo con VueJS 2 - victorroblesweb.es</title>
	</head>
	<body>
                <!-- Elemento main donde actúa la instancia Vue -->
		<main>
                    <!-- Mostramos el valor de el atributo de la clase -->
		    <h1>{{ hola }}</h1>
		</main>
                
                <!-- Incluimos el framework Vue JS 2 y el fichero que hemos creado -->
		<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>

Pues con esto ya hemos visto como incluir Vue.js 2 en un proyecto y como hacer un hola mundo con este framework 🙂

Víctor Robles WEB

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post