Vue.js


<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Salut le monde !'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Créer des interfaces, des "vues"

Découpage en composant


<div id="app">
  <my-component></my-component>
</div>
// Mon composant
Vue.component('my-component', {
  template: '<div>Salut les gens !</div>'
})

// Notre instance de VueJS
new Vue({
  el: '#app'
})

VueJS vs React


var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

ReactDOM.render(<Timer />, mountNode);

Vue.component('timer', {
    data: function () {
        return {
            secondsElapsed: 0
        }
    },
    template: `<div>Seconds Elapsed: {secondsElapsed}</div>`,
    mounted: function () {
     this.interval = setInterval(() => {
        this.secondsElapsed++
     }, 1000)
    },
    unmounted: function () {
        clearInterval(this.interval)
    }
});

VueJS vs AngularJS


import { Component } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul class="heroes">
      <li *ngFor="let hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
  `
})

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;
  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

VueJS

By Jonathan Boyer