Hola gente del futuro.
En el artículo Vue.js: primeros pasos vimos lo necesario para poner en marcha VueJS creando nuestro Hola mundo, esta es la segunda parte, vamos a adentrarnos un poco más.
Recuerda incluir el script de VueJS en tu HTML.
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
Una de las cosas que llaman la atención de VueJS es su reactividad, veamos un ejemplo.
See the Pen Vue.js: primeros pasos parte 2 by Daniel Romero (@danielromeroauk) on CodePen.
VueJS provee la directiva v-model que hace una unión bidireccional entre el input de formulario y el estado/valor de data de VueJS.
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
const app = new Vue({
el: '#app',
data: {
message: '¡Hola EDteam!'
}
})
Ahora cada vez que cambiemos el valor del input cambiará en tiempo real el texto del párrafo, sucede lo mismo si en algún punto de nuestra aplicación el valor de message cambia, todos los elementos enlazados se actualizarán automáticamente.
En nuestro ejemplo hemos enlazado el estado de app.message al párrafo y al input, si abrimos la consola del navegador y cambiamos el valor, ambos se actualizarán:
app.message = 'Hola gente del futuro';
Eso es todo por ahora futuro desarrollador que usará Vue en sus proyectos, nos leemos en el siguiente artículo.