Criando meu primeiro componente com Vue.js

Vue.js é uma biblioteca JavaScript que vem ganhando mais popularidade a cada dia, nesse post vamos criar nosso primeiro componente com Vue.

Luís Felipe Souza
Mar 31, 2017 · 3 min read

O que é um componente no Vue.js?

O Vue.js possui algumas pequenas diferenças em relação a especificação oficial de Web Components, mas o conceito e a forma de usar é praticamente a mesma.

O que vamos fazer?

Vamos criar um componente chamado money. A responsabilidade desse componente será exibir valores monetários na tela(Ah vá?!). No final do post, essas serão as características do nosso componente:

1. Criando componente

O primeiro passo é criar um componente Vue.js, e definir qual o nome dele, nesse caso money:

2. Definindo nosso template

Agora que já temos o componente criado, poderemos começar a passar as opções que queremos pra ele, a primeira será o template:

3. Passando um valor pro nosso componente

Reparou que estamos esperando um value no nosso template? Esse value será passado pela tag HTML do nosso componente, assim:



5. Formatando o valor exibido

Vamos utilizar uma biblioteca externa chamada Numbro, pra não nos preocuparmos com a lógica de formatar o valor do nosso componente.

Sim, pode colocar 1 bilhão que vai dar certo!

6. Adicionando um prefixo

Na sequência, vamos adicionar o segundo comportamento:

7. Colorindo o nosso valor

E por último, vamos:


http://codepen.io/luisfmsouza/pen/xggELj?editors=0010

magnetis backstage

contributing back to the community with things we learned inside magnetis

Luís Felipe Souza

Written by

Beer lover and Traveller @ Travel2Beer | Product Engineer @ Magnetis

magnetis backstage

contributing back to the community with things we learned inside magnetis