Onde Já Se VUE?
Introdução ao VUE JS
Cristiano Gonçalves
Desenvolvedor Front-End
Twitter: @Gonkristiano
Blog: crisgon.github.io
Tornar a experiência
do usuário algo
extremamente
agradável.
Qual o problema?
A web atual é
altamente complexa.
Antes
Hoje
As aplicações possuem
diferentes estados
em uma única página.
Surge a necessidade
de reciclar parte das
aplicações.
Web
Components
É a capacidade de criar suas
próprias tags html que encapsulam
estrutura(html), estilo(css) e
interação(javascript)
Web components
Isso não é nada recente e é padronizado pela w3c, porém sua implementação não
é uma tarefa simples.
Olha que eu nem falei
sobre a manipulação
do DOM...
O que é o Vue js?
O que é o Vue js?
Vue (pronuncia-se /vjuː/, como view, em inglês) é um framework progressivo para
a construção de interfaces de usuário. Ao contrário de outros frameworks
monolíticos, Vue foi projetado desde sua concepção para ser adotável
incrementalmente. A biblioteca principal é focada exclusivamente na camada
visual (view layer), sendo fácil adotar e integrar com outras bibliotecas ou projetos
existentes. Por outro lado, Vue também é perfeitamente capaz de dar poder a
sofisticadas Single-Page Applications quando usado em conjunto com ferramentas
modernas e bibliotecas de apoio.
O Vue foi criado por Evan You
depois de trabalhar para o Google
usando o AngularJS em vários
projetos.
"Eu imaginei, e se eu pudesse
extrair a parte que eu realmente
gostei sobre o Angular e construir
algo realmente leve"?
O Vue foi lançado originalmente
em fevereiro de 2014 e sua versão
atual é a 2.6. Porém seu “bom”
iniciou em 2015.
Comunidade
Reatividade
Reatividade
Basicamente, nossos objetos vão
ter whatchers (observadores) que
vão ficar esperando alguma
mudança para então atualizar o
DOM.
Ecossistema
● Vuex para gerenciamento de estado.
● Vue-router para gerenciamento de rotas
● Vue-Cli para auxiliar na criação de projetos
● Vue dev tools para debugar
● Vue-Loader
● Vue-class-component
Algumas similaridades com o React
React e Vue compartilham muitas similaridades. Ambos:
● utilizam a abordagem de DOM virtual.
● provêm componentes visuais reativos e combináveis.
● mantêm o foco na biblioteca principal, com preocupações como roteamento
e gerenciamento de estado global tratadas por bibliotecas companheiras.
Algumas similaridades com o React
“MobX se tornou bem popular na comunidade React e, de fato, utiliza um sistema
de reatividade quase idêntico ao Vue. De forma simplista, o fluxo de trabalho
React + MobX pode ser pensado como um Vue com código mais prolixo. Por isso,
se você estiver usando essa combinação e estiver gostando, saltar para o Vue é,
provavelmente, o próximo passo lógico.”
Como usar?
Vue JS tem a curva de aprendizado menor que a do
react e do angular.
Diretivas
Diretivas são basicamente como atributos HTML. No vue js as diretivas começam
com “v-”, para que o vue diferencie diretivas de atributos padrões do html.
Diretivas
● V-if
● V-else
● V-show
● V-for
● V-on
● V-text
● V-bind
● V-model
● V-once
Ciclos de vida
● beforeCreate
● created
● beforeMount
● Mounted
● beforeUpdate
● updated
● beforeDestroy
● destroyed
Liberdade
Use template, jsx, sass, stylus, pug
ou o que você quiser.
Obrigado!!
https://br.vuejs.org/

Introdução ao VUE JS

  • 1.
    Onde Já SeVUE? Introdução ao VUE JS
  • 2.
    Cristiano Gonçalves Desenvolvedor Front-End Twitter:@Gonkristiano Blog: crisgon.github.io
  • 3.
    Tornar a experiência dousuário algo extremamente agradável.
  • 4.
  • 5.
    A web atualé altamente complexa.
  • 6.
  • 7.
  • 9.
    As aplicações possuem diferentesestados em uma única página.
  • 11.
    Surge a necessidade dereciclar parte das aplicações.
  • 12.
    Web Components É a capacidadede criar suas próprias tags html que encapsulam estrutura(html), estilo(css) e interação(javascript)
  • 14.
    Web components Isso nãoé nada recente e é padronizado pela w3c, porém sua implementação não é uma tarefa simples.
  • 15.
    Olha que eunem falei sobre a manipulação do DOM...
  • 17.
    O que éo Vue js?
  • 19.
    O que éo Vue js? Vue (pronuncia-se /vjuː/, como view, em inglês) é um framework progressivo para a construção de interfaces de usuário. Ao contrário de outros frameworks monolíticos, Vue foi projetado desde sua concepção para ser adotável incrementalmente. A biblioteca principal é focada exclusivamente na camada visual (view layer), sendo fácil adotar e integrar com outras bibliotecas ou projetos existentes. Por outro lado, Vue também é perfeitamente capaz de dar poder a sofisticadas Single-Page Applications quando usado em conjunto com ferramentas modernas e bibliotecas de apoio.
  • 20.
    O Vue foicriado por Evan You depois de trabalhar para o Google usando o AngularJS em vários projetos. "Eu imaginei, e se eu pudesse extrair a parte que eu realmente gostei sobre o Angular e construir algo realmente leve"?
  • 21.
    O Vue foilançado originalmente em fevereiro de 2014 e sua versão atual é a 2.6. Porém seu “bom” iniciou em 2015.
  • 22.
  • 24.
  • 25.
    Reatividade Basicamente, nossos objetosvão ter whatchers (observadores) que vão ficar esperando alguma mudança para então atualizar o DOM.
  • 26.
    Ecossistema ● Vuex paragerenciamento de estado. ● Vue-router para gerenciamento de rotas ● Vue-Cli para auxiliar na criação de projetos ● Vue dev tools para debugar ● Vue-Loader ● Vue-class-component
  • 27.
    Algumas similaridades como React React e Vue compartilham muitas similaridades. Ambos: ● utilizam a abordagem de DOM virtual. ● provêm componentes visuais reativos e combináveis. ● mantêm o foco na biblioteca principal, com preocupações como roteamento e gerenciamento de estado global tratadas por bibliotecas companheiras.
  • 28.
    Algumas similaridades como React “MobX se tornou bem popular na comunidade React e, de fato, utiliza um sistema de reatividade quase idêntico ao Vue. De forma simplista, o fluxo de trabalho React + MobX pode ser pensado como um Vue com código mais prolixo. Por isso, se você estiver usando essa combinação e estiver gostando, saltar para o Vue é, provavelmente, o próximo passo lógico.”
  • 29.
  • 30.
    Vue JS tema curva de aprendizado menor que a do react e do angular.
  • 34.
    Diretivas Diretivas são basicamentecomo atributos HTML. No vue js as diretivas começam com “v-”, para que o vue diferencie diretivas de atributos padrões do html.
  • 35.
    Diretivas ● V-if ● V-else ●V-show ● V-for ● V-on ● V-text ● V-bind ● V-model ● V-once
  • 36.
    Ciclos de vida ●beforeCreate ● created ● beforeMount ● Mounted ● beforeUpdate ● updated ● beforeDestroy ● destroyed
  • 37.
    Liberdade Use template, jsx,sass, stylus, pug ou o que você quiser.
  • 38.