Vue 2.0 Hello World

by Soviut

HTML

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

<div id="app">
  <p>
    The component emits the $event and an additional argument containing a message.
    Using the .prevent modifier strips the additional argument.
  </p>

  <emitter @emission="handleEmission">Click me, no prevent</emitter>
  <emitter @emission.prevent="handleEmission">Click me, has prevent</emitter>
  
  <p>
    message: {{ message }}
  </p>
</div>

JavaScript

Vue.component('emitter', {
	template: '<button @click="emitEvent"><slot /></button>',
  methods: {
  	emitEvent(e) {
    	this.$emit('emission', e, 'DING!!!');
    }
  }
})

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
  	handleEmission(e, message) {
    	console.log(e, message)
      this.message = message
    }
  }
})