vue 中使用button等表单元素的注意点
2017-11-20 11:46
274 查看
问题描述:在一个vue项目中使用了一个button绑定事件,第一次进入这个页面,点击该按钮会直接刷新页面,后面就不会了
分析:开始以为是事件回调的函数的影响,一步步断点,排查发现回调函数没有任何问题,走入了死胡同纠结一番,突然意识到可能是button默认事件的影响,经过测试果然是这样。
解决:
方式1:阻止button的默认事件,vue中可以在事件绑定是使用事件修饰符
<button @click.prevent="updateRewardConfig( )" >保存</button>vue常见修饰符:
<button type="button"@click="myClick( )" >保存</button>方式3:直接换标签,直接使用不带默认事件的普通标签,该方法不符合html5标签语义化的规范,而且并没有解决本质问题,不推荐使用。
分析:开始以为是事件回调的函数的影响,一步步断点,排查发现回调函数没有任何问题,走入了死胡同纠结一番,突然意识到可能是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标签语义化的规范,而且并没有解决本质问题,不推荐使用。
相关文章推荐
- vue 中使用button等表单元素的注意点
- vue 中使用button等表单元素的注意点
- 【工作日志】--vue.js下使用element的form表单的注意事项
- 【jQuery】使用serialize()方法序列化表单元素值
- 总结:FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别
- Zend Framework 1.10.1 理解和使用 Zend 表单装饰器之五:创建和呈现复合元素
- vue.js使用注意事项
- Vue.js学习记录之在元素与template中使用v-if指令实例
- Jquery使用id选择器操作元素注意事项
- VUE 表单元素双向绑定总结
- vue中vee validate表单校验的几种基本使用
- vue获取dom元素注意事项
- 一般处理程序中使用隐藏域来实现非Form表单元素上数据的改变
- 【ajax 提交表单】多种方式的注意事项 ,serialize()的使用
- 使用button元素自定义别具风格的按钮
- 使用jQuery的".css()"和".attr()"方法设置元素"left"属性的注意点
- vue基本使用--refs获取组件或元素
- Vue.js中v-show和v-if使用时的注意事项
- 【学习笔记】《STL使用入门教程》第六讲:容器使用时机、算法、删除元素的注意点
- button使用注意