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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
再论Javascript的类继承
Mar 05 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
AngularJs表单验证实例详解
May 30 Javascript
bootstrap table实例详解
Jan 06 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
js判断是否是手机页面
Mar 17 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
js图片预加载示例
2014/04/30 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
三八妇女节趣味活动方案
2014/08/23 职场文书
务虚会发言材料
2014/12/25 职场文书
统计工作个人总结
2015/03/03 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
十二生肖观后感
2015/06/12 职场文书
《月光曲》教学反思
2016/02/16 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
MySQL数据库 任意ip连接方法
2022/05/20 MySQL