<div id="test">
		<div>{{ text }}</div>
		<div>{{ slicedText }}</div>
		<div class="fixed" v-bind:class="{ visible: isEnabled }"
			v-bind:style="{ color: dynamicColor }">Hello VueJS!</div>
		<button v-on:click="index += 1">Click 1</button>
		<div>You have clicked "{{ index }}" times.</div>
		<button v-on:click="foo">Click 2</button>
</div>
<div id="sample">
	<test-component></test-component>
</div>

button {
	background-color:#607559;
	padding: 7px;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;
	color: white;
}

div {
	margin: 5px;
	font-weight: bold;
}

new Vue({ 
	el: "#test",
	data: {
		text: 'Welcome to VueJS!',
		index: 0,
		isEnabled: true,
		dynamicColor: " #e91e63"
	},
	computed: {
		slicedText: function () {
			// `this` points to the Vue instance
			return this.text.slice(11, 17) 
		}
	},
	methods: {
		foo: function (event) {
			// `this` inside methods points to the Vue instance
			alert(event.target.tagName + '!');
		}
	}
});

//register component
Vue.component('test-component', {
	template: '<Label>Hello Component!</Label>'
});

new Vue({ 
	el: "#sample"
});