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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
微信小程序实现下拉框功能
Jul 16 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基础教程 php内置函数实例教程
2012/08/21 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python实例一个类背后发生了什么
2016/02/09 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python的sorted用法详解
2019/06/25 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
户外活动总结范文
2014/04/30 职场文书
学习礼仪心得体会
2014/09/01 职场文书
少年犯观后感
2015/06/11 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
详解Go语言中Get/Post请求测试
2022/06/01 Golang