学习vue.js中遇到的一些问题

  最近正在学习vue.js，大致看完了基础和组件部分，想自己折腾仿一个购物车页面，在给购物车商品写一个button实现增减商品的时候发现用<button>标签结合vue用的时候发现每点一次页面就会刷新一次，根本无法结合vue获得响应式效果，原按钮代码如下：

 <form id="counter">
  		<table>
  			<tr>
  				<th><input type="checkbox" name="select" value="selectAll" />全选</th>
  				<th>商品信息</th>
  				<th>单价</th>
  				<th>数量</th>
  				<th>金额</th>
  				<th>操作</th>
  			</tr>
  			<tr>
  				<td>
  					<input type="checkbox" name="select" value="select" /> 					
  				</td>
  				<td>
  					<img src="img/hat.png"  />
  					<p>绵柔舒适草帽，防晒防雨</p>
  				</td>
  				<td>{{"&yen;"+price}}</td>
  				<td><!--修改商品数量-->                               
  					<button v-on:click="counter-=1">&minus;</button>
					<span>{{counter}}</span>
  					<button v-on:click="counter+=1">&#43;</button>
  				</td>
  				<td><!--商品总金额--> 
					{{"&yen;"+ counter * price}}
  				</td>
  				<td><button>删除</button></td>
  			</tr>
  		</table>		
	</form>
   

<script>
    	var counter = new Vue({
    		el:"#counter",
    		data:{
    			counter:1,
    			price:15.5
    		}
    	})
</script>

原代码因为每次点击按钮会重新刷新页面从而无法实现响应式增减商品和自动更改总价，去网上搜了之后发现有网友说：

试了之后马上就OK了！

更改后代码为：

<form id="counter">
  		<table>
  			<tr>
  				<th><input type="checkbox" name="select" value="selectAll" />全选</th>
  				<th>商品信息</th>
  				<th>单价</th>
  				<th>数量</th>
  				<th>金额</th>
  				<th>操作</th>
  			</tr>
  			<tr>
  				<td>
  					<input type="checkbox" name="select" value="select" /> 					
  				</td>
  				<td>
  					<img src="img/hat.png"  />
  					<p>绵柔舒适草帽，防晒防雨</p>
  				</td>
  				<td>{{"&yen;"+price}}</td>
  				<td><!--修改商品数量-->                               
  					<input type="button" v-on:click="counter-=1" value="&minus;" />
					<span>{{counter}}</span>
					<input type="button" v-on:click="counter+=1" value="&#43;" />
  				</td>
  				<td><!--商品总金额--> 
					{{"&yen;"+ counter * price}}
  				</td>
  				<td><button>删除</button></td>
  			</tr>
  		</table>		
</form>

这一下点击按钮页面就不会再刷新了，成功实现增添功能。