$30 off During Our Annual Pro Sale. View Details »

Vuejs

Thulio Philipe
March 18, 2017
Programming
5
720

 Vuejs

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

Thulio Philipe

March 18, 2017
Tweet

More Decks by Thulio Philipe

See All by Thulio Philipe
Cache, além do CTRL + F5
thulioph
0
33
CSS na era dos Componentes
thulioph
0
180
Recompose
thulioph
1
270
Styled Components
thulioph
0
200
Redux 101
thulioph
0
100
Cache
thulioph
2
110
Segurança de Aplicações Web - 101
thulioph
0
99
MEAN Jedi
thulioph
0
93
Google Maps 101
thulioph
0
110

Other Decks in Programming

See All in Programming
Isolated Development
vrallev
0
290
WebAssembly for the Backend
adriancole
0
160
Neo4j-Migrations: The lean way of applying database refactorings to Neo4j
michaelsimons
0
400
Blue / Green デプロイと安全性と複雑性と #AWSDevDay
track3jyo
PRO
11
3.8k
風刺動画「一枚岩モデル」で考える、DDDの境界付けられたコンテキスト / huge model vs bc
minodriven
13
8.2k
ネットスーパーにおける商品在庫データのアプリケーション構築事例
10xinc
7
2.5k
Django ORM パフォーマンスTips
takeaship
0
220
Datadogの設定をTerraformで書いてGit管理した話
yuhta28
1
450
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
150
AWS AppSync を利用したアプリ開発チーム視点の API 開発
sugiyu1234
0
120
NAVER Map in Jetpack Compose
fornewid
1
340
JavaOne 2022 報告会（パターンマッチングとString Templatesの話）
takasyou
0
100

Featured

See All Featured
Typedesign – Prime Four
hannesfritz
34
1.5k
A designer walks into a library…
pauljervisheath
197
16k
Embracing the Ebb and Flow
colly
74
3.5k
The Mythical Team-Month
searls
210
40k
It's Worth the Effort
3n
174
26k
A Philosophy of Restraint
colly
193
15k
Clear Off the Table
cherdarchuk
79
290k
Happy Clients
brianwarren
89
5.7k
What's in a price? How to price your products and services
michaelherold
231
9.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
27
19k
Mobile First: as difficult as doing things right
swwweet
213
7.7k
What the flash - Photography Introduction
edds
64
10k

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!