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:
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:
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
Ingrese su nombre:
<input type="text" v-model="nombre">
<p>{{nombre}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
nombre : ''
}
})
</script>
</body>
</html>
{{nombre}}
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.