Começando com Vue.js

Embed Size (px)

Citation preview

Comeando Com Vue.js

Quem sou eu ?

Marcus Vincius Balbi

Analista de Sistemas - 2010

Rg Sistemas - 2014

Github: https://github.com/marcusbalbi

Twitter: @marcusbalbi

Contedo da Apresentao

Oque Vuejs ?

Comeando com VueIniciando uma instancia do vuejs

Principais diretivas

Estrutura javascript de uma instancia do vue

Por que Vuejs ?

Consideraes Finais

Oque Vue.js

Definio Vuejs um micro-framework focado em manipulao de dados e criao de web components.

Feito para ser adotado incrementalmente em uma aplicao

Feito exclusivamente para construo de telas/componentes

Oque Vue.js

Objetivo O principal objetivo simplificar a criao de views, o core do vuejs focado exclusivamente nesta camada.

Feito para ser adotado incrementalmente em uma aplicao

Feito exclusivamente para construo de telas/componentes

Oque Vue.js

Fcil integrao com outras bibliotecasOutras bibliotecas podem ser utilizadas com o vuejs, alguns exemplos: loadash

Underscore,

Jquery,

Axios

Feito para ser adotado incrementalmente em uma aplicao

Feito exclusivamente para construo de telas/componentes

Criando uma Instancia Vue

Principais Diretivas v-model

O objetivo principal do v-model atrelar um input HTML com uma varivel do seu javascript.

Principais Diretivas v-model

Principais Diretivas v-if

V-if utilizado quando se deseja remover/exibir um elemento do HTML.

Principais Diretivas v-if

Principais Diretivas v-else

O v-else deve ser obrigatoriamente utilizdo com v-if pois ele exatamente o oposto, exatamente como em uma linguaguem de programao.

Principais Diretivas v-else

Principais Diretivas v-show

A nica diferena entre v-show e o v-if que o v-show mantm o elemento HTML escondido no DOM.

Principais Diretivas v-show

Principais Diretivas v-for

Utilizado quando preciso repetir um elemento html n vezes iterando um objeto ou array javascript.

Principais Diretivas v-for

Principais Diretivas v-bind

Sua funo perminir a utilizao de javascript dentro de um atributo HTML.

Principais Diretivas v-bind

Principais Diretivas v-on

Como o prprio nome sugere utilizado para adicionar eventos a elementos HTML.

Principais Diretivas v-on

Principais Diretivas Atalhos

Existem os seguintes atalhos para as diretivas:V-on: O atalho para v-on o @

V-bind: O atalho para v-bind o :

Estrutura de uma Instancia Vue

Objeto dataContm todos os dados da instancia

Qualquer dado referenciado no html por {{ }} ou v-model deve ser inicializado dentro deste objeto

Estrutura de uma Instancia Vue

Objeto computedContm funes que so utilizadas como propriedades

Objetivo retornar dados manipulados, tornando assim propriedades computed reativas.

Estrutura de uma Instancia Vue

Objeto methodsContm metodos que podem ser utilizados para realizar operaes com os dados

Em uma lgica de cadastro por exemplo poderia existir um metodo cadastrar

Estrutura de uma Instancia Vue

Funo createdEsta funo chamada assim que a instancia for criada

Pode ser utilizada quando o desenvolvedor precisar efetuar alguma lgica depois que a instancia criada

Porque o Vuejs ?

SimplicidadeFcil de comear a utilizar.

Documentao simples e completa.

Mais simples que outros frameworks como React, angular2, ember etc.

Comunidade disposta a ajudar.

Porque o Vuejs ?

DesempenhoVue 2 possui um desempenho melhor do que outros concorrentes

A biblioteca core do vuejs menor que o jquery em Kb.

Porque o Vuejs ?

Desempenho outros frameworks

Porque o Vuejs ?

Desempenho - build

Porque o Vuejs ?

Adoo

Porque o Vuejs ?

Adoo

Porque o Vuejs ?

Adoo

Consideraes Finais

Outros tpicosComponentes

Webpack

Mixins

Vue-router

Vuex

Diretivas customizadas

Testes Automatizados

Consideraes Finais

Consideraes Finais

Dvidas ?