vue03-directives 指令

directives 指令

v-for 循环
v-on:click 点击事件
v-model model绑定

methods 方法

const app = new Vue({
	el : '#app',
	data : {
		friends: [
			{
				first : 'bobby',
				last : 'banne',
				age : 25
			},
			{
				first : 'john',
				last : 'Baby',
				age : 25
			}
		]

	},
	//自动计算
	computed : {
		bobbyFullName(){
			return `${this.bobby.first} ${this.bobby.last}`;
		},
		johnFullName(){
			return `${this.john.first} ${this.john.last}`;
		},
		bobbyAge(){
			return this.bobby.age;
		}
	},
	//查找
	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 v-for="friend in friends">
			<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>
		</h2>
	</div>`
})