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 ?
Top Related