Vue 2.0 Hello World

by budiadiono

HTML

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

<div id="app">  
  <my-container></my-container>
  <p>{{ message }}</p>  
</div>

JavaScript

var myInput = {
  template: `
    <div>
      # <input v-bind:value="value" v-on:input="updateValue($event.target.value)">
      <div>{{msg}}</div>
    </div>
  `,
  data: function() {
  	return {
    	msg: '',
    }
  },
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value)
    }
  },
  watch: {
  	value: function(val) {
    	this.msg = val
    }
  }
}

var myContainer = {
	components: {
  	'my-input': myInput
  },
	template: '<div><my-input v-model="foo"></my-input> <button @click="setVal1">Set Val</button>  <button @click="setVal2">Set Val Within NextTick</button></div>',
  data: function() {
  	return {
    	foo: ''
    }
  },
  methods: {
  	setVal1() {
    	this.foo = 'no nextTick'
    },
    setVal2() {
    	Vue.nextTick(()=>{
      	this.foo = 'within nextTick'
      })
    }
  }
}


new Vue({
	components: {
  	'my-container': myContainer
  },
  el: '#app',  
  data: {
    message: 'Hello Vue.js!'
  }  
})