Criando um componente reusável com Vue.js

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).

O que é Vue.js?

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).
Nesse momento você pode ser perguntar: O que isso significa?

Vue em sua versão 2 une o melhor dos dois mundos Angular e React de forma extremamente simplificada, tem o melhor das directivas, Two-Way databing, filters e etc do angular e o segredo do React que o Virtual Dom.

O que componentes?

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.

Atualmente isso é o que há de mais moderno em construção de interfaces com javascript.

Vamos ao tutorial, iremos fazer um componente reusável para buscar CEP.

Primeiro iremos criar um arquivo index.html

<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author"
            content="GilcierWeb - Web Developer - [email protected] - [email protected] - Sites, Sistemas para Web, E-commerce, Manutenção de Sites."/>
    <meta name="doc-rights" content="Private"/>
    <title>Vue.js - by GilcierWeb</title>
    
    <link rel="stylesheet" type="text/css"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

</head>
<body>

<div id="app" class="container">

</div>

<!--scripts-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Vamos adicionar as libs necessarias para o funcionamento do nosso componente.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<!--scripts-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Iremos criar um arquivo .js chamado search_cep.js.

Vue.component('search-cep', {
    template: '#search-cep-template',
    data: function () {

        return {
            zip_code: '',
            state_id: '',
            city_id: '', 
            patio: '',
            complement: '',
            neighborhood: '',
            number: '',
            response_cep: [],
            is_complete: false

        }

    },

    methods: {

        search_cep: function (event) {

            if (event) {
                event.preventDefault();
            }

            this.zip_code = this.zip_code.trim().replace(/[^0-9]/g, '');

            // viacep.com.br/ws/RS/Porto Alegre/Domingos/json

            url_cep = 'https://viacep.com.br/ws/' + this.state_id + '/' + this.city_id + '/' + this.patio + '/json/';

            // clear all headers axios to viacep
            axios.defaults.headers.common = null

            axios.get(url_cep).then(function (response) {

                this.is_complete = true;
                this.response_cep = response.data;
                // jQuery('#number').focus();

            }.bind(this)).catch(function (error) {
                console.log(error.statusText);
            });

        }
    }

})

Não vou entrar em detalhes do código, pois você precisa entende um minimo de Vue.js mais o código está auto explicativo.

De volta ao arquivo index.html vamos fazer parte html do componente, vamos fazer um modal que será chamado com o titulo "Não sei meu CEP?"

<template id="search-cep-template">
    
    <!-- BEGIN FORM MODAL MARKUP -->
    <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel"
            aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header style-default-light">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="formModalLabel">Buscar CEP</h4>
                </div>
                
                <div class="modal-body">
                    
                    <form class="form-horizontal" role="form">
                        
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label for="email1" class="control-label">Rua</label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" name="patio" id="patio" v-model="patio" class="form-control"
                                        placeholder="informe o nome da rua" required="true">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label for="city_id" class="control-label">Cidade</label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text" name="city_id" id="city_id" v-model="city_id" class="form-control"
                                        placeholder="Informe a cidade" required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label for="state_id" class="control-label">Estado</label>
                            </div>
                            <div class="col-sm-9">
                                <select class="selectpicker form-control" data-live-search="true" name="state_id"
                                        id="state_id" v-model="state_id" required="true">
                                    <option value="">Selecione</option>
                                    <option value="AC">Acre</option>
                                    <option value="AL">Alagoas</option>
                                    <option value="AP">Amapá</option>
                                    <option value="AM">Amazonas</option>
                                    <option value="BA">Bahia</option>
                                    <option value="CE">Ceará</option>
                                    <option value="DF">Distrito Federal</option>
                                    <option value="ES">Espírito Santo</option>
                                    <option value="GO">Goiás</option>
                                    <option value="MA">Maranhão</option>
                                    <option value="MT">Mato Grosso</option>
                                    <option value="MS">Mato Grosso do Sul</option>
                                    <option value="MG">Minas Gerais</option>
                                    <option value="PR">Paraná</option>
                                    <option value="PB">Paraíba</option>
                                    <option value="PA">Pará</option>
                                    <option value="PE">Pernambuco</option>
                                    <option value="PI">Piauí</option>
                                    <option value="RJ">Rio de Janeiro</option>
                                    <option value="RN">Rio Grande do Norte</option>
                                    <option value="RS">Rio Grande do Sul</option>
                                    <option value="RO">Rondônia</option>
                                    <option value="RR">Roraima</option>
                                    <option value="SC">Santa Catarina</option>
                                    <option value="SE">Sergipe</option>
                                    <option value="SP">São Paulo</option>
                                    <option value="TO">Tocantins</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                            <button type="button" class="btn btn-primary"
                                    v-on:click.prevent.stop="search_cep">Buscar CEP
                            </button>
                        </div>
                    </form>
                    
                    <table v-if="is_complete" class="table table-bordered no-margin">
                        <thead>
                        <tr>
                            <th>Endereço</th>
                            <th>CEP</th>
                            <th>Ação</th>
                        </tr>
                        </thead>
                        <tbody>
                        
                        <tr v-for="row_cep in response_cep">
                            <td>{{row_cep.logradouro}} {{row_cep.complemento}} {{row_cep.bairro}} {{row_cep.localidade}} {{row_cep.uf}}</td>
                            <td><strong>{{row_cep.cep}}</strong></td>
                            <td>Escolher</td>
                        </tr>
                        
                        </tbody>
                    </table>
                
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- END FORM MODAL MARKUP -->

</template>

Veja como chamamos nosso componente.

<button class="btn btn-default-bright btn-raised" data-toggle="modal" data-target="#formModal">Não sei meu CEP?</button>
<div id="app-modal">
        <search-cep></search-cep>
</div>

Criaremos uma função para auto preencher os campos caso a pessoa já saiba o CEP.

element = document.getElementById("app")

if (element != null) {

    var app = new Vue({
        el: "#app",
       data: function () {

            return {

                zip_code: '',                             
                patio: '',
                complement: '',
                neighborhood: '',
                number: '',
                state_id: '',
                city_id: '',
                response_cep: [],
                is_complete: false

            }
           },
            
            methods: {

                load_cep: function (event) {

                    var url_cep, self;
                    
                    if (event) {
                        event.preventDefault();
                    }
                                      
                    this.zip_code = this.zip_code.trim().replace(/[^0-9]/g, '');

                    url_cep = 'https://viacep.com.br/ws/' + this.zip_code + '/json';

                    // clear all headers axios to viacep
                    axios.defaults.headers.common = null;

                    axios.get(url_cep).then(function (response) {

                        this.patio = response.data.logradouro;
                        this.complement = response.data.complemento;
                        this.neighborhood = response.data.bairro;
                        this.state_id = response.data.localidade;
                        this.city_id = response.data.localidade;

                        jQuery("#number").focus();

                    }.bind(this)).catch(function (error) {
                        console.log(error.statusText);
                    });

                }
                
            }
    });

}

Veja o demo do nosso componente.

https://codepen.io/gilcierweb/pen/GEarJE

https://gist.github.com/gilcierweb/82b4bb3dd1cd5c0e195c566520f7db8a

Espero ter ajudado alguém!

Fontes:

Grupo Vue.js Brasil

https://vuejs.org/

https://github.com/vuejs/awesome-vue

https://tableless.com.br/conheca-o-vue-js-um-framework-javascript-para-criacao-de-componentes-web-reativos/

http://www.vuejs-brasil.com.br/por-que-vuejs-e-uma-boa-opcao/

GilcierWeb

Desenvolvedor Web e Freelancer - Os Melhores Links

Fortaleza Ceará Brasil

Criando um componente reusável com Vue.js

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).