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 相关文章推荐
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
js+css实现导航效果实例
Feb 10 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
vue配置多页面的实现方法
May 22 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 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
3.从实例开始
2006/10/09 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
php pdo操作数据库示例
2017/03/10 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
python 穷举指定长度的密码例子
2020/04/02 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
浅析python函数式编程
2020/09/26 Python
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
会计工作心得体会
2014/01/13 职场文书
驾驶员岗位职责
2014/01/29 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
校庆活动策划方案
2014/06/05 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
python实现简单的三子棋游戏
2022/04/28 Python