Vue.js Brasil

Separei esse post inicialmente em 5 partes, para não ficarem muito extensos e poder utilizar de bastantes exemplos no decorrer da postagem, espero que curtam.

Continuando o assunto de como criar diretivas no Vue, vamos ver agora como fazer usando técnicas e propriedades mais avançadas. Caso você não leu a parte 1 deste artigo, recomendo fortemente você dar um olhada para entender tranquilamente o que vou falar aqui.

Filtros são usados, na maioria das vezes, para formatar valores de databind (aqueles com ). O exemplo a seguir irá pegar todo o valor de msg e transformar a primeira letra para maiúscula.

Quando criamos métodos no Vue Object nós o fazemos dentro de um objeto literal {}, que é uma forma de iniciar um objeto usando apenas as chaves.

Existem vários “editores” html/javascript no mercado. Temos o codepen, jsfiddle, jsbin, Codenvy…

Sabemos que uma interface, por melhor que seja, não é nada útil se os dados por ela gerenciados não forem salvos num banco de dados. Infelizmente utilizar os recursos do browser para salva-los é inviável, pois os dados estariam disponíveis apenas para o próprio usuário. A verdade é que desenvolvemos sistemas para compartilhar informações com outras pessoas e para isso precisamos de um local centralizado para armazenar e acessar estas informações.

Além do conjunto padrão de diretivas embarcadas, o Vue também permite registrar diretivas personalizadas que fornecem um mecanismo para alterações de dados mapeamendo o comportamento no DOM.

Vue.js é muito bom para se trabalhar com dados. Ele provê meios para acessar, modificar e validar os dados. Indo além ele atua como cola entre os elementos HTML e os dados, removendo do desenvolvedor a irritante tarefa de pegar referências aos elementos DOM apenas para mostra-los/esconde-los ou ler seus valores.

Um dos temas mais discutidos quando envolve aplicações de página única (SPA) e a otimização para mecanismos de busca (SEO) é a dificuldade de indexar as páginas no índice e fazer com que os bots reconheçam as meta tags que foram modificadas dinamicamente através da aplicação Javascript.

Vimos no artigo anterior o vue-cli, uma ferramenta de linha de comando instalada pelo npm (npm i -g vue-cli) e que é usada para criar projetos prontos com uma estrutura mínima possível (chamados de skeletion ou boilerplate).

Que o Vue-router é poderoso, isso nós já sabemos, correto?

Não, você não conhece ainda o Vue-router?
Então dá uma olhada nesse artigo publicado por Vedovelli sobre o Vue-router de maneira prática e bem explicada, para você poder já por em prática aplicações mais complexas com Vue.js.

A característica mais marcante de uma Single Page Application é a velocidade. Os elementos de interface já estão presentes e quando sua estrutura de servidor é bem montada (web service para prover os dados), a sensação que o usuário tem ao usar a aplicação é a de que a ela está instalada no próprio computador, tão rápida que é a resposta.

Espaço reservado para expor aplicações desenvolvidas com Vue.js. Se a aplicação não for pública, ainda assim será bem vinda caso se possa colocar uma descrição do processo de desenvolvimento.

Na maioria das vezes, quando nos deparamos com uma nova tecnologia, queremos de imediato testá-la, ver seu funcionamento na prática. Com o Vue isso não será diferente, e através de uma ferramenta chamada vue-cli, podemos criar uma estrutura de projeto simples, mas completa para o início de uma app em Vue.

Hangout realizado em 25 de Junho de 2016.