Vue.js__1_.pdf

Transcript

1. Vue.js: Uma alternativa ao Angular.js, Ember.js e React.js
2. Christian Nascimento Resultados Digitais @cnascimentobr
3. Vue (pronounced /vjuː/, like view)
4. Evan You Ex Google e Meteor Core Dev @youyuxi
5. Vue.js é uma biblioteca javascript para o desenvolvimento de componentes reativos para interfaces web modernas.
6. Componentes
7. APP SIDEBAR ITEM CONTENT
8. 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)
9. <example></example> http://vuejs.org/guide/components.html
10. ? Reativo
12. Manter as alterações de seus objetos em sincronia com a view é difícil?
13. var object = { message: 'Hello world!' }
14. <div id="example"> {{ message }} </div>
15. new Vue({ el: '#example', data: object }) Mais o mais importante ...
16. setTimeout(function() { scope.$apply(function() { scope.someVal = 123 }); }, 1000);
17. setState(function(previousState, currentProps) { return { myInteger: previousState.myInteger + 1 }; });
18. user = Ember.Object.create({ firstName: 'Sam', lastName: 'Smith' }) user.get('firstName') is 'Sam' #=> true user.get('lastName') is 'Smith' #=> true
20. Moderno
21. // React.js (jsx) var Component = React.createClass({ getInitialState() { return { object: this.props.object } },...
22. // Vue.js var Component = Vue.component('component', { template: '<span>{{object.title}}</span>', props: { object: Object } });...
23. // 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'...
25. https://webpack.github.io/ http://browserify.org/ Vue-cli: https://github.com/vuejs/vue-cli
26. Sintaxe e API
28. <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> ...
29. new Vue({ el: '#app', data: { newTodo: '', todos: [ { text: 'Add some todos' } ] }, ...
30. methods: { addTodo: function () { var text = this.newTodo.trim() if (text) { this.todos.push({ text: text }) this.newTodo = '' } },... http://vuejs.org/api/
31. Flexibilidade
32. // 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') }, });
33. // Vue Resource this.$http.get('api/events').success(function(events ) { this.$set('events', events); }).error(function(error) { console.log(error); });
34. Performance
35. https://github.com/mathieuancelin/js-repaint-perfs
36. http://tinyurl.com/z7uba8n
37. Pronto para usar
40. Futuro
41. Vue.js 2.0 Virtual DOM + SSR http://rc.vuejs.org/guide/
42. // JSX new Vue({ el: '#app', methods: { hello () { alert('Hello!') } }, render (h) { return ( <h1 on-click={this.hello}>Hello from JSX</h1> ) ...
45. 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
46. Exemplo todovue.herokuapp.com
47. Rails 5 API
48. // 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 ...
49. // todobe/app/serializers/todo_serializer.rb class TodoSerializer < ActiveModel::Serializer attributes :id, :title, :completed, :order end
50. // todobe/config/initializers/active_model_serializer.rb ActiveModel::Serializer.config.adapter = ActiveModelSerializers::Adapter::JsonApi
51. // JSON { "data": [ { "id": "6", "type": "todos", "attributes": { "title": "casadasd", "completed": false, "order": 2 ...
52. Vue.js app
53. // 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 }, });
54. // App.vue <template> <div id="app"> <img class="logo" src="./assets/logo.png" > <todo></todo> </div> </template> <script> import Todo from './components/Todo' ; ...
55. // 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> ...
56. // 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); },...
57. Obrigado! Christian Nascimento @cnascimentobr christian.nascimento@resultadosdigitais.com.br shipit.resultadosdigitais.com.br we’re hiring