vue 中使用button等表单元素的注意点

问题描述：在一个vue项目中使用了一个button绑定事件，第一次进入这个页面，点击该按钮会直接刷新页面，后面就不会了

分析：开始以为是事件回调的函数的影响，一步步断点，排查发现回调函数没有任何问题，走入了死胡同纠结一番，突然意识到可能是button默认事件的影响，经过测试果然是这样。

解决：

方式1：阻止button的默认事件,vue中可以在事件绑定是使用事件修饰符

[javascript]  view plain  copy

1. <button  @click.prevent="updateRewardConfig( )" >保存</button>  

vue常见修饰符：

• .stop
• .prevent
• .capture
• .self
• .once

[html]  view plain  copy

1. <!-- 阻止单击事件继续传播 -->  
2. <a v-on:click.stop="doThis"></a>  
3. <!-- 提交事件不再重载页面 -->  
4. <form v-on:submit.prevent="onSubmit"></form>  
5. <!-- 修饰符可以串联 -->  
6. <a v-on:click.stop.prevent="doThat"></a>  
7. <!-- 只有修饰符 -->  
8. <form v-on:submit.prevent></form>  
9. <!-- 添加事件监听器时使用事件捕获模式 -->  
10. <!-- 即内部元素触发的事件先在此处处理，然后才交由内部元素自身进行处理 -->  
11. <div v-on:click.capture="doThis">...</div>  
12. <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->  
13. <!-- 即事件不是从内部元素触发的 -->  
14. <div v-on:click.self="doThat">...</div>  

方式2：明确button的类型为普通按钮，该方法适用于所有框架，推荐使用

[javascript]  view plain  copy

1. <button type="button"@click="myClick( )" >保存</button>  

方式3：直接换标签，直接使用不带默认事件的普通标签，该方法不符合html5标签语义化的规范，而且并没有解决本质问题，不推荐使用。