Vuejs

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

 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
48
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
1
85
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
64
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
73
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
2
82
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
73
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
79
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
110
7418428588f726b3a8a59f910afc1b9c?s=48 thulioph
0
130

Other Decks in Programming

See All in Programming
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
4
680
Eac0bf787b5279aca5e699ece096956e?s=48 inamiy
9
630
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
270
83722380372c00bd75ac920f2089f6aa?s=48 zacky1972
1
160
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
180
Db8efd836c9a09b71e3d8e1c60d6ea84?s=48 colinfay
0
330
C5f6e8dffbb19acf405198c8fb917337?s=48 mp911de
1
130
4bd69b0ec8e5731a5332ee100ad8fb6d?s=48 entaku
2
140
376e4eb9dc6c2e33d1330262edc4f109?s=48 janko_m
0
320
2661b52b92e28d73635638a17c96f4af?s=48 toversus
1
340
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
2
860
0b40b09ee30366ddfe68070d94d7ee3f?s=48 a_suenami
0
210

Featured

See All Featured
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.2k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
245cee81a9c424266e5e401d844ea881?s=48 lara
169
9.2k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
104
14k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.7k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
340
26k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
284
110k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
510
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.2k

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!