Learning curve

<div id="app">
  <input v-model="greeting">
  <p>{{ greeting }} World</p>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
  new Vue({
    el: '#app',

    data: {
      greeting: 'Hello'
    }
  })
</script>

Hello world!

Angular

Learning curve

<script src="https://unpkg.com/angular/angular.js"></script>
<script>
  angular.module('HelloWorldApp', [])
    .controller('HelloWorldController', function ($scope) {
      $scope.greeting = 'Hello'
    })
</script>

<div ng-app="HelloWorldApp">
  <div ng-controller="HelloWorldController">
    <input ng-model="greeting">
    <p>{{ greeting }} world</p>
  </div>
</div>

and with Angular 1...

Learning curve

<div id="app">
  <input v-model="newTodoText" @keydown.enter="addTodo">
  <ul>
    <li v-for="(todo, index) in todos">
      {{ todo.text }}
      <button @click="removeTodo(index)">X</button>
    </li>
  </ul>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
  new Vue({
    el: '#app',

    data: {
      newTodoText: '',
      todos: []
    },

    methods: {
      addTodo: function () {
        this.todos.push({ text: this.newTodoText })
        this.newTodoText = ''
      },
      removeTodo: function (index) {
        this.todos.splice(index, 1)
      }
    }
  })
</script>

Simple todo app

Angular

Learning curve

<script src="https://unpkg.com/angular/angular.js"></script>
<script>
  angular.module('TodoApp', [])
    .controller('TodoController', function ($scope) {
      $scope.newTodoText = ''
      $scope.todos = []

      $scope.addTodo = function () {
        $scope.todos.push({ text: $scope.newTodoText })
        $scope.newTodoText = ''
      }

      $scope.removeTodo = function (index) {
        $scope.todos.splice(index, 1)
      }
    })
</script>

<div ng-app="TodoApp">
  <div ng-controller="TodoController">
    <input ng-model="newTodoText" ng-keydown="$event.which === 13 && addTodo()">
    <ul>
      <li ng-repeat="todo in todos">
        {{ todo.text }}
        <button ng-click="removeTodo($index)">X</button>
      </li>
    </ul>
  </div>
</div>

and with Angular 1...

Learning curve

<div id="app">
  It will have been 2 minutes since I loaded this page in
  <auto-counter
    :initial-value="120"
    :increment-by="-1"
    :stop-at="0"
  ></auto-counter>
  seconds.
</div>

<script src="https://unpkg.com/vue"></script>
<script>
  Vue.component('auto-counter', {
    template: '<span>{{ number }}</span>',

    props: {
      initialValue: {
        type: Number,
        default: 0
      },
      incrementBy: {
        type: Number,
        default: 1
      },
      interval: {
        type: Number,
        default: 1000
      },
      stopAt: {
        type: Number
      }
    },

    data: function () {
      return {
        number: this.initialValue
      }
    },

    created: function () {
      var vm = this
      vm.counter = setInterval(function () {
        vm.number += vm.incrementBy
        if (this.stopAt === vm.number) {
          clearInterval(vm.counter)
        }
      }, vm.interval)
    },

    beforeDestroy: function () {
      clearInterval(this.counter)
    }
  })

  new Vue({ el: '#app' })
</script>

Reusable components

Angular

Learning curve

<script src="https://unpkg.com/angular/angular.js"></script>
<script>
  angular.module('App', [])
    .component('autoCounter', {
      template: '<span>{{ $ctrl.number }}</span>',

      controller: function ($scope) {
        var vm = this
        
        vm.$onInit = function () {
          vm.number = vm.initialValue || 0
          vm.incrementBy = vm.incrementBy || 1
          vm.interval = vm.interval || 1000
          
          vm.counter = setInterval(function () {
            $scope.$apply(function () {
              vm.number += vm.incrementBy
              if (vm.stopAt === vm.number) {
                clearInterval(vm.counter)
              }
            })
          }, vm.interval)
        }
       
       	vm.$onDestroy = function () {
        	clearInterval(vm.counter)
        }
      },

      bindings: {
        initialValue: '<',
        incrementBy: '<',
        interval: '<',
        stopAt: '<'
      }
    })
</script>

<div ng-app="App">
  It will have been 2 minutes since I loaded this page in
  <auto-counter
    initial-value="120"
    increment-by="-1"
    stop-at="0"
  ></auto-counter>
  seconds.
</div>

and with Angular 1...