Começando com Vue.js
- 2. Quem sou eu ? ● Marcus Vinícius Balbi ● Analista de Sistemas - 2010 ● Rg Sistemas - 2014 ● Github: https://github.com/marcusbalbi ● Twitter: @marcusbalbi
- 3. Conteúdo da Apresentação ● Oque é Vuejs ? ● Começando com Vue – Iniciando uma instancia do vuejs – Principais diretivas – Estrutura javascript de uma instancia do vue ● Por que Vuejs ? ● Considerações Finais
- 4. Oque é Vue.js Definição Vuejs é um micro-framework focado em manipulação de dados e criação de web components.
- 5. Oque é Vue.js Objetivo O principal objetivo é simplificar a criação de views, o core do vuejs é focado exclusivamente nesta camada.
- 6. Oque é Vue.js Fácil integração com outras bibliotecas Outras bibliotecas podem ser utilizadas com o vuejs, alguns exemplos: – loadash – Underscore, – Jquery, – Axios
- 7. Criando uma Instancia Vue
- 8. Principais Diretivas – v-model ● O objetivo principal do v-model é atrelar um input HTML com uma variável do seu javascript.
- 9. Principais Diretivas – v-model
- 10. Principais Diretivas – v-if ● V-if é utilizado quando se deseja remover/exibir um elemento do HTML.
- 11. Principais Diretivas – v-if
- 12. Principais Diretivas – v-else ● O v-else deve ser obrigatoriamente utilizádo com v-if pois ele é exatamente o oposto, exatamente como em uma linguaguem de programação.
- 13. Principais Diretivas – v-else
- 14. Principais Diretivas – v-show ● A única diferença entre v-show e o v-if é que o v- show mantém o elemento HTML escondido no DOM.
- 15. Principais Diretivas – v-show
- 16. Principais Diretivas – v-for ● Utilizado quando é preciso repetir um elemento html n vezes iterando um objeto ou array javascript.
- 17. Principais Diretivas – v-for
- 18. Principais Diretivas – v-bind ● Sua função é perminir a utilização de javascript dentro de um atributo HTML.
- 19. Principais Diretivas – v-bind
- 20. Principais Diretivas – v-on ● Como o próprio nome sugere é utilizado para adicionar eventos a elementos HTML.
- 21. Principais Diretivas – v-on
- 22. 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 ‘:’
- 23. Estrutura de uma Instancia Vue Objeto data – Contém todos os dados da instancia – Qualquer dado referenciado no html por {{ }} ou v- model deve ser inicializado dentro deste objeto
- 24. Estrutura de uma Instancia Vue Objeto computed – Contém funções que são utilizadas como propriedades – Objetivo é retornar dados manipulados, tornando assim propriedades computed reativas.
- 25. Estrutura de uma Instancia Vue Objeto methods – Contém metodos que podem ser utilizados para realizar operações com os dados – Em uma lógica de cadastro por exemplo poderia existir um metodo ‘cadastrar’
- 26. Estrutura de uma Instancia Vue Função created – Esta função é chamada assim que a instancia for criada – Pode ser utilizada quando o desenvolvedor precisar efetuar alguma lógica depois que a instancia é criada
- 27. Porque o Vuejs ? ● Simplicidade – Fácil de começar a utilizar. – Documentação simples e completa. – Mais simples que outros frameworks como React, angular2, ember etc. – Comunidade disposta a ajudar.
- 28. Porque o Vuejs ? ● Desempenho – Vue 2 possui um desempenho melhor do que outros concorrentes – A biblioteca core do vuejs é menor que o jquery em Kb.
- 29. Porque o Vuejs ? ● Desempenho – outros frameworks
- 30. Porque o Vuejs ? ● Desempenho - build
- 31. Porque o Vuejs ? ● Adoção
- 32. Porque o Vuejs ? ● Adoção
- 33. Porque o Vuejs ? ● Adoção
- 34. Considerações Finais ● Outros tópicos – Componentes – Webpack – Mixins – Vue-router – Vuex – Diretivas customizadas – Testes Automatizados
Notas do Editor
- #5: Feito para ser adotado incrementalmente em uma aplicação Feito exclusivamente para construção de telas/componentes
- #6: Feito para ser adotado incrementalmente em uma aplicação Feito exclusivamente para construção de telas/componentes
- #7: Feito para ser adotado incrementalmente em uma aplicação Feito exclusivamente para construção de telas/componentes