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

Vuejs

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

 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
26
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
67
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
1
140
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
95
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
82
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
2
92
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
80
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
87
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
110

Other Decks in Programming

See All in Programming
832534770705425fc1f64ad60cb875a2?s=48 show_kanamaru
6
3.5k
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
0
190
C53a4a07191668addb0f406ceac16f41?s=48 sungkukshawnpark
0
670
C3a47a823a1e7adcb5be27cc3df5c482?s=48 akiyoko
3
970
Aa5b922fefbf18bea89972521971dfea?s=48 yoshikiiida
20
8k
1bfc6e2ed04a895bb36f36b86828b689?s=48 110y
3
620
F172ce6f89fdaae222055bd3625960bd?s=48 croe
0
150
B9012970f22b84c5b344ffa6f8a884d5?s=48 camaelon
0
150
098ad475722e3697ec2fba28c8654f9f?s=48 yuhta28
0
540
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
0
3.3k
A0f8acd52ed0bac0c4d87220ef0aa383?s=48 shotarok
0
580
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
0
190

Featured

See All Featured
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
315
21k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
19
4.9k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
222
120k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
177
7.9k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
117
26k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
60
7.1k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
482
150k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
17
2k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
304
32k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.1k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
254
19k

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!