Vue 2.0 Hello World

by BigBlueHat

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="message" />
  <button v-on:click="save()">save</button>
  <ul>
    <li v-for="(msg, idx) in log">
      <desktop-notificator v-bind:message="msg.value" v-bind:title="msg.created"></desktop-notificator>
      {{msg.value}} - <em>{{msg.created}}</em>
      <button v-on:click="log.splice(idx, 1)">X</button>
    </li>
  </ul>
</div>

JavaScript

Vue.component('desktop-notificator', {
  props: ['message', 'title'],
  template: '<button v-on:click="notify()">📣</button>',
  methods: {
    notify: function() {
      if (Notification.permission !== "granted") {
        Notification.requestPermission();
      } else {
        new Notification(this.title, {
          body: this.message,
        });
      }
    }
  }
});

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    log: [{
      value: 'Hi there, Codeship!',
      created: '2017-01-09'
    }]
  },
  methods: {
    save: function() {
      this.log.unshift({
        value: this.message,
        created: (new Date).toISOString()
      });
    }
  }
});