Vue 2.0 Hello World

by Saurabh Mimani

HTML

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

<div id="app">
  <p >{{ message }}</p>
  <wrapper ref="wrapper">
    <test-content></test-content>
  </wrapper>
</div>

Babel + JSX

Vue.component('wrapper', {
	name: 'Wrapper',
  template: `<div><slot></slot></div>`,
  mounted() {
  	this.$children[0].$on('test', this.callback)
  },
  beforeDestroy() {
  	this.$children[0].$off('test', this.callback)
  },
  methods: {
  	callback (data) {
    	console.log('test event:', data)
    }
  }
  
})
Vue.component('test-content', {
	name: 'Content',
  template: `<div><a href="#" @click.prevent="$emit('test', 'testdata')">Click here</a></div>`,
})
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    fontSize: 24,
  },
})