Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js__1_.pdf
Search
Christian Nascimento
September 24, 2016
Technology
2
160
Vue.js__1_.pdf
Christian Nascimento
September 24, 2016
Tweet
Share
More Decks by Christian Nascimento
See All by Christian Nascimento
O que é vuex e para que ele serve
cnascimentord
0
610
Other Decks in Technology
See All in Technology
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
160
MobileActOsaka_250704.pdf
akaitadaaki
0
110
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
430
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
280
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
0
140
本が全く読めなかった過去の自分へ
genshun9
0
850
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.4k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
OPENLOGI Company Profile for engineer
hr01
1
33k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
340
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Designing for Performance
lara
610
69k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
It's Worth the Effort
3n
185
28k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Six Lessons from altMBA
skipperchong
28
3.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Transcript
Vue.js: Uma alternativa ao Angular.js, Ember.js e React.js
Christian Nascimento Resultados Digitais @cnascimentobr
Vue (pronounced /vjuː/, like view)
Evan You Ex Google e Meteor Core Dev @youyuxi
Vue.js é uma biblioteca javascript para o desenvolvimento de componentes
reativos para interfaces web modernas.
Componentes
APP SIDEBAR ITEM CONTENT
var Example = Vue.extend({ template: '<div>{{ message }}</div>', data: function
() { return { message: 'Hello Vue.js!' } } }) // register it with the tag <example> Vue.component('example', Example)
<example></example> http://vuejs.org/guide/components.html
? Reativo
None
Manter as alterações de seus objetos em sincronia com a
view é difícil?
var object = { message: 'Hello world!' }
<div id="example"> {{ message }} </div>
new Vue({ el: '#example', data: object }) Mais o mais
importante ...
setTimeout(function() { scope.$apply(function() { scope.someVal = 123 }); }, 1000);
setState(function(previousState, currentProps) { return { myInteger: previousState.myInteger + 1 };
});
user = Ember.Object.create({ firstName: 'Sam', lastName: 'Smith' }) user.get('firstName') is
'Sam' #=> true user.get('lastName') is 'Smith' #=> true
None
Moderno
// React.js (jsx) var Component = React.createClass({ getInitialState() { return
{ object: this.props.object } },...
// Vue.js var Component = Vue.component('component', { template: '<span>{{object.title}}</span>', props:
{ object: Object } });...
// Angular 2 import { Component } from '@angular/core'; @Component({
selector: 'my-component', template: '<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>' }) export class MyComponent { constructor() { this.name = 'Max'...
None
https://webpack.github.io/ http://browserify.org/ Vue-cli: https://github.com/vuejs/vue-cli
Sintaxe e API
None
<div id="app"> <input v-model="newTodo" v-on:keyup.enter="addTodo"> <ul> <li v-for="todo in todos">
<span>{{ todo.text }}</span> <button v-on:click="removeTodo($index)">X</button> ...
new Vue({ el: '#app', data: { newTodo: '', todos: [
{ text: 'Add some todos' } ] }, ...
methods: { addTodo: function () { var text = this.newTodo.trim()
if (text) { this.todos.push({ text: text }) this.newTodo = '' } },... http://vuejs.org/api/
Flexibilidade
// Vue Router import Vue from 'vue'; import VueRouter from
'vue-router'; import config from 'config'; Vue.use(VueRouter) const router = new VueRouter({history: true, root: config.root}); router.map({ '/': { name: 'home', component: view('home') }, });
// Vue Resource this.$http.get('api/events').success(function(events ) { this.$set('events', events); }).error(function(error) {
console.log(error); });
Performance
https://github.com/mathieuancelin/js-repaint-perfs
http://tinyurl.com/z7uba8n
Pronto para usar
None
None
Futuro
Vue.js 2.0 Virtual DOM + SSR http://rc.vuejs.org/guide/
// JSX new Vue({ el: '#app', methods: { hello ()
{ alert('Hello!') } }, render (h) { return ( <h1 on-click={this.hello}>Hello from JSX</h1> ) ...
None
None
Recursos https://github.com/vuejs/awesome-vue http://www.vuejs-brasil.com.br/ https://codecasts.com.br/lesson https://laracasts.com/ https://www.schoolofnet.com/ https://leanpub.com/vue
Exemplo todovue.herokuapp.com
Rails 5 API
// todobe/app/controllers/api/v1/todos_controller.rb module Api::V1 class TodosController < ApiController include ErrorSerializer
before_action :set_todo, only: [:show, :update, :destroy] def index @todos = Todo.all render json: @todos end ...
// todobe/app/serializers/todo_serializer.rb class TodoSerializer < ActiveModel::Serializer attributes :id, :title, :completed,
:order end
// todobe/config/initializers/active_model_serializer.rb ActiveModel::Serializer.config.adapter = ActiveModelSerializers::Adapter::JsonApi
// JSON { "data": [ { "id": "6", "type": "todos",
"attributes": { "title": "casadasd", "completed": false, "order": 2 ...
Vue.js app
// Main.js import Vue from 'vue'; import App from './App';
import VueSweetAlert from 'vue-sweetalert' ; require('font-awesome/css/font-awesome.css' ); Vue.use(require( 'vue-resource' )); Vue.use(VueSweetAlert); new Vue({ el: 'body', components: { App }, });
// App.vue <template> <div id="app"> <img class="logo" src="./assets/logo.png" > <todo></todo>
</div> </template> <script> import Todo from './components/Todo' ; ...
// Todo.vue ... <button v-on:click="addTodo" class="form-control" >Submit</button> <ul class="list-group" v-if="todos.length
> 0" > <li v-for="todo in todos | orderBy 'attributes.order'" track-by="$index" class="list-group-item" > <todo-item :todolist ="todo"></todo-item> </li> </ul> </div> ...
// TodoItem.vue import { API_BASE_URL } from '../../config/index.js' ; export
default { props: ['todolist','fetchtodos' ], data() { return { isEditing: false, newTitle: '', }; }, methods: { editTodo() { this. $set('isEditing', true); },...
Obrigado! Christian Nascimento @cnascimentobr
[email protected]
shipit.resultadosdigitais.com.br we’re hiring