Vuejs

Vue.js Thulio Philipe @thulioph Web Developer

Viu-Djêi-Éss (vuejs)

Thulio Philipe @thulioph Web Developer @labcodes Web Apps @unibratec Team
@devbeers " ⚙

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

Atenção!

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

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

links, todos estão nos slides. • Tome nota de alguns termos, pode ser útil para uma pesquisa futura. Atenção!

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!

Conceitos

goo.gl/cgbP0l Components

components

Stateful goo.gl/knaTae

const hour = 1; const increment = () => hour
+ 1; increment(); // 2

goo.gl/knaTae Stateless

const hour = 1; const increment = (a) => a
+ 1; increment(hour);

Web components webcomponents.org

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

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

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

Especiﬁcação que permite utilizar novos tipos de elementos DOM custom
elements

Deﬁne como você encapsula estilo e marcação no componente shadow
DOM

Webpack webpack.js.org

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

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

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

<html> <head> ... </head> <body> ... <script src="bundle.js"></script> </body> </html>
index.html

Você sabia?

U$ 65.4 bilhões de dólares

• Huguinho • O líder

• Zezinho • O mais esperto

• Luizinho • O mais criativo

Vuejs github.com/vuejs

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

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

Hello World

CDN vuejs.org/v2/guide

<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

new Vue({ el: '#app', data: { message: 'Hello Vue!' }
}); app.js

<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

Vue-CLI github.com/vuejs/vue-cli

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

$ npm install -g vue-cli $ vue init webpack my-project
template nome do projeto

• ES2015+ • Webpack + vue-loader (.vue) • Testes •
e2e • Nightwatch • Unitários • Karma • Mocha + Chai + Sinon • Vue router • ESLint • PostCSS

Components

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

Vue.component(tagName, options);

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

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

vuejs.org/v2/guide Estrutura [single-ﬁle component]

<template> // marcação </template> <script> // comportamento </script> <style> //
estilo </style>

<template> <h1>{{ message }}</h1> </template> <script> export default { name:
'app', data() { return { message: 'Hello World' } } }; </script> <style></style>

Data vuejs.org/v2/guide

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

export default { name: 'Título', data() { return { title:'Título
Aqui' } } }

<template> <h1> Título Aqui </h1> </template>

vuejs.org/v2/guide Lifecycle [hooks]

lifecycle

export default { name: 'Meu Componente', created() { console.warn('Created'); },
mounted() { console.warn('Mounted'); }, updated() { console.warn('Updated'); }, destroyed() { console.warn('Destroyed'); } }

Props vuejs.org/v2/guide

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

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

<p>{{ address }}</p>

<p>Rua deserto do Atacama</p>

Methods vuejs.org/v2/guide

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

export default { name: 'Toggle botão', methods: { toggle() {
this.active = !this.active; } }, data() { return { active: false } } }

Diretivas vuejs.org/v2/guide

• v-model • v-on • v-on:click="doSomething" • @click="doSomething" • v-bind
• :href="url", :class="myClass" • v-for • v-show • v-if

vuejs.org/v2/guide Modiﬁers

vue-router router.vuejs.org

$ npm install vue-router --save

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

import Foo from './components/Foo.vue' import Bar from './components/Bar.vue' export default
= [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] routes.js

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

import Vue from 'vue' import router from './index' new Vue({
el:'#app', router }); main.js

Gerenciando estados

vuex vuex.vuejs.org

$ npm install vuex --save

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

Testes

vuejs.org/v2/guide Teste unitário

MyComponent .vue

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

export default { data () { return { message: 'Hello!'
} }, created () { this.message = 'Bye!' } }

MyComponent .test.js

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

describe('MyComponent Spec', () => { it('Sets the correct default data',
() => { const defaultData = MyComponent.data(); expect(defaultData.message).toBe('Hello!'); }); });

github.com/vuejs-templates Teste e2e

MyComponent .vue

<template> <div id="app"> <h1>{{message}}</h1> </div> </template> <script> export default {
name: 'meu app', data() { return { message: 'Olá mundo!', }; } }; </script>

MyComponent .test.js

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

Mobile e Desktop

Framework 7 framework7.io

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

Onsen UI onsen.io

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

VOnic github.com/wangdahoo/vonic

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

Comunidade

Debug github.com/vuejs/vue-devtools

Github github.com/vuejs/awesome-vue

Slack slack.vuejs-brasil.com.br

E-mail vuejsfeed.com

Fórum forum.vuejs.org

Artigos vuejs-brasil.com.br

• Vuejs • @2.0 • Travis • Karma + Jasmine
• Leaflet • Mapa • Firebase • database • auth • Bulma • Heroku

goo.gl/dgqlZ1

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

Vuejs

Vuejs

More Decks by Thulio Philipe

Other Decks in Programming

Featured

Transcript