Vuejs

 Vuejs

Talk realizada no Front in Maceió 2017 sobre o Vuejs.

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

March 18, 2017
Tweet

Transcript

  1. Vue.js Thulio Philipe @thulioph Web Developer

  2. Viu-Djêi-Éss (vuejs)

  3. Thulio Philipe @thulioph Web Developer @labcodes Web Apps @unibratec Team

    @devbeers " ⚙
  4. Thulio Philipe @thulioph_ Web Developer @labcodes Web Apps @unibratec Team

    @devbeers " ⚙
  5. Atenção!

  6. • O slides serão disponibilizados. Atenção!

  7. • O slides serão disponibilizados. • Não se preocupe com

    links, todos estão nos slides. Atenção!
  8. • O slides serão disponibilizados. • Não se preocupe com

    links, todos estão nos slides. • Tome nota de alguns termos, pode ser útil para uma pesquisa futura. Atenção!
  9. • O slides serão disponibilizados. • Não se preocupe com

    links, todos estão nos slides. • Tome nota de alguns termos, pode ser útil para uma pesquisa futura. • Esta palestra pode conter imagens de gatos. Atenção!
  10. Conceitos

  11. goo.gl/cgbP0l Components

  12. components

  13. components

  14. Stateful goo.gl/knaTae

  15. const hour = 1; const increment = () => hour

    + 1; increment(); // 2
  16. goo.gl/knaTae Stateless

  17. const hour = 1; const increment = (a) => a

    + 1; increment(hour);
  18. Web components webcomponents.org

  19. Uma coleção de web apis que permitem você criar novas

    tags HTML reusaveis e totalmente customizadas.
  20. Uma coleção de web apis que permitem você criar novas

    tags HTML reusaveis e totalmente customizadas
  21. 1. Custom Elements 2. HTML imports 3. HTML Template 4.

    Shadow DOM
  22. 1. Custom Elements 2. HTML imports 3. HTML Template 4.

    Shadow DOM
  23. Especificação que permite utilizar novos tipos de elementos DOM custom

    elements
  24. Define como você encapsula estilo e marcação no componente shadow

    DOM
  25. Webpack webpack.js.org

  26. import bar from './bar'; bar(); app.js

  27. export default function bar() { console.log('Hi, bar'); } bar.js

  28. module.exports = { entry: './app.js', output: { filename: 'bundle.js' }

    } webpack.config.js
  29. <html> <head> ... </head> <body> ... <script src="bundle.js"></script> </body> </html>

    index.html
  30. Você sabia?

  31. None
  32. None
  33. U$ 65.4 bilhões de dólares

  34. None
  35. • Huguinho • O líder

  36. • Huguinho • O líder

  37. • Zezinho • O mais esperto

  38. • Zezinho • O mais esperto

  39. • Luizinho • O mais criativo

  40. • Luizinho • O mais criativo

  41. Vuejs github.com/vuejs

  42. Evan You @yyx990803 github.com/open-source/stories/yyx990803

  43. github.com/vuejs/vue/pulse 46,148 5,938 194

  44. Hello World

  45. CDN vuejs.org/v2/guide

  46. <html> <head> ... </head> <body> <div id="app"> {{ message }}

    </div> <script src="https://unpkg.com/vue"></script> <script src="app.js"></script> </body> </html> index.html
  47. new Vue({ el: '#app', data: { message: 'Hello Vue!' }

    }); app.js
  48. <html> <head> ... </head> <body> <div id="app"> Hello Vue! </div>

    <script src="https://unpkg.com/vue"></script> <script src="app.js"></script> </body> </html> index.html
  49. Vue-CLI github.com/vuejs/vue-cli

  50. $ npm install -g vue-cli $ vue init webpack my-project

  51. $ npm install -g vue-cli $ vue init webpack my-project

    template nome do projeto
  52. • ES2015+ • Webpack + vue-loader (.vue) • Testes •

    e2e • Nightwatch • Unitários • Karma • Mocha + Chai + Sinon • Vue router • ESLint • PostCSS
  53. Components

  54. vuejs.org/v2/guide Estrutura [componentes globais]

  55. Vue.component(tagName, options);

  56. Vue.component('my-component', { template: '<h1>Hello World!</h1>'
 //options }); new Vue({ el:

    '#app' });
  57. <div id="app"> <my-component></my-component> </div>

  58. <div id="app"> <h1>Hello World!</h1> </div>

  59. vuejs.org/v2/guide Estrutura [single-file component]

  60. <template> // marcação </template> <script> // comportamento </script> <style> //

    estilo </style>
  61. <template> <h1>{{ message }}</h1> </template> <script> export default { name:

    'app', data() { return { message: 'Hello World' } } }; </script> <style></style>
  62. Data vuejs.org/v2/guide

  63. <template> <h1> {{ title }} </h1> </template>

  64. export default { name: 'Título', data() { return { title:'Título

    Aqui' } } }
  65. <template> <h1> Título Aqui </h1> </template>

  66. vuejs.org/v2/guide Lifecycle [hooks]

  67. lifecycle

  68. lifecycle

  69. lifecycle

  70. export default { name: 'Meu Componente', created() { console.warn('Created'); },

    mounted() { console.warn('Mounted'); }, updated() { console.warn('Updated'); }, destroyed() { console.warn('Destroyed'); } }
  71. Props vuejs.org/v2/guide

  72. <my-contact :address="Rua deserto do Atacama"> </my-contact>

  73. export default { name: 'Contato', props: ['address'] }

  74. <p>{{ address }}</p>

  75. <p>Rua deserto do Atacama</p>

  76. Methods vuejs.org/v2/guide

  77. <template> <button @click="toggle"> Mudar Status </button> <p>{{ active }}</p> </template>

  78. export default { name: 'Toggle botão', methods: { toggle() {

    this.active = !this.active; } }, data() { return { active: false } } }
  79. Diretivas vuejs.org/v2/guide

  80. • v-model • v-on • v-on:click="doSomething" • @click="doSomething" • v-bind

    • :href="url", :class="myClass" • v-for • v-show • v-if
  81. vuejs.org/v2/guide Modifiers

  82. <form @submit.prevent="onSubmit"> </form>

  83. Rotas

  84. vue-router router.vuejs.org

  85. $ npm install vue-router --save

  86. index.html <body> ... 
 <router-view></router-view> <script src="https://unpkg.com/ vue-router"> </script> </body>

  87. import Foo from './components/Foo.vue' import Bar from './components/Bar.vue' export default

    = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] routes.js
  88. import Vue from 'vue' import VueRouter from 'vue-router' import routes

    from './routes' Vue.use(VueRouter); const router = new VueRouter({ routes }); export default router; index.js
  89. import Vue from 'vue' import router from './index' new Vue({

    el:'#app', router }); main.js
  90. Gerenciando estados

  91. vuex vuex.vuejs.org

  92. $ npm install vuex --save

  93. <body> ... <script src="https://unpkg.com/vuex"> </script> </body> index.html

  94. vuex

  95. Testes

  96. vuejs.org/v2/guide Teste unitário

  97. None
  98. MyComponent .vue

  99. <template> <span>{{ message }}</span> </template>

  100. export default { data () { return { message: 'Hello!'

    } }, created () { this.message = 'Bye!' } }
  101. MyComponent .test.js

  102. import Vue from 'vue' import MyComponent from 'path/to/ MyComponent.vue'

  103. describe('MyComponent Spec', () => { it('Sets the correct default data',

    () => { const defaultData = MyComponent.data(); expect(defaultData.message).toBe('Hello!'); }); });
  104. github.com/vuejs-templates Teste e2e

  105. None
  106. MyComponent .vue

  107. <template> <div id="app"> <h1>{{message}}</h1> </div> </template> <script> export default {

    name: 'meu app', data() { return { message: 'Olá mundo!', }; } }; </script>
  108. MyComponent .test.js

  109. const devServer = browser.globals.devServerURL; browser .url(devServer) .waitForElementVisible('#app', 5000) .assert.containsText('h1', 'Olá

    mundo!') .end();
  110. Mobile e Desktop

  111. Framework 7 framework7.io

  112. github.com/nolimits4web/framework7 9,107 1,981 58

  113. Onsen UI onsen.io

  114. github.com/OnsenUI/OnsenUI 4,406 575 92

  115. VOnic github.com/wangdahoo/vonic

  116. github.com/wangdahoo/vonic 1,542 214 8

  117. Comunidade

  118. i18n

  119. Debug github.com/vuejs/vue-devtools

  120. Github github.com/vuejs/awesome-vue

  121. Slack slack.vuejs-brasil.com.br

  122. E-mail vuejsfeed.com

  123. Fórum forum.vuejs.org

  124. Artigos vuejs-brasil.com.br

  125. Demo

  126. • Vuejs • @2.0 • Travis • Karma + Jasmine

    • Leaflet • Mapa • Firebase • database • auth • Bulma • Heroku
  127. goo.gl/dgqlZ1

  128. None
  129. Thulio Philipe @thulioph Web Developer goo.gl/idCGmm Obrigado!