Começando com Vue.js

Começando com Vue.js

• 1.
  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 Oprincipal objetivo é simplificar a criação de views, o core do vuejs é focado exclusivamente nesta camada.
• 6.
  Oque é Vue.js Fácilintegração com outras bibliotecas Outras bibliotecas podem ser utilizadas com o vuejs, alguns exemplos: – loadash – Underscore, – Jquery, – Axios
• 7.
  Criando uma InstanciaVue
• 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 umaInstancia 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 umaInstancia 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 umaInstancia 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 umaInstancia 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 ● Outrostópicos – Componentes – Webpack – Mixins – Vue-router – Vuex – Diretivas customizadas – Testes Automatizados
• 35.
  Considerações Finais
• 36.
  Considerações Finais Dúvidas ?