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

About Cecilio Álvarez Caules

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

8 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!

Deja un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies