Vuesjs - ui panels

Vuesjs - ui panels

by Warwick Grigg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/page.js/1.6.4/page.min.js"></script>
<div id="appHead">
<input v-model="pState.header">
<input v-model="hubState.message">
<pre>{{pState.header}}</pre>
<pre>{{$data | json}}</pre>
<button  @click="switchto('home')"> Home </button>
<button  @click="switchto('page1')"> Page1 </button>

<div><a href="/">home</a></div>
<div><a href="/home">/home</a></div>
<div><a href="/page1">/page1</a></div>
</div>

<div id="appBody">
<component :is="currentView"></component>
</div>

JavaScript

var hub = {
  state: {
    message: 'Hello!'
  }
}

var vmHead = new Vue({
	el: '#appHead',
  data: {
  	  pState: {
    		header: "Header....." 
    	},
    	hubState: hub.state
  	},
  methods: {
  	switchto: function(page) {
			vmBody.switchto(page);
		}
  }
})

Vue.component('home', { template: '<div>Home!</div>'});
Vue.component('page1', { template: '<div>Page1!</div>'})

var vmBody = new Vue({
  el: '#appBody',
  data: {
  	pState: {
    		dB: "hello B"
    },
    hubState: hub.state,
    currentView: 'home'
  },
  methods: {
  	switchto: function(page) {
			this.currentView = page;
		}
  }
})

//page('/#home', vmBody.switchto('home'));
//page('/#page1', vmBody.switchto('page1'));

var vmB = new Vue({
	el: '#appB',
  data: {
  	pState: {
    	dB: "hello B"
    },
    hubState: hub.state
  }
})