Components Vue

by Megi93

HTML

<div id="app">
	<p>{{ title }}</p>
	<hr>
	<app-user></app-user>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

CSS

.user {
	border: 1px solid #ccc;
	background-color: white;
	padding: 10px;
}

JavaScript

Vue.component('app-user', {
	data: function() {
		return {
			users: [
			{ username: 'Max'},
			{ username: 'Chris'},
			{ username: 'Anna'}
			]
		}
	},
	template: '<div><div class="user" v-for="user in users"><p>Username: {{ user.username }}</p></div></div>'
});

new Vue({
	el: '#app',
	data: {
		title: 'Hello World!'	
	}
});