Vuejs una alternativa a React y Angular

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.

 

vue js

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.

vuejslista

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:

vuelistaadd

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

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

About Cecilio Álvarez Caules

Cecilio Álvarez Caules Sun Certified Enterprise Architech (J2EE/JEE).

10 Responses to Vuejs una alternativa a React y Angular

  1. Juanmi 9 Diciembre, 2016 at 17:40 #

    O mi tablet no está mostrando bien la página o el código html de los 2 ejemplos es el mismo :s

    • Cecilio Álvarez Caules 9 Diciembre, 2016 at 20:03 #

      Muchas gracias 🙂 lo acabo de corregir a ver si ahora 😉

  2. Rodrigo 9 Diciembre, 2016 at 18:03 #

    El código de añadir nuevo elemento es el mismo de listar, creo que se te han entreverado al subir el artículo.
    Saludos

    • Cecilio Álvarez Caules 9 Diciembre, 2016 at 20:16 #

      creo que ahora está 🙂

  3. Germán 16 Diciembre, 2016 at 22:13 #

    Estimado Cecilio, dando un vistazo a google trends, me dan tendencias distintas al gráfico publicado. Si bien crecio vuejs, está actualmente muy por debajo de angular y react, como resultado de mi análisis.
    Saludos!

  4. David 13 Marzo, 2017 at 9:26 #

    Muy buen post, la verdad creo que vue.js tal y como están los tiempos merece una oportunidad se agradece mucho su sencillez y la sensación de tener el control absoluto de lo que haces.

    • Cecilio Álvarez Caules 13 Marzo, 2017 at 11:50 #

      me alegro que te sea útil 🙂

Deja un comentario