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

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

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

解决：

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

保存

vue常见修饰符：

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

...


...

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

保存

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