O documento apresenta os principais conceitos e benefícios do framework Vue.js, incluindo seu criador Evan You, componentes, Single Page Applications, diretivas, ciclo de vida de instâncias, e integração com bibliotecas como Vuex e Vue Router.

1. Conhecendo os
benefícios do VueJS e
seu ecossistema
Pedro Barros

2. Vamos nos conhecer?!

3. About me
- Desenvolvedor em Unimed Maceió;
- Formado Técnico em Informática;
- Graduado em Análise e Desenvolvimento
de Sistemas;
- Especialista em Engenharia de Software;
- Pós-graduando em MBA Gerência de
Projetos. Redes sociais
pedroebarros
ped.barros
pedbarros
pedbarros

4. Coisas que eu aprendi na carreira
● Adote uma estrutura que auxilie a resolver seu problema;
● Para cada problema, existe um framework que irá mais atender;
● Sempre haverá um novo framework popular;
● Escolha um que seja estável e domine-o;
● Não tenha medo de mexer primeiro;
NUNCA PARE DE APRENDER!!!

6. Evan You
● Criador do VueJs;
● Começou o Vue como um projeto pessoal
quando estava trabalhando no Google
Creative Labs em 2013;
● Queria algo mais simples e acessível;
● Em 2016, trabalhou full-time no projeto do
Vue.
● Primeiro lançamento Fev. 2014 (v0.6)
● Primeira versão estável Out. 2015 (v1.0.0)
● Última versão estável: 2.5.16
https://github.com/open-source/stories/yyx990803

7. Evan You

8. https://www.patreon.com/evanyou

9. https://br.vuejs.org/v2/guide/comparison.html

10. Empresas que usam o VueJS no Brasil
https://github.com/vuejs-br/empresas-que-usam-vue-no-brasil

11. Framework ou Library?

12. O que é Vue.js?
● Library progressiva;
● Dar poder as Single-Page Applications (SPA);
● Rápida, eficaz e com pouca curva de aprendizado.
https://br.vuejs.org/v2/guide/index.html

13. Single-Page Applications

14. Objetivo do Vue.js?
O objetivo primário do Vue.js é criar interfaces reativas usando
componentes.

15. Podemos aumentar a complexidade da estrutura incrementalmente,
somente quando a complexidade do projeto exige isso.
Evan You, Criador do Vue.js
http://blog.evanyou.me/2015/12/20/vuejs-2015-in-review/

16. Como conheci o VueJs?

17. https://t.me/vuejsbrasil
https://www.facebook.com/groups/vuejsbr/
Comunidade, comunidade e comunidade!

18. Componentes

19. Componentes

20. Características dos componentes
● Pequenas unidades;
● Altamente especializados;
● Facilmente testáveis;
● Permitem composição;
● Fazem com que você DRY; (Don't repeat yourself (em português
Não repita a si mesmo)
● Encapsulam estrutura, visual e comportamento.
INTERAGE INFORMAÇÃO ENTRE SI

23. Pré-requisito: NODEJS
$ npm install -g @vue/cli
# or
$ yarn global add @vue/cli

24. Criando um projeto
$ vue create nomeDoMeuProjeto

26. Rodando a aplicação
$ cd nomeDoMeuProjeto
$ npm run serve

28. $ vue ui

29. Vue UI

30. Vue UI

31. Vue UI

33. Babel
https://babeljs.io/

34. Webpack
https://webpack.js.org/

35. DOM

36. Como VueJS atualiza o DOM

37. Ciclo de vida de uma instância Vue

41. Single File Components

42. Diretivas

43. Binding HTML Classes

44. Event handling

45. Renderização Condicional

46. Loops

47. https://router.vuejs.org/
https://nuxtjs.org/
https://vuex.vuejs.org/

48. Vuex
● Padrão de gerenciamento de estado para aplicativos Vue.js;
● Store centralizado;
● Integração com a extensão oficial Vue devtools;
● Depuração viajando pelo histórico de estado (time travel).
https://vuex.vuejs.org/

50. Vue DevTools

51. AutorizacaoComponent

52. Router

53. Vuex

54. E no mobile?
Quasar Framework NativeScript-Vue Vue-Native

55. Ionic Vue Beta
https://blog.ionicframework.com/announcing-the-ionic-vue-beta/

56. VuePeople
https://vuepeople.org/

57. VuePeople

58. https://hasvuepassedreactyet.surge.sh/

59. https://twitter.com/youyuxi/status/1007450116184248320

60. Obrigado!