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
Hola Cecilio excelente artículo, felicidades
Tengo una duda, espero que puedas responder, lo agradecería mucho. Que pasa si tengo la necesidad de manejar 3 o 4 modelos?
Hasta el momento los he definido todos dentro del data pero la verdad no me gusta para nada como queda el código, existe alguna técnica o patrón a seguir para manejar mis models ? algo asi como un archivo externo donde tenga mis models ?
gracias de antemano,
No Vue esta diseñado para encargarse de la vista , para los servicios tendrías que montar tu algo 🙂
Buenas; Si bien lo veo simple.. hace unos cuantos meses que estoy con Angular 2/4/5 … Simplemente es en extremo simple. No soy dev frontend, pero si venis de Java, Angular 2o mas facilita MUCHO para desarrollo FE. Ecma 6 Ayudo muchisimo a amigar el FE con los Backend de Java. Mis 2ctvs
Excelente aporte, felicidades.
Tengo una duda respecto a los modelos, que pasa si tengo la necesidad de mantener 4 o 5 modelos diferentes ? Yo hasta el momento los he definido todos dentro de “data” pero la verdad no me agrada como queda visualmente el código. Existe alguna técnica o patrón a seguir para manejar los models? Algo así como un archivo aparte en donde tenga un repositorio de models (como si fuesen clases dto en java)… Agradecería mucho tu respuesta.
Saludos
Buenas Cecilio,
Muy bueno tu blog, lo suelo leer bastante.
Quería hacerte una pregunta, espero que puedas responderme y orientarme un poco:
Tengo algunos conocimientos de Angular y he leído y hecho cosas básicas de React y Vue2. Ahora quiero profundizar en uno de éstos framework/librerías, pero no sé muy bien por cual decantarme. ¿Cual de éstos me recomendarías usar? Y, ¿hay alguno que encaje mejor según el tipo de aplicación/entorno?
Muchas gracias por adelantado por tu respuesta.
Gracias Ruben. Es una pregunta muy abierta. Pero para mí la respuesta más clara es : Vue.js es un framework y por lo tanto te facilita mucho el desarrollo de aplicaciones SPA . Eso sí al ser un framework o le adoptas o no . No hay termino medio eso implica cambiar de una forma importante tu arquitectura. En cambio React es una librería y se puede acoplar a tecnologías ya existentes con más facilidad. Por ejemplo imagina que tienes un componente hecho con JQuery de DataTable y no te gusta como funciona. Puedes construir un nuevo componente con React… Read more »
La verdad Angular me resulta muy confuso, con este artículo me siento con la valentía de probar con VueJS. Gracias.
me alegro 🙂
Hola esto de los trends de google son una lotería, yo prefiero ver esta pagina http://bestof.js.org/tags/framework/trending/last-3-months que se basa en las descargar de los repositorios de github.
gracias por el aporte 🙂 , la hecho un vistazo
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.
me alegro que te sea útil 🙂
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!
Te agrego el link https://www.google.com.ar/trends/explore?q=Angular,React,Vuejs
gracias 🙂
Eso de google trends es super relativo, como todos los puso sin el js posterior, a excepción de vue, que lo puso como vuejs, si dejamos sólo vue, el panorama es totalmente distinto.
https://trends.google.com.ar/trends/explore?q=Angular,React,Vue
Vue los supera totalmente… si está raro eso, tampoco debería ser tanto.
Ahi ya pones a competir palabras muy muy generales y claro es difícil aclararse 🙂
que palabras has escrito exactamente ? es que a veces es dificil encajarlas del todo. Yo he puesto angularjs , reactjs y vuejs. Es que si pones por ejemplo solo Angular es muy genérico.
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
creo que ahora está 🙂
O mi tablet no está mostrando bien la página o el código html de los 2 ejemplos es el mismo :s
Muchas gracias 🙂 lo acabo de corregir a ver si ahora 😉