Vue 2.0 Hello World

by ksoncan34

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p>{{ message }}</p>
  
  <button @click="okClicked">Click Me</button>
  <button @click="testEvents">Test Events</button>
  <button @click="addEvent">Add Event</button>
  <button @click="removeEvent">Remove Event</button>
</div>

JavaScript

class EventSync {
  constructor() {
    this._events = {};
  }
  trigger(event, ...args) {
    if (this._events[event] && this._events[event].length > 0) {
      for (let i = 0; i < this._events[event].length; i++) {
        this._events[event][i].apply(this, args);
      }
    }
  }

  on(event, fn) {
    if (!this._events[event]) {
      this._events[event] = [];
    }
    if (this._events[event].indexOf(fn) === -1) {
    	this._events[event].push(fn);
    }
  }

  off(event, fn) {
    if (fn) {
      this._events[event] = _.without(this._events[event], fn);
    } else {
      this._events[event] = [];
    }
  }
  
  eventCount(event) {
  	return this._events[event] ? this._events[event].length : 0;
  }
}


const sync = new EventSync();

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  mounted: {
		
  },
  methods: {
    testEvents: function() {
    	sync.trigger('event');
    },
    triggerEvent: function() {
      this.message += '-';
    },
    addEvent: function() {
    	sync.on('event', this.triggerEvent);
    },
    removeEvent: function() {
      sync.off('event', this.triggerEvent);
    },
    okClicked: function(text) {
      this.message = 'There are ' + sync.eventCount('event') + ' events';
    }
  }
})