Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Vue.js: primeros pasos - parte 2

Vue.js: primeros pasos - parte 2

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.

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal