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

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

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

解决：

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

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

vue常见修饰符：

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

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

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

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

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