1-VUE JS- DIRECTIVAS
Vue es un framework de Javascript progresivo para la generación de interfaces visuales.
Está pensado para su fácil adopción en aplicaciones pequeñas pero tiene la posibilidad de generar componentes y ser reutilizadas en proyectos medianos y grandes.
Sus principales competidores son Angular (Google) y React (Facebook), a diferencia de estos Vue no es un desarrollo de una gran empresa pero tiene el apoyo de muchas pequeñas y una gran comunidad.
Es un proyecto iniciado por Evan You en 2014, dicho autor trabajó en Google para el framework Angular.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Una vez importado el framework podemos crear un objeto de la clase Vue y le pasamos como pámetro un objeto literal con dos atributos llamados 'el' y 'data':
var app = new Vue({
el:'#aplicacion',
data:{
mensaje: 'hola mundo Vue'
}
})
Esos nombres para los atributos no son un capricho, el atributo 'el' hace referencia al 'id' de un elemento HTML definido previamente:
<div id="aplicacion">{{mensaje}}</div>
El atributo 'data' es otro objeto literal que definimos un nombre arbitrario llamada 'mensaje' y su valor es un string:
data:{
mensaje: 'hola mundo Vue'
}
Dentro del elemento HTML div hemos dispuesto entre dobles llaves el nombre del atributo 'mensaje' definido en el objeto 'app' de la clase Vue. El valor se extrae de la propiedad 'data':
{{mensaje}}
Este concepto de recuperar datos del modelo y mostrarlos en la vista con las dobles llaves se llama interpolación.
Cuando cargamos la página HTML en el navegador podemos comprobar que dentro del div se remplaza la expresión {{mensaje}} por el valor almacenado en la propiedad 'mensaje'.
Ese proceso de modificar el contenido de página lo hace el framework Vue en forma transparente gracias al objeto "app" de la clase Vue que creamos, lo logra ya que le pasamos la referencia del id del 'div' y dentro del div definimos la expresión.
Una directiva es un atributo de un elemento HTML que luego va a interpretar el framework Vue.
Las directivas siempre comienzan con los caracteres "v-" y son ejemplos de directivas:
- v-bind
- v-model
- v-if
- v-else
- v-for
Existen muchas más pero nombramos estas que serán las que primero utilizaremos.
Veamos como se define una directiva en un elemento HTML:
<input type="text" v-model="nombre">
La directiva v-model asocia el dato que se ingresa en el control "input" con un atributo del modelo de datos que debe definirse luego en Javascript:
var app=new Vue({
el: '#aplicacion',
data:{
nombre : ''
}
})
El atributo "data" tiene un atributo llamado "nombre" que coincide con el valor almacenado en la directiva v-model. Esta directiva asocia en forma bidireccional la parte visual (nuestro control input) y nuestro modelo de datos.
Cualquier cambio que produzca el usuario ingresando información en el control input luego se refleja en el atributo "nombre" del objeto Vue. Lo mismo sucede con cualquier cambio que se provoque en el atributo "nombre" luego se refleja en el control input.
Si disponemos un valor inicial en el atributo nombre luego se refleja en el input:
var app=new Vue({
el: '#aplicacion',
data:{
nombre : 'Juan'
}
})
La página completa de este problema es:
Para ver este cambio en tiempo real hemos dispuesto en la vista que se muestre el valor de la propiedad "nombre" del modelo de datos:
<p>{{nombre}}</p>
Ahora cuando ejecutamos la página al ingresar un caracter en el control HTML input inmediatamente Vue detecta dicho caracter y lo almacena en el atributo "nombre", pero también actualiza la vista donde hemos dispuesto {{nombre}}.
Todo el proceso de comunicación bidireccional lo hace el framework Vue en forma transparente para nosotros.
Comentarios
Publicar un comentario