Vue基础知识完成的小dome

使用前面的Vue基础知识完成的小dome
非常基础，练手使用

Dome简述：
通过点击下面的“使劲敲”按钮，将下面的进度条减少，减少到最后，去掉该按钮，同时将上面的图片进行一个变化。
点击下面的“重来”按钮将下面的进度条返回原始状态。

<div id="main">

	<!-- 图片 -->
	<div id="img_div" v-bind:class="{burst: ended}"></div>
	
	<!-- 进度条 -->
	<div id="jindu_div">
		<div id="jindu" v-bind:style="{width: width_jindu+'%'}"></div>
	</div>
	
	<!-- 按钮 -->
	<div id="button_div">
		<button id="upup" v-on:click="upup" v-show="!ended">使劲儿</button>
		<button id="back" v-on:click="back">重来</button>
	</div>

</div>

首先是HTML代码，后面的vue直接通过el获取最上面的id：main，后面通过v-bind:class绑定class，绑定的class是burst，且当前的burst类的状态是false，也就是当前类不显示状态。
下面使用v-bind:style绑定style，绑定的style是width，当前width的状态获取的是后面的width_jindu这个值，该值通过data传输过来。
最后的按钮使用v-on:click启动upup方法，当点击按钮时触发upup方法，同时使用v-show设置当前按钮的状态，因为后面的值为!ended，当前的ended状态为false，所以!ended状态为true，也就是显示状态，当ended改变时，则按钮消失。

#img_div{
	width: 200px;
	height: 500px;
	background: url(../img/bag.png) center no-repeat;
	background-size: 80%;
	margin: 0 auto;
}
#img_div.burst{
	background-image: url(../img/bag-burst.png);
}
#jindu_div{
	margin: 0 auto;
	width: 300px;
	height: 50px;
	border: 2px solid black;
}
#jindu{
	width: 300px;
	height: 50px;
	background-color: brown;
}
#button_div{
	width: 300px;
	margin: 0 auto;
}
#back{
	margin-left: 100px;
}

CSS代码部分没有什么特殊的地方，主要是改变上面的图片时，出现的下级样式，通过点运算符进行设置，这种方法继承了上面的全部样式，且出现冲突的地方听从子样式。

new Vue({
	el: "#main",
	data: {
		width_jindu: 100,
		ended: false
	},
	methods: {
		upup: function(){
			this.width_jindu -= 10;
			if(this.width_jindu <= 0){
				this.ended = true;
			}
		},
		
		back: function(){
			this.width_jindu = 100;
			this.ended = false;
		}
	}
});

最后就是Js代码，这里主要是通过methods里面的方法改变data当中的数据实现各种状态，没有什么特殊的地方。