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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
nuxt中使用路由守卫的方法步骤
Jan 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
PHP操作XML作为数据库的类
2010/12/19 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
Python中如何获取类属性的列表
2016/12/26 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python实现石头剪刀布小游戏
2021/01/20 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
用python发送微信消息
2020/12/21 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
python中最小二乘法详细讲解
2021/02/19 Python
网上开店必备创业计划书
2014/01/26 职场文书
农村改厕实施方案
2014/03/22 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server