Vue 2.0 Hello World

by simati

HTML

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

<div id="app">
  <p>Expected output: <code>{{ JSON.stringify(expected) }}</code></p>
  <component @emission="hearEmission">complete data, without extras</component>
  <component @emission="hearEmission('extra', ...arguments)">with extras, incomplete data</component>
  <component @emission="function (a, b, c) { hearEmission('extra', a, b, c) }">expected, overly explicit</component>
  
  <ol class="log">
    <li v-for="line in logs"><code>{{ JSON.stringify(line) }}</code></li>
  </ol>
</div>

SCSS

button
{
  display: block;
  
  + button
  {
    margin-top: 1em;
  }
}

code
{
  border: solid 1px black;
  background-color: white;
  padding: 2px 4px;
  border-radius: 2px;
}

.log li
{
  + li
  {
    margin-top: 0.5em;
  }
}

JavaScript

Vue.component('component', {
	template: '<button @click="emitEvent"><slot></slot></button>',
  methods: {
  	emitEvent: function() {
    	this.$emit('emission', 1, 2, 3);
    }
  }
});

new Vue({
  el: '#app',
  data: {
  	logs: [],
    expected: ['extra', 1, 2, 3]
  },
  methods: {
  	hearEmission: function(extra, a, b, c) {
    	this.logs.push([extra, a, b, c]);
      if (this.logs.length === 11) {
      	this.logs.splice(0, 1);
      }
    }
  }
})