Simple Icons
Simple Icons – Icons SGV prontos para serem usados em seu app
15 de setembro de 2017
Grid Layouts – mude sua forma de criar layouts web
20 de setembro de 2017

Criando um componente com Vue.js

vue

Neste artigo ensinarei como criar um componente simples com o framework vue.js. Tenho estudado esse cara e me apaixonado cada vez mais pela sua performance e mínima curva de aprendizado, o que é muita coisa para um framework Javascript, principalmente quando comparado com seus brothers React e Angular.

O que é Vue.js?

Não vou me aprofundar no que é o Vue.js, não neste artigo. Mas para você não ficar boiando, caso chegue até o artigo e não saiba o que é este querido amigo dos JavaScript Developers, vou pegar emprestado a definição da galera do Vue.js Brasil:

Vue.JS, VueJS ou simplesmente Vue é uma biblioteca (lib) javascript para o desenvolvimento de componentes reativos para interfaces web modernas (Reactive Components for Modern Web Interfaces).

Alias, super recomendo a leitura do artigo abaixo:

Por que VueJS é uma boa opção?

O que são componentes?

Ainda “pegando emprestrado” outra definição dos caras do Vue.js Brasil:

Em resumo são “pedaços de código” que contém marcação, estilo e comportamento (html, css e javascript) e que juntos podem compor interfaces extremamente reaproveitáveis.

Uma das características dos web components é a possibilidade de usar eles como tags html customizadas (custom tags), sendo fácil de usar, ler e entender como uma interface (tela) esta sendo construída.

Tudo isso começou com o React, foi adotado pelo Angular (e muitos outros, como o Aurelia), mas teve seu grand finale com o Vue, pois este cara conseguiu unir o que havia de melhor dessa tecnologia e disponibilizar de uma maneira bem simples.

Criando nosso primeiro componente Vue.js

Para criar um componente Vue.js, primeiro é preciso importar o Vue para o seu projeto. Você pode fazer isso de várias maneiras… Uma delas é usar o CDN do própro Vue, e faremos isso no arquivo HTML:

<script src=”https://unpkg.com/vue”></script>
 
Outros exemplos:
 
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js”></script>
 
Outra maneira é fazer a importação do Vue como dependência do seu projeto:
NPM: npm install vue –save
Bower: bower install vue –save
 
Com o Vue adicionado ao seu projeto, precisamos criar a estrutura HTML que renderizará nosso componente:
 
<div id=”root”>
   <tarefa>Ir para o trabalho</tarefa>
   <tarefa>Ir para a academia</tarefa>
   <tarefa>Ir para o curso de inglês</tarefa>
</div>
 
No arquivo .js (JavaScript), criaremos uma nova instância do Vue:
 
var app = new Vue ({
   el:”#root”
})
 
Registraremos um componente global, seguindo a documentação: Vue.component(tagName, options).
 
Vue.component (
   ‘tarefa’,
   {template: ‘<li> <slot></slot> </li>’}
)
 
Neste caso, como estamos inserindo o conteúdo direto no HTML, usaremos no Vue a tag slot, responsável por permitir que o conteúdo seja trabalhado desta forma. Se fossemos inserir o conteúdo diretamente no arquivo.js, usaríamos a seguinte estrutura:
 
HTML
<div id=”root”>
<tarefa>Ir para o trabalho</tarefa>
<tarefa>Ir para a academia</tarefa>
<tarefa>Ir para o curso de inglês</tarefa>
</div>
 
JavaScript
 
Vue.component (
   ‘tarefa’,
   {template: ‘<li> conteúdo do template </li>’} 
)
var app = new Vue ({
   el:”#root”
})
 
Segue abaixo o componente completo, já com o resultado para você avaliar:
 
 

Espero que tenha gostado! Logo mais escreverei um pouco mais sobre o Vue.js. Abraços e não esqueçam de compartilhar o artigo!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *