Vue.js火速上手第十章——vue 配置组件

一、定义局部组件

 在组件中写point_like方法，给button绑定方法，给button加class属性，属性定义在html中

var like={
	template: '<button :class="{likeBackGround:isFalse}" @click="point_like">顶{{this.like_count}}</button>',
	data:function(){
		return {
			like_count:10,
			isFalse:false,
		}
	},
	methods:{
		point_like:function(){
			if(!this.isFalse){
				this.like_count++;
			}
			else
				this.like_count--;
	
			this.isFalse=!this.isFalse;
			
		}
	},
}

new Vue({
	el:'#seg1',
	data:{
		comment:'每个用户只能点赞一次',
	},
	components:{
		'like':like,
	}
});

二、在Html中使用组件，定义style样式

		<div id="seg1">
			<like></like><span>{{comment}}</span>
		</div>	

		<style>
			.likeBackGround{
				background:deeppink;
			}
		</style>

三、效果展示

  初始效果

点击后效果