vuejs.pdf
- 1. Vue.js pra quem nunca viu! Fernanda Sales Bittencourt de Lemos /fsblemos/minicurso-vue /fernandasblemos /fernandasblemos fernandasblemos@gmail.com
- 2. O objetivo primário do Vue.js é criar interfaces reativas usando componentes.
- 3. Reatividade Data Bind Permite ligar um elemento do HTML à uma variável do Javascript. Ao alterar o valor da variável JS, o Vue irá automaticamente atualizar o elemento HTML. Mais fácil garantir que o que está renderizado corresponde ao estado atual
- 5. View Entrada do usuário State Renderiza A view é apenas um mapeamento do estado do sistema O estado deve ser a única fonte de dados
- 6. Reatividade Virtual DOM (Document Object Model) Representação do DOM real em objeto javascript Quando o objeto v-dom é atualizado, é calculada a diferença entre o v-dom e o DOM real, alterando então pedaços de DOM. Agrupa as alterações em uma única renderização
- 7. Render Function Template compila Objeto Virtual DOM DOM real create renderiza Watcher rastreia dependências
- 8. Componentes Web Components Capacidade de criar tags customizadas html que encapsulam estrutura (html), estilo (css) e comportamento (javascript). Trechos de html reaproveitáveis. <side-bar></side-bar> <tabs> <tab>...</tab> <tab>...</tab> </tabs>
- 9. A maioria das aplicações podem ser divididas em pequenos componentes aninhados Nav Content Item Sidebar Side Item
- 10. Cada componente é responsável por renderizar apenas sua parte do DOM Nav Content Item Sidebar Side Item Nav Content Item Sidebar
- 12. Principais diretivas ● v-show ● v-if ● v-else ● v-else-if ● v-for ● v-on ( v-on:click=”onClick” ou @click=”onClick” / escuta eventos ) ● v-bind ( :value=”2” ) ● v-model (serve para two way data bind, usado em inputs)
- 13. User Interface Components Bootstrap (HTML / CSS / JQuery) Bulma.io (CSS) UniJS (Vue.js / Bulma.io)
- 17. apm install atom-ternjs autocomplete-modules language-vue vue2-autocomplete file-icons autoclose-html highlight-selected linter-eslint https://goo.gl/j8S1vT
- 18. Obrigada!