Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vuejs

7418428588f726b3a8a59f910afc1b9c?s=47 Thulio Philipe
March 18, 2017
Programming
5
620

 Vuejs

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

7418428588f726b3a8a59f910afc1b9c?s=128

Thulio Philipe

March 18, 2017
Tweet

More Decks by Thulio Philipe

See All by Thulio Philipe
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
2
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
52
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
1
110
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
68
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
77
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
2
83
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
76
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
83
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
110

Other Decks in Programming

See All in Programming
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
0
390
70ae2d149767d4198aac83453481b8dd?s=48 amaotone
15
7.8k
50a1ae3d2f81998c69a579daeb59f055?s=48 masui_masanori
1
250
B8d0f591da3869f3bb9d5473853be2a2?s=48 takara9
0
150
9da5d5cc4b6a9f28058152e28364b02a?s=48 prof18
0
420
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
160
12c88a3a10478fa18d0363b3ba3d9df1?s=48 christianliebel
PRO
0
130
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
170
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
130
Fb469a72f1b12726aea391f479dc1b6d?s=48 gernotstarke
0
380
3c86b5e68b972038efd6c5cd1553d46b?s=48 sters
2
120
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
120

Featured

See All Featured
78b475797a14c84799063c7cd073962f?s=48 holman
461
280k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
295
28k
11c84dff30266b907714802088852677?s=48 jasonvnalue
82
8.1k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
329
15k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
64
3.7k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
287
110k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
251
11k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
393
61k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
13
710
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
627
43k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.5k

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!