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 🙂
