Vuejs es uno de los frameworks Javascript relativamente nuevos que se esta convirtiendo en una alternativa a los enfoques de Angular2 y React. Combina dentro de sus características conceptos tanto de Angular como de React para construir un framework realmente limpio. Podemos echar un vistazo a google trends y ver cuanto esta creciendo comparado con Angular y React.
La linea amarilla representa a Vuejs mientras que la azul a Angular y la roja a React . Podemos ver como aunque ha empezado muy tarde esta creciendo rapidamente.
Usando Vuejs
Vamos a crear un par de ejemplos con Vue. Para ello nos vamos a declarar una lista de personas con su nombre y configurar Vue.js para que la imprima por pantalla.
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="persona in personas">
{{ persona.nombre }}
</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
personas: [
{ nombre: 'pedro' },
{ nombre: 'juan' },
{ nombre: 'ana' }
]
}
})
</script>
</html>
En este ejemplo se usa la directiva v-for para imprimir una lista de párrafos.
Esta lista se carga a través del atributo data de la aplicación de Vue . Como se puede observar la sintaxis a nivel de directivas es similar a Angular. Vamos a modificar el código para añadir una etiqueta de texto y un evento que nos permitan crear nuevos valores en la lista.
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="persona in personas">
{{ persona.nombre }}
</p>
<input type="text" v-model="persona.nombre"/ />
<input type="button" value="nuevo" v-on:click="nuevo" />
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
personas: [
{ nombre: 'pedro' },
{ nombre: 'juan' },
{ nombre: 'ana' }
]
,
persona: {nombre:""}
}
, methods: {
nuevo: function (event) {
this.personas.push(this.persona);
this.persona="";
}
}
})
</script>
</html>
Cada vez que pulsamos al botón se añade un nuevo elemento:
Si por algo destaca Vuejs es por su sencillez de cara al desarrollador. Algo que por ejemplo Angular 2 no ha tenido tanto en cuenta. Por lo que he podido ver hasta ahora Vue mezcla conceptos de Angular y de React . Por ejemplo, genera un VirtualDOM al estilo de React e incluye su propio modelo de componentes. Es uno de los frameworks más interesantes en estos momentos.
Otros artículos relacionados: Sublime React y el uso de JSX ,RxJS y la programación reactiva. , Angular 2 y el futuro de las arquitecturas web