vue-hook-form使用详解


Posted in Javascript onApril 07, 2017

vue-hook-form

用于处理form请求,获取formData。以便于将form请求转成ajax/fetch请求

安装

npm install vue-hook-form

使用

VUE版本:1.x
必须在vue-cli生成的webpack模板环境中使用

一、注册&配置组件

// 这里使用在main.js中全局注册来示例
import vue from 'vue'
import hookForm from 'vue-hook-form'
// 配置全局form表单序列化之前的hook
hookForm.beforeSerialize = (vm, next) => {
 // vm: 对应的hookForm vm实例
 // next:继续执行
 // 你可以在此处执行表单校验
}
// 配置全局form提交前的hook
hookForm.onSubmit = request => {
 // request:包含了本次请求的基本信息
 // 你可以在此处执行表单校验或使用ajax来提交本次请求
}
vue.component('hook-form', hookForm)

Request对象:

{
 url: '请求地址',
 body: '请求参数',
 method: '请求方法',
 vm: '对应的hookForm vm实例'
}

二、vue文件中使用

<template>
 <hook-form action="users" :on-submit="onSubmit" :before-serialize="beforeSerialize">
 <input name="name">
 <input name="age">
 <button>提交</button>
 </hook-form>
</template>
<script>
 export default {
 methods: {
  // 局部hook
  beforeSerialize (vm, next) {
  // next:继续执行
  // 你可以在此处执行表单校验
  },
  onSubmit (request) {
  // request:包含了本次请求的基本信息
  // 你可以在此处执行表单校验或使用ajax来提交本次请求
  }
 }
 }
</script>

配置

onSubmit

form提交前的全局hook。

beforeSerialize

form表单序列化之前的全局hook。一般用于校验表单,但此时无须form表单序列化的时候。也便于在触发onSubmit之前更改form表单内容

json

Request.body是否转成json格式,默认为url字符串。默认:false

hookForm.onSubmit = request => {
 // request.body为url字符串格式
 // 形如:name=张三&age=18
}
// 配置Request.body为json格式
hookForm.json = true
hookForm.onSubmit = request => {
 // request.body为json格式
}

Props

action:请求地址
method:请求方法。默认:post
onSubmit:form提交前的局部hook
beforeSerialize: form表单序列化之前的局部hook
json:Request.body是否转成json格式(优先使用局部json配置)。默认:false
disabled:禁用

关于disabled

你可以通过使用该选项来防止form的多次提交

hookForm.onSubmit = request => {
 // 禁止form提交
 request.vm.disabled = true
 // 在ajax请求或其他相关操作之后再释放禁用。
 doSomeThing()
 .then(() => {
  request.vm.disabled = false
 })
}

常见问题

全局onSubmit中提交了请求,返回了请求。这些操作如何通知到对应的组件?

Request对象中有一个vm属性,这是hookForm组件本身的vue实例。父子组件通信
也就是说hookForm只是扮演form和ajax之间的桥梁,负责传送一下form表单数据。你可以基于它二次封装一个更多功能的form组件

全局hook和局部hook会不会同时触发?

不会。如果存在局部hook,那么优先触发局部,否则才触发全局。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
javascript FormatNumber函数实现方法
Dec 30 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
ES6实现的遍历目录函数示例
Apr 07 #Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 #Javascript
JS实现css hover操作的方法示例
Apr 07 #Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 #Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
You might like
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
ASP知识讲座四
2006/10/09 PHP
php简单的会话类代码
2011/08/08 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python实现支付宝转账接口
2019/05/07 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Python如何根据时间序列数据作图
2020/05/12 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
公安纪律作风整顿剖析材料
2014/10/10 职场文书
大学生村官个人总结
2015/02/15 职场文书
暂住证证明
2015/06/19 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android