vue js (1): introducción

Primera entrada de una serie dedicada a vue js: doble binding y eventos

Nicholas Krushenick

archivado en: JavaScript / 16 marzo, 2017 / taller:

Vue js es una herramienta js para trabajar orientado a componentes muy interesante, un soplo de aire fresco frente a otros frameworks monolíticos que se están poniendo de moda, como Angular 2. Es reactivo, agnóstico, rápido y con una curva de aprendizaje relativamente baja. En cierta manera se parece a Polymer, pero también recuerda al sistema de plantillas y doble binding de Angular 1.

Aunque cuenta con una herramienta de consola para instalar la librería y preparar el scaffolding, tal y como recomiendan, para empezar es mejor hacer el trabajo a mano, descargando vue y cargándolo en el index.

<script src="js/vendor/vue.js"></script>

A partir de ahí, preparar un componente es tan sencillo como sacar una instancia de Vue. En el momento de definirla, entre otros parámetros, podemos indicar con qué nodo del dom debe asociarse y los datos dinámicos que queremos pasarle a la template, los que se renderizarán de forma dinámica para entendernos. Por ejemplo:

<body>

<div id="foo">

{{ greetings }}

</div>

<script>

var foo = new Vue({

el: '#foo',

data: {

greetings: 'Hello World!'

}

});

</script>

Como decía, Vue es un framework de naturaleza reactiva, un paradigma de programación basado en que las cosas reaccionen de forma automática cuando cambian los datos de partida. Para entenderlo, podemos imaginar que cada vez que lloviese, que cambiase el estado del aire de seco a mojado, apareciera encima de nuestras cabezas un paraguas de forma automática, sin necesidad de ir a buscarlo, abrirlo y sujetarlo.

Veamos esto en la práctica volviendo al ejemplo anterior. Añadimos un botón:

<button id="js-myButton">set greetings</button>

Y preparamos un evento que cambie el valor del saludo:

document.getElementById('js-myButton').onclick = ()=> {

foo.greetings = 'Oh la la!'

};

De esta manera, sin necesidad de volver a renderizar nada, en cuanto pulsamos el botón, se recoge el nuevo valor en la vista, en el parámetro bindeado con las dobles llaves (moustache) características de handlebars, angular 1 y otras herramientas para trabajar con templates dinámicas. Veamos esto con más detalle.

Directivas

Los datos se pueden relacionar con las plantillas html de dos maneras. Una es interpolándolos con las llaves dobles que acabamos de ver y otra mediante «directivas»,  que son unos atributos especiales que se escriben con el prefijo v-, aunque también se pueden anotar de forma abreviada con los dos puntos (:) o la arroba (@). Veamos algunas:

v-bind, sirve para definir atributos, como las clases, el id, etcétera, de forma dinámica:

<!-- template -->

<div id="js-d1" v-bind:class="myClass">{{myContent}}</div>

...

/* instancia */

var d1 = new Vue({

el: '#js-d1',

data: {

myClass: 'blueVelvet',

myContent: 'Bazinga!'

}

});

...

<!-- resultado -->

<div id="js-d1" class="blueVelvet">Bazinga!</div>

v-html, para insertar contenido con código html (las llaves siempre son texto plano).

<!-- template -->

<article>

<div id="js-d2" v-html="myContent"></div>

</article>

...

/* instancia */

var d2 = new Vue({

el: '#js-d2',

data: {

myContent: '<h3>foo</h3>'

}

});

v-if, condicional que determina si se muestra o no el contenido.

<!-- template -->

<article>

<div id="js-d3" v-if="show">Awesome!</div>

</article>

...

/* instancia */

var d3 = new Vue({

el: '#js-d3',

data: {

show: true

}

});

La directiva v-if se complementa con las directivas  v-else y v-else-if para controlar el renderizado de partes del DOM mediante condicionales.

v-for, para hacer bucles. Funciona igual que los ng-repeat de angular.

<!-- template -->

<article>

<div id="js-d4">

<ul>

<li v-for="item in myList">{{item.name}}</li>

</ul>

</div>

</article>

...

/* instancia */

var d4 = new Vue({

el: '#js-d4',

data: {

myList: [

{name: 'foo'},

{name: 'bar'}

]

}

});

Hay más directivas, pero baste con las expuestas para esta introducción. Vamos ahora con los eventos.

Eventos

También en este caso el mecanismo es parecido a angular, pues los eventos se declaran directamente en la etiqueta html mediante la fórmula:

 v-on:nombre-evento

Como valor podemos definir una expresión o invocar a un método de la instancia, el cual debe estar declarado en un objeto denominado methods.

<!-- template -->

<article id="js-e1">

<p>2 + 2 = {{result}} </p>

<button v-on:click="result=4">sumar</button>

<button v-on:click="clear()">borrar</button>

</article>

...

/* instancia */

<script>

var e1 = new Vue({

el: "#js-e1",

data: {

result: '?'

},

methods: {

clear: function() {

this.result = '?'

}

}

});

</script>

Podemos pasarle el propio evento al método enviándole la variable $event.

Modificadores

Se puede precisar el comportamiento de los eventos de forma mediante elegante mediante modificadores que se concatenan con puntos al nombre del evento.

 v-on:nombre-evento.nombre-modificador

Por ejemplo, así podríamos indicar que el evento sumar del caso anterior solo debe ejecutarse una vez:

v-on:click.once="result=4"

Los modificadores principales de los eventos de ratón son:

  • stop: para evitar la propagación del evento; equivale al stopPropagation() de javaScript normal.
  • prevent: anula el comportamiento por defecto, como el preventDefault().
  • once: para que se ejecute solo una vez.

Para el teclado, el modificador consiste en definir la tecla que debe activar el evento. Por ejemplo, de esta manera cazaríamos cuando el usuario pulsa la tecla enter en un input.

<input type="text" v-on:keyup.13="valueInput='bar'" v-bind:value="valueInput">

Las teclas más habituales también se pueden definir por su número correspondiente y también con nombres: enter, tab, delete, esc, space, up, down, left, right. Además, se pueden hacer combinaciones con ctrl, alt, shift y meta.

v-on:keyup.ctrl.enter

Bueno, como introducción creo que está bien, así que de momento lo dejo aquí. He subido los ejemplos mencionados en un gist.

|| Tags: ,

valoración de los lectores sobre vue js (1): introducción

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “vue js (1): introducción