VueJS - Introducción
Vuees un marco de JavaScript para crear interfaces de usuario. Su parte central se centra principalmente en la capa de vista y es muy fácil de entender. La versión de Vue que vamos a utilizar en este tutorial es 2.0.
Como Vue está construido básicamente para el desarrollo de frontend, vamos a tratar muchos archivos HTML, JavaScript y CSS en los próximos capítulos. Para comprender los detalles, comencemos con un ejemplo simple.
En este ejemplo, usaremos la versión de desarrollo de vuejs.
Ejemplo
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>Salida
Esta es la primera aplicación que creamos usando VueJS. Como se ve en el código anterior, hemos incluido vue.js al comienzo del archivo .html.
<script type = "text/javascript" src = "js/vue.js"></script>Hay un div que se agrega en el cuerpo que imprime “My first VueJS Task” en el navegador.
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>También hemos agregado un mensaje en una interpolación, es decir {{}}. Esto interactúa con VueJS e imprime los datos en el navegador. Para obtener el valor del mensaje en el DOM, estamos creando una instancia de vuejs de la siguiente manera:
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})En el fragmento de código anterior, estamos llamando a la instancia de Vue, que toma la identificación del elemento DOM, es decir, e1: '# intro', es la identificación del div. Hay datos con el mensaje al que se le asigna el valor‘My first VueJS Task’. VueJS interactúa con DOM y cambia el valor en el DOM {{mensaje}} con’My first VueJS Task’.
Si por casualidad cambiamos el valor del mensaje en la consola, lo mismo se verá reflejado en el navegador. Por ejemplo
Detalles de la consola
En la consola anterior, hemos impreso el objeto vue_det, que es una instancia de Vue. Actualizamos el mensaje con“VueJs is interesting” y lo mismo se cambia en el navegador inmediatamente como se ve en la captura de pantalla anterior.
Este es solo un ejemplo básico que muestra la vinculación de VueJS con DOM y cómo podemos manipularlo. En los próximos capítulos, aprenderemos sobre directivas, componentes, bucles condicionales, etc.