推荐订阅源

components 组件

//组件
Vue.component('friend-component', {
	props : ['friend'],
	filters:{
		ageInOneYear(age) {
	      return age + 1;
	    },
	    fullName(value) {
	      return `${value.last}, ${value.first}`;
	    }
	},
	methods: {
		incrementAge(friend){
			friend.age =  friend.age + 1;
		},
		decrementAge(friend) {
	      friend.age = friend.age - 1;
	    }
	},
	template : `<div>
		<h2>age: {{friend.age}}</h2>
		<h2>Name: {{friend | fullName}}</h2>
		<button v-on:click="incrementAge(friend)">+</button>
		<input v-model="friend.first"/>
		<input v-model="friend.last"/>
		<button v-on:click="decrementAge(friend)">-</button>
	</div>`
})

const app = new Vue({
	el : '#app',
	data : {
		friends: [
			{
				first : 'bobby',
				last : 'banne',
				age : 25
			},
			{
				first : 'john',
				last : 'Baby',
				age : 25
			}
		]
		
	},
	template : `<div>
		 <friend-component v-for="item in friends" v-bind:friend="item" />
	</div>`
})