Vue nos ofrece un listado de directivas para facilitar el desarrollo de SPA o componentes, las cuales nos permiten realizar binding, controlar visualización, escuchar eventos y varios aspectos. En este post trato de mencionar alguna de ellas.

v-bind

En el post anterior para mostrar una propiedad en data usamos {{message}} , pero si queremos realizar el bind en un atributo de un elemento sería diferente no podemos usar:

<input type="button" value="{{message}}/>

Para realizar el binding sobre un atributo de un elemento html, entonces usamos la directiva v-bind: especificando el atributo y asignando la propiedad, en el ejemplo asigno la propiedad mensaje al atributo value.

<div id="app">
<h1>{{message}}</h1>
<input type="button" v-bind:value="message"/>
</div>

v-on:

Esta directiva nos permite escuchar un evento de un elemento, por ejemplo detectar el mouseout sobre un h2  y llamar el método getTime.

<div id="app">
<h1>{{message}}</h1>
<h2 v-on:mouseout="getTime">{{currentTime}}</h2>
<input type="button" v-bind:value="message"/>
</div>

new Vue({
el:"#app",
data:{
message: "Vue Mola",
currentTime: new Date().toISOString().slice(11, -1)
},
methods:{
getTime:function(){
this.currentTime = new Date().toISOString().slice(11, -1); 
}
}
})

Además podemos agregando el parámetro  $event podemos obtener información del evento  o podemos detener eventos como el click o preventdefault para evitar efecto burbuja o detectar teclas v-on:keyup.enter.space para saber cuando presionan la tecla enter o space.

https://vuejs.org/v2/guide/events.html

v-once

Nos permite asignar que una propiedad sea evaluada solo una vez, esto es útil si queremos mantener el valor inicial y solo evaluara una vez esta propiedad.

<h2 v-once>{{currentTime}}</h2>
<h2 v-on:mouseout="getTime($event)">{{currentTime}}</h2>

v-html

Esta directiva nos permite inyectar html o elementos dinámicos en el DOM, como input, href o buttons.

<div id="app">
<div v-html="myinput"></div>
</div>
new Vue({
el:"#app",
data:{
myinput: "<input type='text'>"
}
})

v-model:

Nos permite el “two-way binding” a una propiedad pero este solo funciona en algunos elementos como input, checkbox etc.

<input type="text" v-model="message"/>
<p>{{message}}</p>

v-if

Podemos condicionar la visualización de un elemento, pero con un aspecto especial este, remueve el elemento de DOM tiene su importancia si estamos creando una spa que crea mucho html y queremos eliminar carga del DOM.

<div v-if="visible">
 <h1>Estoy visible</h1>
</div>

v-else

Esta directiva trabaja junto con v-if para realizar lo contrario a v-if.

<div v-if="hasUser">
<h1>Hay usuarios</h1>
</div>
<div v-else>
<h2>No tenemos usuarios conectados </h2>
</div>

v-show

Nos permite ocultar un elemento en el DOM, pero manteniendo su existencia en pocas palabras un display:none en toda regla.

<div v-show="isactive">
<h2>I'm active</h2>
</div>

v-for

Este nos permite iterar en arrays de elementos y acceder a sus objetos almacenados.

<div class="player" v-for="player in players">
<p>{{player}}<p>
</div>

Como ves Vuejs nos da un aire a angular 1x, si has trabajado con el, en otro post a prueba algunas de estas directivas.

Happy Vue!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *