Components intro Vue

by Megi93

HTML

<h1>Components</h1>

<div id="vue-app-one"> 
	<h2>Vue app one</h2> 
	<greeting></greeting>
</div> 

<div id="vue-app-two">
	<h2>Vue app two</h2>
	<greeting></greeting>
</div>

JavaScript

// Vue.component() dva parametra unutra ima, prvi je string cije je ime komponent i objekat ! I unutar njega mozemo imati razlicite vrednosti, na primer template
Vue.component('greeting', {
	template: '<p>Hey there, {{ name }} . <button v-on:click="changeName">Change name</button></p>',
	data: function() {
		return {
			name: 'Mario'
		}
	},
	methods: {
		changeName: function() {
			this.name = 'Marlon';
		}
	}
} )

new Vue ({
	el: '#vue-app-one'
});

new Vue ({
	el: '#vue-app-two'
});