Hola mundo! en Vue.js 2
En nuestro artículo anterior vimos una Introducción a Vue.js en donde abarcamos algunas de las características más importantes de este framework. El día de hoy crearemos nuestra primera aplicación en Vue.js 2, el clásico "Hola mundo!".
El primer paso consiste en agregar el framework desde la red de entrega de contenidos. Puedes agregar el script para desarrollo así.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
O agregar la versión de producción (minificada) de la siguiente manera.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
El siguiente paso consisten en indicar un contexto, o lo que es lo mismo indicar en qué parte del DOM va a funcionar Vue. Para esto basta asignar un id a un elemento del DOM.
<div id="app">
{{ '\{\{ message \}\}' }}
</div>
El contenido del elemento div contiene el código necesario para imprimir el valor de la variable mensaje. ¿Pero dónde está definida esta variable y este contexto ?. La respuesta es simple, un script de Vue en donde se define el elemento y la data que está disponible.
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});
El HTML final debería ser similar al siguiente.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ '\{\{ message \}\}' }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>
El resultado final será el texto Hello World! renderizado en el navegador. Recuerdas nuestra Introducción a Vue.js en donde especificamos que Vue.js era un framework reactivo ?. Pues veamos que el HTML cambia a medida que cambia la data en Vue. Si ejecutas el siguiente código en el navegador, que básicamente cambia la data, podrás ver cómo cambiar el texto en el HTML también.
app.message = 'Nuevo Texto!'Puedes ver este ejemplo corriendo a continuación en CodePen.