EtiquetaVuejs

Modificando Eventos con Vuejs

En algunos casos tenemos comportamientos en nuestra aplicaciones de eventos que se propagan de un hijo a un padre o queriamos dejar de escuchar,  nuestro querido jquery nos brindaba .off  para dejar de escuchar un evento  o event.stopPropagation() para evitar propagarlo.

Podemos realizar lo mismo en vuejs de una forma más limpia e integrada vue, en este ejemplo el evento click de contenedor player se propaga al padre.


Vuejs  nos brinda una forma elegante de evitar la propagación usando evento.stop , evitar el envio de un formulario con event.prevent  o que solo se ejecute una vez event.once.

He modificado el ejemplo anterior, haciendo uso de .once para solo permitir hacer click una vez en el team,  .prevent para evitar  el submit del form y .stop para que no propague el evento click al padre.

Como han visto es una forma muy elegante, simple de modificar el comportamiento de los eventos, si deseas saber mas sobre gestionar eventos en Vuejs
https://vuejs.org/v2/guide/events.html 

Como crear componentes con Vue ?

Vue nos permite crear componentes para hacer nuestra aplicación más desacoplada y reutilizable, en este post quiero explicar un poco sobre como crear componentes en Vue, cómo compartir data entre ellos y cómo registrarlo de forma local o global.

Porque usar componentes ?

Si tenemos una funcionalidad que quisiéramos reutilizar en otras aplicaciones o instancias, Vue nos permite crear componentes que pueden ser utilizados en la misma aplicación o en diversas, de una forma fácil y rápida.

Mi ejemplo se basa en la funcionalidad contador, que la sacaremos de estar incrustada en la aplicación a ser un componente.

Creando un Vue.Component ?

Un Vue.Component es igual que una  instancia de Vue pero con más opciones, para crear un componente utilizamos Vue.component y como primer argumento especificamos el tag del componente, ejemplo ‘my-counter’, y como segundo argumento un json object muy similar a una instancia de Vue.

Para este ejemplo voy a copiar la funcionalidad del counter de nuestra app1, pero con un cambio, como sabemos, component extiende instancia de Vue, la propiedad data del component va a interferir con nuestra instancia de data en Vue,  por eso convertimos el data del componente a una función evitar conflictos.

Ahora con agregar el nombre del tag en nuestra aplicación debe visualizar el contador, y podemos en las dos  instancias de Vue utilizar el componente <my-counter></my-counter>

Compartiendo data entre componentes

Cada instancia de components tienen el control sobre su scope de data, pero si quisiéramos compartir data entre componentes ?

Para este caso entonces podemos crear un objeto data y asignarlo a nuestro componente, Vue detectara el cambio en cada instancia de el componente y reflejara el cambio aunque sean dos aplicaciones diferentes.

Registrando componentes

Vuejs nos permite registrar los componentes de dos formas locales y globales,  en el ejemplo anterior el componente lo registramos de forma global,  eso quiere decir que cualquier app que llame el tag puede utilizar el componente, solo llamando el nombre .

Pero si quisiera llamar el componente con otro tag en mi aplicación o que mi componente solo se muestre en las apps que lo tenga registrado, entonces necesitamos un registrarlo de forma local.

Para registrar un componente de forma local,  tenemos que guardar nuestro componente en una variable y no utilizar Vue.component,  sino lo definimos como un objeto json y en nuestra aplicación utilizamos el atributo ‘components’ que es donde especificamos el tag con el cual queremos usar el componente en nuestra aplicación y como valor la variable donde hemos almacenado el componente, he aquí un ejemplo.

Pasando información a los componentes

Cada instancia de un componente en Vuejs tiene su propio ámbito aislado. Esto significa que no puede  hacer referencia directa a los datos de los padres, pero podemos  transmitir información a los componentes secundarios utilizando Props.

Un prop es un atributo personalizado para pasar información de la app al componente o de un componente padre a componente hijo, para lograr esto debemos declarar implícitamente las props que espera recibir en nuestro componente.

En este ejemplo tengo una app my-gallery que mostrara un listado de imágenes de “personas famosas de react”, para mostrar la imagen creare un componente gal-image el cual tiene una prop que se llama imageUrl, la cual permitirá que la app my-gallery le envíe la imagen a visualizar.

Utilizaré directiva v-for para iterar en el array de imágenes, como los atributos son sensibles a mayúscula y minúscula pasar el parámetro tenemos que usar kebab-case, en este caso mi propiedad se llama imageUrl pero la asigno como image-url.

Para enviar la url de la imagen a el componente no puedo usar  {{miobjeto.mipropiead}} , sino tenemos que hacer un bind a la propiedad usando v-bind o :image-url.

He aqui un ejemplo.

See the Pen vue example with components by Dany Paredes (@danywalls) on CodePen.

Happy Vue!

Directivas de Vuejs

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!

Hola Vuejs

Hace unos meses el comente a un amigo @oriolpuigbuil sobre Vuejs, pero no le di continuidad, ya que pensé que seria un framework que terminaría muriendo antes de que llegar el invierno, pero las cosas no han sido así con Vuejs.

Vuejs ha crecido en el mercado y se ha convertido en una competencia para React, no soy un experto en React, ni he podido trabajar en grandes proyectos con el, la última vez que hice algo hacé ya casi año y medio.

Porque Vuejs ?

Yo buscaba un framework fácil de usar que la curva de aprendizaje sea corta y me permita tener buenos resultados, React y Angular2 lo había probado pero muy por muy encima.

Angular2 requiere que mejore mis conocimientos en Typescript, React a pesar de haber realizado algunas pruebas, quería mirar otra opción.

Una de las cosas que mas me gusto de Vue es lo simple, crear una app solo basta con  crear un index.html importar la librería y ya podemos tener todo el potencial de Vuejs.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="col-xs-12">
        <div class="row">
        </div>
    </div>
</div>
</html>

Ahora agregamos una área de script donde tendremos el código de  Vue y creare una instancia de Vue object,  este tendrá la responsabilidad de controlar una área de nuestro html o el template de nuestra aplicación.

Para relacionar la instancia de Vue con nuestro template necesitamos pasar como parámetro un objeto json, en la propiedad “el” la cual permite especificarle a la instancia de Vue que área de nuestro html tendrá el control.

new Vue({
   el:'#app'
})

Para exponer propiedades a nuestro template usamos la propiedad data que recibe un json object también donde puedo definir la propiedad message.

new Vue({
   el:'#app',
   data: {
    message: 'Hello Vue'
   }
})

Para mostrar nuestra propiedad expuesta por data utilizamos {{  }} y el nombre de la propiedad.

<div class="row">
            {{message}}
 </div>

Aqui puedes ver todo el código funcionando.

Vue contiene varias propiedades ademas el y data, para agregar funcionalidades a nuestro componente  como computed, methods, watch que podemos explicar en mas detalle en otro post.

Happy Vue!

© 2017 Danywalls

Tema por Anders NorénSubir ↑